Card Fan
Tell a story in chapters. Three cards fan out on a sticky stage and rearrange as you scroll.
- Dependencies
- gsap
- Size
- 487 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/card-fan.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/card-fan.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the card-fan.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / note | string | — | Dot label and the uppercase note on the top row. |
| heading / headingAccent / intro | string | — | Heading (the accent line is italic serif) and a short intro; newlines in intro become breaks. |
| brand | string | "SŌMA" | Wordmark repeated on all three cards and the mock site nav. |
| cards | CardFanCards | — | { idea: { tag, lines, palette, paletteLabel, foot }, object: { tag, image, imageAlt, lines, foot }, digital: { tag, navLine, image, lines, caption, foot } }. The last line of each card is set in the serif accent. |
| chapters | CardFanChapter[] | — | { detail, title, text, tags, linkLabel?, linkHref? }. On desktop their height (68vh each, 75vh for the last) is the scroll runway. |
| deckLabel / stageNote / scrollHint / swipeHint | string | — | Deck group label and the captions under the stage (scroll hint on desktop, swipe hint on phones). |
| scrub | number | 1 | Seconds of smoothing for the re-deal. |
| background / ink / accent | string | "#dfd5c9" / "#141311" / "#f34225" | Section surface, text and focus outline. |