KQ-1827 · SPIN/ART

Spin Art

A spin-art turntable: drag round the card and it turns 1:1, then coasts from the release velocity on bearing friction and air drag; tap to drip. A drip lands as a blot with a little splash and breaks into threads that run outward under the spin's centrifugal pull while, in the card's own frame, the Coriolis effect bends them back against it — loose petals at a slow spin, long tight spirals at a fast one — with a gloss on the wet paint that fades as it dries matte. Arrow keys spin it up, Enter drips, Space brakes and Escape clears.

KQ-1827 · SPIN/ART

Fieldline Fair · spin-art stall

One card each, take it home dry

still · 0 drips · tap to drip

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/spin-art

Props

friction: number; default 0.4; How quickly the disc coasts down, 0 spinning on for many seconds to 1 stopping almost at once.
drips: number; default 9; The size of each drip, px of blot: small drips throw fine threads, big ones heavy ribbons.
palette: "primary" | "sunset" | "sea" | "ink"; default "primary"; The paints, used in turn.
colors: string[]; default —; CSS colours to drip in turn, overriding palette.
defaultSpin: number; default 0; The speed the disc starts at, turns a minute; negative is anticlockwise.
onSpinChange: (rpm: number) => void; default —; Fires as the spin passes each 10 turns a minute and when it stops, from the hand, key or friction that changed it.
maxSpin: number; default 360; The fastest a throw or a key can spin it, 60 to 600 turns a minute.
runniness: number; default 0.6; How runny the paint is, 0 thick with short throws to 1 thin with long threads.
dryTime: number; default 3000; How long paint stays wet and glossy, and can still be flung, ms.
intro: boolean; default true; The first time it is seen the disc spins up and three drips land.
onDrip: (count: number) => void; default —; Fires after each drip lands, with the drips on the card.
onClear: () => void; default —; Fires when the card is cleared.
sound: boolean; default false; A whir while the disc turns, after you spin it.
label: string; default "Spin-art turntable"; The slider's accessible name.
disabled: boolean; default false; No spinning, dripping or clearing.
seed: number; default 4; Seeds where keyboard drips land and how each one breaks up.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Sizes the piece; the disc fits inside and centres. 224px tall by default.

Prop	Type	Default	Description
friction	number	0.4	How quickly the disc coasts down, 0 spinning on for many seconds to 1 stopping almost at once.
drips	number	9	The size of each drip, px of blot: small drips throw fine threads, big ones heavy ribbons.
palette	"primary" \| "sunset" \| "sea" \| "ink"	"primary"	The paints, used in turn.
colors	string[]	—	CSS colours to drip in turn, overriding palette.
defaultSpin	number	0	The speed the disc starts at, turns a minute; negative is anticlockwise.
onSpinChange	(rpm: number) => void	—	Fires as the spin passes each 10 turns a minute and when it stops, from the hand, key or friction that changed it.
maxSpin	number	360	The fastest a throw or a key can spin it, 60 to 600 turns a minute.
runniness	number	0.6	How runny the paint is, 0 thick with short throws to 1 thin with long threads.
dryTime	number	3000	How long paint stays wet and glossy, and can still be flung, ms.
intro	boolean	true	The first time it is seen the disc spins up and three drips land.
onDrip	(count: number) => void	—	Fires after each drip lands, with the drips on the card.
onClear	() => void	—	Fires when the card is cleared.
sound	boolean	false	A whir while the disc turns, after you spin it.
label	string	"Spin-art turntable"	The slider's accessible name.
disabled	boolean	false	No spinning, dripping or clearing.
seed	number	4	Seeds where keyboard drips land and how each one breaks up.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Sizes the piece; the disc fits inside and centres. 224px tall by default.