Lagoon Conf · Douala, 12–13 March
Your badge is ready. The talks are even better.
Two days of design systems, web platform and craft, by the water. Speakers, workshops and a closing dinner nobody forgets.
Adaeze Okafor
Speaker · Design systems
Speaker access
- Main hall and workshops
- Speaker lounge
- Closing dinner, Friday
Holo card
A card with a holographic foil that leans toward the cursor (or the phone's tilt) and turns over to show its back: a badge, a pass, a membership.
Use when: Events, memberships, fintech and launches where the product is something people hold: a pass, a badge, a card.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/holo-cardFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–70 chars) | — | The promise in one line, 4–9 words. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| card * | object | — | |
| issuer * | string (2–24 chars) | — | Who issues the card: an event, a club, your product. Never a real bank or card network. |
| name * | string (2–32 chars) | — | The holder's name, the largest line. |
| role | string (≤ 40 chars) | — | Under the name: a role, a tier, a plan. |
| detail | string (≤ 48 chars) | — | Bottom line: a date, a place, a validity. |
| number | string (≤ 20 chars) | — | An identifier in mono type, e.g. SPK-0142. |
| back | object | — | The reverse side, shown when the card is turned over. |
| title * | string (2–32 chars) | — | |
| items | string[] (≤ 4) | — | |
| link | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] (2–4) | ["oklch(0.82 0.14 210)","oklch(0.78 0.17 320)","oklch(0.9 0.15 95)","oklch(0.82 0.15 155)"] | The holographic foil, in the order the rainbow runs. |
| surface | "dark" | "light" | "dark" | The card's base under the foil. |
| pattern | "guilloche" | "lines" | "none" | "guilloche" | What the foil is engraved with. |
| tilt | boolean | true | The card leans toward the mouse, and drifts slowly when nobody touches it. |
| gyro | boolean | true | On phones, the card follows the device's tilt (iOS asks permission on the first touch). |
| flip | boolean | true | A button (and a click on the card) turns it over to show the back. |
The same hero as a Web Component
Web Component · no framework
<sg-holo-card>
The same engine, driven by attributes: a light surface and engraved lines here. Click the card or the button to turn it over.
Kai Mensah
Member since 2024
Members get
- Open studio on Saturdays
- Ten percent off workshops