KQ-1789 · CYCLONE/JAR

Cyclone Jar

A tall glass jar of water and fine glitter, seen side-on and a little from above: drag in circles over it — the hand's travel around the jar's axis is torque, so circles spin it up and a scrub barely does — and a funnel forms down the middle, its depth following the spin on the springs.drift constants as it narrows, while the glitter, carried by a Rankine vortex and one closed secondary cell, spirals faster as it is drawn down toward the core and is thrown out under the surface. Stop and the spin dies away: the funnel slows, widens and collapses, and the flakes drift down fluttering and glinting to gather in a mound in the middle of the floor. Arrow keys push the water round (right clockwise, left anticlockwise), Enter or Space gives a full swirl, and a swish answers each half turn of the hand.

KQ-1789 · CYCLONE/JAR

Fieldline Science Kit · No. 7

The vortex jar

settling · glitter drifting down

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/cyclone-jar

Props

swirl: number; default 0.6; How much a circle of the hand spins the water and how deep the funnel can reach, 0 to 1.
particles: number; default 700; How many glitter flakes, 100 to 1500.
glass: "clear" | "sea" | "amber" | "smoke"; default "clear"; The glass's tint.
colors: string[]; default gold, silver, blue and rose pigments from the tokens; The glitter, CSS colours.
waterColor: string; default a pale (light) or deep (dark) blue, tinted by the glass; The water, any CSS colour (translucent reads best).
fill: number; default 0.86; How full the jar is, 0.6 to 0.95.
viscosity: number; default 0.4; How quickly the spin dies away, 0 (a long, slow spin-down) to 1 (thick water, quick).
sink: number; default 0.5; How quickly the glitter settles, 0 to 1.
glint: number; default 0.7; How brightly flakes flash as they turn to the light, 0 to 1.
onStateChange: (state: "still" | "swirling" | "settling") => void; default —; Fires when the water starts swirling, starts settling, or comes to rest.
sound: boolean; default false; A swish for every half turn of the hand, and for each key press.
paused: boolean; default false; Freeze the water and the glitter where they are.
seed: number; default 1; Seeds where every flake starts and how it tumbles.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Glitter jar"; The jar's accessible name.
disabled: boolean; default false; No swirling.
className: string; default —; Sizes the piece; the jar keeps its shape and centres in it.

Prop	Type	Default	Description
swirl	number	0.6	How much a circle of the hand spins the water and how deep the funnel can reach, 0 to 1.
particles	number	700	How many glitter flakes, 100 to 1500.
glass	"clear" \| "sea" \| "amber" \| "smoke"	"clear"	The glass's tint.
colors	string[]	gold, silver, blue and rose pigments from the tokens	The glitter, CSS colours.
waterColor	string	a pale (light) or deep (dark) blue, tinted by the glass	The water, any CSS colour (translucent reads best).
fill	number	0.86	How full the jar is, 0.6 to 0.95.
viscosity	number	0.4	How quickly the spin dies away, 0 (a long, slow spin-down) to 1 (thick water, quick).
sink	number	0.5	How quickly the glitter settles, 0 to 1.
glint	number	0.7	How brightly flakes flash as they turn to the light, 0 to 1.
onStateChange	(state: "still" \| "swirling" \| "settling") => void	—	Fires when the water starts swirling, starts settling, or comes to rest.
sound	boolean	false	A swish for every half turn of the hand, and for each key press.
paused	boolean	false	Freeze the water and the glitter where they are.
seed	number	1	Seeds where every flake starts and how it tumbles.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Glitter jar"	The jar's accessible name.
disabled	boolean	false	No swirling.
className	string	—	Sizes the piece; the jar keeps its shape and centres in it.