KQ-1564 · CRATE/DIG

Crate Dig

Album sleeves stand in a wooden crate seen from above at an angle, in CSS 3D. Flick, drag or scroll and they tip forward one at a time onto the front wall and each other, each a hair more upright than the last so the stack never passes through itself, while the next cover stands revealed, lifted a notch; the flip is one continuous value, so a drag riffles through 1:1 and a flick settles on a whole sleeve on springs.glide with the release velocity. Pull the revealed sleeve (drag it up, click it or Enter) and it rises to face you on glide, the record sliding out a beat later and spinning up to `spin` rpm, its label printed; Escape or Enter puts it back on an exit tween. Down and Right flip forward, Up and Left back, Home and End go to the ends, with paper sounds for every sleeve and pull when `sound` is on.

KQ-1564 · CRATE/DIG

Coldbrook Records · used bin

flipping · 1 of 12 · low fields — marrow cove

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/crate-dig

Props

albums: CrateAlbum[]; default defaultCrateAlbums; The records in the crate, front to back: { title, artist, year?, src?, alt?, art?, label? }.
value / defaultValue: number; default 0; The sleeve standing revealed, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the flick, drag, wheel, key or click that revealed a new sleeve.
pulled / defaultPulled: boolean; default false; The revealed record pulled out and turning, controlled or initial.
onPulledChange: (pulled: boolean) => void; default —; Fires from the drag, click or key that pulled the record or put it back.
tilt: number; default 48; How steeply you look down into the crate, degrees.
crateDepth: number; default 200; Length of the crate front to back, px at a 180px sleeve; a deeper crate spaces the sleeves out.
spin: number; default 33; How fast a pulled record turns, rpm; 0 leaves it still.
tipAngle: number; default 48; How far a flipped sleeve leans forward, degrees.
woodTone: "oak" | "walnut" | "pine"; default "oak"; The crate's wood.
wheel: boolean; default true; The wheel flips sleeves once the visitor has rested on the crate or tabbed in, and lets the page scroll at either end.
sound: boolean; default false; Play the paper of the sleeves. Off unless asked for.
height: number; default 520; Height of the frame, px.
label: string; default "Record crate"; The crate's accessible name.
disabled: boolean; default false; Stops every gesture and key.
className: string; default —; Classes for the outer frame.

Prop	Type	Default	Description
albums	CrateAlbum[]	defaultCrateAlbums	The records in the crate, front to back: { title, artist, year?, src?, alt?, art?, label? }.
value / defaultValue	number	0	The sleeve standing revealed, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the flick, drag, wheel, key or click that revealed a new sleeve.
pulled / defaultPulled	boolean	false	The revealed record pulled out and turning, controlled or initial.
onPulledChange	(pulled: boolean) => void	—	Fires from the drag, click or key that pulled the record or put it back.
tilt	number	48	How steeply you look down into the crate, degrees.
crateDepth	number	200	Length of the crate front to back, px at a 180px sleeve; a deeper crate spaces the sleeves out.
spin	number	33	How fast a pulled record turns, rpm; 0 leaves it still.
tipAngle	number	48	How far a flipped sleeve leans forward, degrees.
woodTone	"oak" \| "walnut" \| "pine"	"oak"	The crate's wood.
wheel	boolean	true	The wheel flips sleeves once the visitor has rested on the crate or tabbed in, and lets the page scroll at either end.
sound	boolean	false	Play the paper of the sleeves. Off unless asked for.
height	number	520	Height of the frame, px.
label	string	"Record crate"	The crate's accessible name.
disabled	boolean	false	Stops every gesture and key.
className	string	—	Classes for the outer frame.