Card Drum

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/card-drum.tsx.

Install the pastetaste component "Card Drum" (card-drum) into this Next.js project and use it.

What it is: A wallet of cards as a vertical drum: names peek above, balances below. Drag, wheel or keys roll it; the leaving card tips back over its top edge, the front card flips to its back, new cards rise in.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/card-drum.json
   (it writes components/pastetaste/card-drum.tsx; install any npm packages it reports).
2. Import it: import { CardDrum } from "@/components/pastetaste/card-drum" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- cards: DrumCard[] = seven sample cards — The cards, top of the drum first: title, subtitle, tag, amount, number, holder, expiry, color, ink, image, art, back, label, id.
- index / defaultIndex: number = middle card — Card in front, controlled or at mount.
- onIndexChange: (index: number) => void — Called whenever the card in front changes, live while someone scrubs.
- onOpen: (index: number, card: DrumCard) => void — Called when the front card is clicked or Enter is pressed.
- flippable: boolean = true — Clicking the front card (or Enter) turns it over to its back.
- flipped / onFlipChange: boolean / (flipped: boolean) => void — Control the back face from outside, e.g. a Flip button.
- peek: number = 0.12 — Height of each strip above the front card, as a fraction of the card height. When the width limits the card (phones), spare height opens the strips up to 1.35x.
- peekBelow: number = 1.25 x peek — Height of each strip below the front card (balance and last digits).
- reach: number = 6 — Strips shown on each side of the front card; further cards fade out.
- aspect: number = 1.586 — Card width over height (ID-1 bank card).
- maxWidth: number = 460 — Largest card width in px; otherwise the card size follows the parent.
- scatter: number = 1.2 — Largest random tilt of the stacked cards, in degrees; 0 for a perfectly straight stack.
- wheel: boolean = true — Roll with the mouse wheel or trackpad over the drum; at either end the page scrolls on.
- currency / locale: string / string = 'USD' / 'en-US' — Balance formatting through Intl; a card can set its own currency.
- accent: string = var(--pt-accent, #e2553c) — Focus ring colour.
- label: string = 'Cards' — Accessible name of the drum (a listbox).
- className / style: string / CSSProperties — On the root; the drum fills its parent, so give the parent a height.

Live preview: https://pastetaste.com/c/card-drum
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 17