KQ-1877 · FLICKER/PRINTS

Flicker Prints

A carousel of lenticular postcards on a shallow drum, where each card's viewing angle picks its frame, so as a card turns through the curve its few frames of motion play: a door opens, a heron lifts, a wave breaks. Frames hold then flip over a narrow band of angles, interleaved strip by strip under visible ridges while a highlight rides every ridge crest and a broad sheen sweeps the card. Dragging turns the drum 1:1 and scrubs every card at once, settling on the card the throw was heading for on springs.glide with the release velocity; a mouse tilts the front card toward it, and a tap or Space rocks it through its motion on snap and back on recoil. Left and Right step, Home and End jump.

KQ-1877 · FLICKER/PRINTS

Coldbrook Harbour Shop

Lenticular postcards · 6 designs

card 2 of 6 · the heron lifts · drag to turn

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/flicker-prints

Props

items: { alt: string; caption?: string; src?: string; frames?: string[]; scene?: "door" | "heron" | "wave" | "lamp" | "sail" | "poppy" }[]; default six drawn harbour scenes; The postcards, front to back. `frames` plays real frame images; a single `src` becomes a depth flip; otherwise a drawn scene.
frames: number; default 5; How many frames each card holds, 2 to 8: two flip, eight play.
ridges: number; default 28; Lenticular ridges across a card, 12 to 60: chunky bands to a fine screen.
curve: number; default 0.5; How deeply the drum curves, 0 to 1: a flat strip to a deep drum whose cards swing hard.
value / defaultValue: number; default — / 0; The card in front, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the drag, tap or key that brought a new card to the front.
blend: number; default 0.35; How long a flip between frames lasts, 0 to 1: a snap to a long banded blend.
sheen: number; default 0.55; How strongly the ridges catch the light, 0 to 1.
tilt: number; default 0.6; How far the front card tilts toward a hovering pointer, 0 to 1, playing its own frames.
paper: string; default a cream pigment; The card stock, any CSS colour.
captions: boolean; default true; Print the front card's caption under the carousel.
label: string; default "Postcards"; The carousel's accessible name.
disabled: boolean; default false; No turning, tilting or stepping.
className: string; default —; Classes for the root; it fills its container's width and sizes its cards from it.

Prop	Type	Default	Description
items	{ alt: string; caption?: string; src?: string; frames?: string[]; scene?: "door" \| "heron" \| "wave" \| "lamp" \| "sail" \| "poppy" }[]	six drawn harbour scenes	The postcards, front to back. `frames` plays real frame images; a single `src` becomes a depth flip; otherwise a drawn scene.
frames	number	5	How many frames each card holds, 2 to 8: two flip, eight play.
ridges	number	28	Lenticular ridges across a card, 12 to 60: chunky bands to a fine screen.
curve	number	0.5	How deeply the drum curves, 0 to 1: a flat strip to a deep drum whose cards swing hard.
value / defaultValue	number	— / 0	The card in front, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the drag, tap or key that brought a new card to the front.
blend	number	0.35	How long a flip between frames lasts, 0 to 1: a snap to a long banded blend.
sheen	number	0.55	How strongly the ridges catch the light, 0 to 1.
tilt	number	0.6	How far the front card tilts toward a hovering pointer, 0 to 1, playing its own frames.
paper	string	a cream pigment	The card stock, any CSS colour.
captions	boolean	true	Print the front card's caption under the carousel.
label	string	"Postcards"	The carousel's accessible name.
disabled	boolean	false	No turning, tilting or stepping.
className	string	—	Classes for the root; it fills its container's width and sizes its cards from it.