KQ-1610 · WRAP/WALL

Wrap Wall

An endless wall of pictures in staggered columns that wraps in every direction. Drag it anywhere and it follows 1:1; throw it and it coasts by friction, leaning with its speed. Every column trails the hand on its own spring — between springs.snap beside the column you hold and springs.drift far from it — so the wall bends round your hand and ripples straight as it slows. Enter or a click opens the picture nearest the centre, growing from its tile to fill the frame on springs.glide while the wall dims; Escape shrinks it home. Arrow keys pan a column or a row on glide, Page Up and Page Down a screen, Home returns to the start.

KQ-1610 · WRAP/WALL

Coldbrook Archive

The summer wall

16 pictures · drag, throw or use the arrows

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/wrap-wall

Props

items: WrapWallItem[]; default defaultWrapWallItems; The pictures, repeated in every direction: { src?, alt, caption?, art? }.
value / defaultValue: number | null; default null; The open picture, or null while the wall is showing; controlled or initial.
onValueChange: (index: number | null) => void; default —; Fires from the click or key that opened or closed a picture.
columns: number; default 4; Columns across the frame, 2 to 6.
skew: number; default 5; The most the wall leans at speed, 0 to 12 degrees.
friction: number; default 0.4; How quickly a throw slows, 0 (coasts long) to 1 (stops short).
ripple: number; default 0.6; How far columns trail the one you hold, 0 (all as one) to 1.
stagger: number; default 0.6; How differently the columns start, 0 (level) to 1.
gap: number; default 10; Space between tiles, px.
height: number; default 440; Height of the frame, px.
seed: number; default 2; Seeds tile heights and the order of the pictures.
onCentreChange: (index: number) => void; default —; Fires when a pan settles, with the picture nearest the centre.
label: string; default "Pictures"; The wall's accessible name.
disabled: boolean; default false; No drags, keys or opening; the wall dims.
className: string; default —; Classes for the root region.

Prop	Type	Default	Description
items	WrapWallItem[]	defaultWrapWallItems	The pictures, repeated in every direction: { src?, alt, caption?, art? }.
value / defaultValue	number \| null	null	The open picture, or null while the wall is showing; controlled or initial.
onValueChange	(index: number \| null) => void	—	Fires from the click or key that opened or closed a picture.
columns	number	4	Columns across the frame, 2 to 6.
skew	number	5	The most the wall leans at speed, 0 to 12 degrees.
friction	number	0.4	How quickly a throw slows, 0 (coasts long) to 1 (stops short).
ripple	number	0.6	How far columns trail the one you hold, 0 (all as one) to 1.
stagger	number	0.6	How differently the columns start, 0 (level) to 1.
gap	number	10	Space between tiles, px.
height	number	440	Height of the frame, px.
seed	number	2	Seeds tile heights and the order of the pictures.
onCentreChange	(index: number) => void	—	Fires when a pan settles, with the picture nearest the centre.
label	string	"Pictures"	The wall's accessible name.
disabled	boolean	false	No drags, keys or opening; the wall dims.
className	string	—	Classes for the root region.