KQ-1816 · DESK/SPIKE

Desk Spike

A desk spike with notes impaled on it, seen at a three-quarter angle in real CSS 3D: a heavy base, a steel needle drawn from the top slip's hole to its point, and paper slips from data turned a little about it, each curled at a corner. A click or Space tears the top slip off — it tugs up on springs.flick, slides up the needle and rips over the point, its hole tearing ragged, then flutters away on the exit ease to reveal the next — and Backspace brings the last one back over the point and down the needle to land on springs.recoil. An empty spike refills in a cascade on the next click.

KQ-1816 · DESK/SPIKE

Order 214

Table 6

2 × Flat white

1 × Cardamom bun

1 × Iced oat latte

12:41

Paid

5 on the spike · click to tear

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/desk-spike

Props

slips: "orders" | "messages" | "wire" | "receipts" | { id: string; kind?: string; title: string; lines?: string[]; meta?: string; stamp?: string }[]; default "orders"; The notes on the spike, top first: a preset or your own (up to nine).
tilt: number; default 0.5; How far the slips turn about the needle, 0 (squared up) to 1 (a loose pile).
paperTone: "white" | "canary" | "pink" | "mixed"; default "white"; The paper: white, canary, pink, or the three carbon copies in turn.
value / defaultValue: number; default 0; How many slips are torn off the top, controlled or initial.
onValueChange: (value: number) => void; default —; Fires from the click or key that tore off, put back or refilled, with the new count.
onTear: (slip: DeskSpikeSlip) => void; default —; Fires when a slip is torn off, with the slip.
onRestore: (slip: DeskSpikeSlip) => void; default —; Fires when a slip goes back on the spike, with the slip.
curl: number; default 0.5; How far each slip's corner curls up, 0 to 1.
angle: number; default 36; How far the desk tips away from you, degrees, 20 to 50.
ink: string; default "oklch(from var(--ink) 0.27 0.02 h)"; The print's colour, any CSS colour.
refill: boolean; default true; A click on the empty spike puts every slip back.
seed: number; default 4; Seeds each slip's turn, flight and torn hole.
sound: boolean; default false; A paper rip when a slip tears free, and a soft one when it lands. Off unless asked for.
label: string; default "Note spike"; The spike's accessible name.
disabled: boolean; default false; Nothing tears.
className: string; default "h-[34rem] w-full"; Sizes the scene.

Prop	Type	Default	Description
slips	"orders" \| "messages" \| "wire" \| "receipts" \| { id: string; kind?: string; title: string; lines?: string[]; meta?: string; stamp?: string }[]	"orders"	The notes on the spike, top first: a preset or your own (up to nine).
tilt	number	0.5	How far the slips turn about the needle, 0 (squared up) to 1 (a loose pile).
paperTone	"white" \| "canary" \| "pink" \| "mixed"	"white"	The paper: white, canary, pink, or the three carbon copies in turn.
value / defaultValue	number	0	How many slips are torn off the top, controlled or initial.
onValueChange	(value: number) => void	—	Fires from the click or key that tore off, put back or refilled, with the new count.
onTear	(slip: DeskSpikeSlip) => void	—	Fires when a slip is torn off, with the slip.
onRestore	(slip: DeskSpikeSlip) => void	—	Fires when a slip goes back on the spike, with the slip.
curl	number	0.5	How far each slip's corner curls up, 0 to 1.
angle	number	36	How far the desk tips away from you, degrees, 20 to 50.
ink	string	"oklch(from var(--ink) 0.27 0.02 h)"	The print's colour, any CSS colour.
refill	boolean	true	A click on the empty spike puts every slip back.
seed	number	4	Seeds each slip's turn, flight and torn hole.
sound	boolean	false	A paper rip when a slip tears free, and a soft one when it lands. Off unless asked for.
label	string	"Note spike"	The spike's accessible name.
disabled	boolean	false	Nothing tears.
className	string	"h-[34rem] w-full"	Sizes the scene.