Pinned Card Deck
Keep a heading in view while photo cards rise into place beside it and the previous card tips back.
- Dependencies
- gsap
- Size
- 295 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/pinned-card-deck.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/pinned-card-deck.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the pinned-card-deck.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 |
|---|---|---|---|
| items | DeckChapter[] | — | { label, title, body, note?, image, imageAlt? } per panel. |
| eyebrow / heading / headingAccent | string | — | Heading copy; the accent line is the italic serif in the accent colour. |
| intro | string | "Three small invitations.|One beautiful return to yourself." | Paragraph under the heading; | breaks the line. |
| footStart / footEnd | string | "SCROLL AT YOUR OWN PACE" / "BODY / SKIN / SOUL" | Captions either side of the chapter meter. |
| topOffset | number | 86 | Pin position below a fixed header (px); the stage is 100svh minus this. |
| distance | number | 1.1 | Viewport heights per panel change; 3 panels pin for 2.2 × innerHeight. |
| scrub | number | 0.8 | Seconds of smoothing between scroll and the deck. |
| radius | number | 22 | Photo corner radius inside the 4px panel. |
| background / ink / accent | string | "#192f2a" / "#f4f0e6" / "#c9ad7a" | Stage, text and bronze accent colours. |