KQ-1629 · PIN/DEPTH

Pin Depth

Cards pinned to a cork board on pins of different lengths, each floating at its own height. The pointer is the viewer's eye: moving it slides every card against the cork by its height, the higher the further, so they pass one another in parallax, and since each shadow lies on the cork and stays put, the gap between a card and its shadow opens and closes while pin shafts show wherever the parallax uncovers them. The view follows on springs.glide and drifts level on springs.drift. Clicking a card lifts it off its pin on springs.snap, leaving the pin standing, and flies it to the middle as a close-up on springs.glide; Escape or the close button flies it home and drops it on its pin with springs.recoil. Arrow keys tilt the view and Home levels it.

KQ-1629 · PIN/DEPTH

Fieldline Studio · brand refresh

Moodboard

6 cards pinned · move to look around, click a card

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/pin-depth

Props

cards: readonly PinDepthCard[]; default defaultPinDepthCards; The cards: { id, title, body?, meta?, kind? (note, photo, swatch, ticket, sketch), tone?, pin?, height?, swatches? }.
value / defaultValue: string | null; default null; The id of the card brought close, controlled or initial.
onValueChange: (id: string | null) => void; default —; Fires from the click, key or close that changed it, with the new id or null.
depth: number; default 1; How far the view swings as you move, 0 (flat) to 1.5.
shadow: number; default 0.6; How strong and long the shadows are, 0 to 1.
pinLength: number; default 36; The longest pin, in px: the highest a card floats above the cork.
columns: number; default —; A fixed number of columns; by default 2 under 520px wide and 3 above.
tilt: boolean; default true; The pointer moves the view. Keys still tilt it when off.
scatter: number; default 4; How far cards hang askew, in degrees either way.
corkColor: string; default "oklch(0.66 0.07 62)"; The cork's colour, any CSS colour.
seed: number; default 5; Seeds the scatter and any pin length left unset.
label: string; default "Pin board"; Names the board for assistive technology.
closeLabel: string; default "Put back"; The close button's name in a card brought close.
headingLevel: 2 | 3 | 4; default 3; The heading level of a card's title when it is brought close.
disabled: boolean; default false; Shows the board but takes no input.
className: string; default "h-[520px] w-full"; Sizes the board.

Prop	Type	Default	Description
cards	readonly PinDepthCard[]	defaultPinDepthCards	The cards: { id, title, body?, meta?, kind? (note, photo, swatch, ticket, sketch), tone?, pin?, height?, swatches? }.
value / defaultValue	string \| null	null	The id of the card brought close, controlled or initial.
onValueChange	(id: string \| null) => void	—	Fires from the click, key or close that changed it, with the new id or null.
depth	number	1	How far the view swings as you move, 0 (flat) to 1.5.
shadow	number	0.6	How strong and long the shadows are, 0 to 1.
pinLength	number	36	The longest pin, in px: the highest a card floats above the cork.
columns	number	—	A fixed number of columns; by default 2 under 520px wide and 3 above.
tilt	boolean	true	The pointer moves the view. Keys still tilt it when off.
scatter	number	4	How far cards hang askew, in degrees either way.
corkColor	string	"oklch(0.66 0.07 62)"	The cork's colour, any CSS colour.
seed	number	5	Seeds the scatter and any pin length left unset.
label	string	"Pin board"	Names the board for assistive technology.
closeLabel	string	"Put back"	The close button's name in a card brought close.
headingLevel	2 \| 3 \| 4	3	The heading level of a card's title when it is brought close.
disabled	boolean	false	Shows the board but takes no input.
className	string	"h-[520px] w-full"	Sizes the board.