KQ-1875 · SPOOLED/PRINTS

Spooled Prints

Paper ribbons of printed pictures run between pairs of flanged spools, each roll leaning its own way down the piece: scrolling the page winds every roll at its own pace and in its own direction, the push coasting down so the ribbons glide on and settle while the marks on each spool's wound paper turn with them, and a slow drift keeps them winding at rest. A ribbon drags 1:1 along its length and flicks with the release velocity; hovering slows it and lifts the print under the pointer on springs.snap, and clicking opens the print in a viewer inside the piece that straightens from the roll's lean on springs.glide. It is a carousel with one tab stop: Left and Right step along a roll and wind it so the print comes to the middle on springs.glide, Up and Down change rolls, Home and End jump, Enter opens and Escape closes.

KQ-1875 · SPOOLED/PRINTS

Fernworks Press · Proof rolls

3 rolls · 8 prints · scroll to wind

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

Props

items: SpooledPrintsItem[]; default defaultSpooledPrintsItems; The pictures, in order ({ src?, alt, caption? }); every roll carries them all, each starting at its own place. Without src a drawn scene stands in.
tilt: number; default 12; How far the rolls lean, in degrees, 0 (flat strips) to 24 (steep, crossing ribbons).
speed: number; default 1; How fast the rolls wind, 0 to 2 ×: their pace at rest and how far a scroll carries them.
spools: number; default 3; How many rolls run down the piece, 2 to 4.
spoolSize: number; default 0.5; How big the spools are, 0 (slim bobbins) to 1 (fat reels).
drift: number; default 0.25; How briskly the rolls wind on their own at rest, 0 (still) to 1.
hoverSlow: number; default 0.8; How much a hovered roll slows, 0 (not at all) to 1 (it stops).
lift: number; default 0.6; How far the print under the pointer lifts toward you, 0 to 1.
value / defaultValue: number | null; default null; The index of the print open in the viewer, or null; controlled or uncontrolled.
onValueChange: (index: number | null) => void; default —; Fires from the click or key that opened, stepped or closed the viewer.
paperColor: string; default a warm cream pigment; The ribbons' paper, any CSS colour.
label: string; default "Prints"; Names the gallery for assistive technology.
seed: number; default 1; Seeds each roll's lean, pace and where it starts.
disabled: boolean; default false; Shows the rolls and takes no input.
className: string; default "h-[34rem] w-full"; Sizes the piece; pass a height with any width.

Prop	Type	Default	Description
items	SpooledPrintsItem[]	defaultSpooledPrintsItems	The pictures, in order ({ src?, alt, caption? }); every roll carries them all, each starting at its own place. Without src a drawn scene stands in.
tilt	number	12	How far the rolls lean, in degrees, 0 (flat strips) to 24 (steep, crossing ribbons).
speed	number	1	How fast the rolls wind, 0 to 2 ×: their pace at rest and how far a scroll carries them.
spools	number	3	How many rolls run down the piece, 2 to 4.
spoolSize	number	0.5	How big the spools are, 0 (slim bobbins) to 1 (fat reels).
drift	number	0.25	How briskly the rolls wind on their own at rest, 0 (still) to 1.
hoverSlow	number	0.8	How much a hovered roll slows, 0 (not at all) to 1 (it stops).
lift	number	0.6	How far the print under the pointer lifts toward you, 0 to 1.
value / defaultValue	number \| null	null	The index of the print open in the viewer, or null; controlled or uncontrolled.
onValueChange	(index: number \| null) => void	—	Fires from the click or key that opened, stepped or closed the viewer.
paperColor	string	a warm cream pigment	The ribbons' paper, any CSS colour.
label	string	"Prints"	Names the gallery for assistive technology.
seed	number	1	Seeds each roll's lean, pace and where it starts.
disabled	boolean	false	Shows the rolls and takes no input.
className	string	"h-[34rem] w-full"	Sizes the piece; pass a height with any width.