KQ-1858 · CARD/STUNT

Card Stunt

A grandstand of tiny seated figures, each holding a card at the chest, together making a mosaic that steps through a routine of pictures and words. Each change arrives as a wave of flips: every card turns half over about its horizontal axis as the front reaches its holder — sweeping, rising, bursting from the centre or running on the diagonal, each holder a few hundredths early or late — darkening as it goes edge-on so you glimpse the face behind it, and landing on the snap spring showing its other side; between frames a stadium ripple sometimes rolls across. Pointing at a section makes it jump the gun and flip early; a click steps on, and with the stand focused Right and Left step the routine (back runs the wave the other way), Home and End jump and Space pauses it.

KQ-1858 · CARD/STUNT

Fieldline FC · Matchday 1

Saturday 15:00

frame 1 of 4 · Sunrise · arrows step · point to flip early

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/card-stunt

Props

frames: readonly CardStuntFrame[]; default defaultCardStuntFrames; The pictures and words, in order: each `{ text }` (set in a 3 × 5 pixel font), `{ picture }` (rows of 0–3) or `{ draw(col, row, cols, rows) }`, with an optional `label` and `wave` ("sweep" | "rise" | "burst" | "diagonal").
rows: number; default 8; Tiers of seats, 4 to 12; the columns follow the width so seats stay near square.
wave: number; default 1; Speed of the flip front across the stand, 0.25 to 3.
palette: "home" | "sunset" | "harbor" | "ink"; default "home"; Four card pigments: entries 0 (field), 1 (light), 2 (accent) and 3 (deep).
colors: readonly string[]; default —; Four CSS colours for entries 0–3; overrides `palette`.
interval: number; default 3200; Time from one frame to the next while auto-playing, the wave included, ms.
index / defaultIndex: number; default 0; The frame shown, controlled or not.
onIndexChange: (index: number) => void; default —; Fires from the key, click or timer that moved it, with the new index.
autoPlay: boolean; default true; Step through the frames on its own while in view.
ripple: boolean; default true; Let a stadium ripple roll across the stand between frames.
earlyFlip: boolean; default true; Seats near the pointer jump the gun and flip to the next frame early.
interactive: boolean; default true; Clicks, hover and the keys.
sound: boolean; default false; Swishes that travel with a step's wave and a quiet one for an early flip; silent until a visitor clicks or presses a key.
paused: boolean; default false; Hold the current frame.
onPausedChange: (paused: boolean) => void; default —; Fires when Space pauses or resumes auto-play.
seed: number; default 4; Seeds faces, hair, shirts and each holder's timing.
label: string; default "Card stunt"; Accessible name.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-52 w-full"; Sizes the stand.

Prop	Type	Default	Description
frames	readonly CardStuntFrame[]	defaultCardStuntFrames	The pictures and words, in order: each `{ text }` (set in a 3 × 5 pixel font), `{ picture }` (rows of 0–3) or `{ draw(col, row, cols, rows) }`, with an optional `label` and `wave` ("sweep" \| "rise" \| "burst" \| "diagonal").
rows	number	8	Tiers of seats, 4 to 12; the columns follow the width so seats stay near square.
wave	number	1	Speed of the flip front across the stand, 0.25 to 3.
palette	"home" \| "sunset" \| "harbor" \| "ink"	"home"	Four card pigments: entries 0 (field), 1 (light), 2 (accent) and 3 (deep).
colors	readonly string[]	—	Four CSS colours for entries 0–3; overrides `palette`.
interval	number	3200	Time from one frame to the next while auto-playing, the wave included, ms.
index / defaultIndex	number	0	The frame shown, controlled or not.
onIndexChange	(index: number) => void	—	Fires from the key, click or timer that moved it, with the new index.
autoPlay	boolean	true	Step through the frames on its own while in view.
ripple	boolean	true	Let a stadium ripple roll across the stand between frames.
earlyFlip	boolean	true	Seats near the pointer jump the gun and flip to the next frame early.
interactive	boolean	true	Clicks, hover and the keys.
sound	boolean	false	Swishes that travel with a step's wave and a quiet one for an early flip; silent until a visitor clicks or presses a key.
paused	boolean	false	Hold the current frame.
onPausedChange	(paused: boolean) => void	—	Fires when Space pauses or resumes auto-play.
seed	number	4	Seeds faces, hair, shirts and each holder's timing.
label	string	"Card stunt"	Accessible name.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-52 w-full"	Sizes the stand.