KQ-1574 · BEAD/FOUNTAIN

Bead Fountain

A long ball chain coiled in a glazed pot, its tagged end over the rim: the pointer is the hand, catching the end on a 120 ms ease and then holding it 1:1, and as you pull away the chain pours out after it and lifts into an arc above the rim — the pile kicks every leaving bead upward at a share of the pay-out speed, so the faster the pull, the higher the fountain. Click, lift a finger or leave and the chain is thrown with the hand's own speed, falls and heaps on the floor bead against bead, then the pot winds it back in over the rim, slowing for the last beads so the tag comes home. Position-based physics at 120 Hz with the rim as a pulley; arrow keys carry the end and pour it, Space or Enter takes it or lets it go, Escape lets go.

KQ-1574 · BEAD/FOUNTAIN

Coldbrook Hardware

Ball chain, by the metre

Nickel-plated steel, No. 5 bead.

in the pot · move in to pull

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/bead-fountain

Props

beadSize: number; default 5; Each bead's diameter, px (3 to 10).
length: number; default 160; How many beads the chain has (20 to 400).
finish: "steel" | "brass" | "copper" | "black"; default "steel"; The metal: brushed steel, brass, copper or black nickel.
gravity: number; default 1; Gravity, as a share of the house pull (0.3 to 2).
lift: number; default 0.6; How hard the pile kicks each bead up as it leaves, as a share of the pull's speed: the fountain's height.
drag: number; default 0.2; Air drag on the beads, 0 (none) to 1 (thick air).
rewindSpeed: number; default 45; How fast the pot winds the chain back in, beads a second.
rewindDelay: number; default 900; How long the dropped chain lies still before the pot winds it in, ms.
potPosition: number; default 0.2; Where the pot stands, as a fraction of the box's width.
children: React.ReactNode; default —; Content beside the pot: a product line, a heading. The chain passes in front of it.
interactive: boolean; default true; The pointer and keys pull the chain.
disabled: boolean; default false; The chain rests in its pot and nothing pulls it.
paused: boolean; default false; Hold the chain where it is.
sound: boolean; default false; Ticks as beads run over the rim and as the dropped chain lands. Off unless asked for.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Bead chain"; The chain's accessible name, for the keyboard's way in.
onStateChange: (state: "rest" | "pulling" | "falling" | "winding") => void; default —; The chain changed what it is doing: resting in the pot, being pulled, falling, or winding in.
onPour: (out: number) => void; default —; How many beads are out of the pot, at most ten times a second.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
beadSize	number	5	Each bead's diameter, px (3 to 10).
length	number	160	How many beads the chain has (20 to 400).
finish	"steel" \| "brass" \| "copper" \| "black"	"steel"	The metal: brushed steel, brass, copper or black nickel.
gravity	number	1	Gravity, as a share of the house pull (0.3 to 2).
lift	number	0.6	How hard the pile kicks each bead up as it leaves, as a share of the pull's speed: the fountain's height.
drag	number	0.2	Air drag on the beads, 0 (none) to 1 (thick air).
rewindSpeed	number	45	How fast the pot winds the chain back in, beads a second.
rewindDelay	number	900	How long the dropped chain lies still before the pot winds it in, ms.
potPosition	number	0.2	Where the pot stands, as a fraction of the box's width.
children	React.ReactNode	—	Content beside the pot: a product line, a heading. The chain passes in front of it.
interactive	boolean	true	The pointer and keys pull the chain.
disabled	boolean	false	The chain rests in its pot and nothing pulls it.
paused	boolean	false	Hold the chain where it is.
sound	boolean	false	Ticks as beads run over the rim and as the dropped chain lands. Off unless asked for.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Bead chain"	The chain's accessible name, for the keyboard's way in.
onStateChange	(state: "rest" \| "pulling" \| "falling" \| "winding") => void	—	The chain changed what it is doing: resting in the pot, being pulled, falling, or winding in.
onPour	(out: number) => void	—	How many beads are out of the pot, at most ten times a second.
className	string	"h-56 w-full"	Sizes the box.