KQ-1805 · CONDENSER/COIL

Condenser Coil

A run of clear glass tubing coiled like a condenser, drawn in Canvas 2D, with liquid light flowing through it as segmented flow: seeded slugs parted by gas gaps, small bubbles swaying across the bore as they ride, and the light glowing brighter wherever the coil doubles back on itself (a fold weight found once per shape). The pointer warms the glass, quickening the flow and raising bubbles at the warm spot; a click sends one bright slug through the whole run that launches with a flick, flashes every crossing and leaves the outlet in a flare that blooms with the springs.recoil overshoot. The keyboard's way in is a button behind the content: Enter or Space sends a slug, arrow keys move a warm hand along the glass, Escape lifts it.

KQ-1805 · CONDENSER/COIL

Twelve hours through glass

Click the coil to send a slug.

Coldbrook · cold drip

coil running · 0 slugs through

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/condenser-coil

Props

flow: number; default 0.4; How fast the liquid runs, 0 (a slow seep) to 1 (a brisk run); a sent slug runs faster with it too.
bubbles: number; default 14; How many small bubbles ride in the slugs, 0 to 40.
hue: number; default 205; The liquid light's hue, 0 to 360, held at a fixed lightness for each theme.
path: string; default —; The coil as an SVG path; it is fitted inside the box with its aspect kept. Defaults to a horizontal coil that fits the box.
viewBox: string; default —; The coordinate box `path` was drawn in, so the server can show it before the canvas paints.
turns: number; default —; Loops in the generated coil, 2 to 16. Defaults to about one for every 64 px of width.
tubeWidth: number; default 10; The tube's outer width, in px, 6 to 18.
glow: number; default 0.6; How much brighter the light runs where the coil doubles back on itself, 0 to 1.
warmth: number; default 0.6; How strongly the pointer warms the glass: the flow it adds and the bubbles it raises, 0 to 1.
warmColor: string; default "oklch(0.76 0.14 55)"; The colour warm glass takes on, any CSS colour.
glassColor: string; default "var(--foreground)"; The glass's colour, any CSS colour; resolved on the element so it follows the theme.
children: React.ReactNode; default —; Content above the coil: a caption, a heading, a call to action.
interactive: boolean; default true; The pointer and keys warm the glass and send slugs.
paused: boolean; default false; Hold the liquid where it stands; a sent slug still runs.
label: string; default "Glass condenser coil"; Names the coil for assistive technology.
seed: number; default 5; Seeds the slugs' lengths and where the bubbles ride.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onSend: () => void; default —; Fires when a bright slug is sent, from the click or key that sent it.
onArrive: (count: number) => void; default —; Fires when a bright slug leaves the outlet, with how many have run through.
disabled: boolean; default false; Shows the coil flowing but takes no input.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
flow	number	0.4	How fast the liquid runs, 0 (a slow seep) to 1 (a brisk run); a sent slug runs faster with it too.
bubbles	number	14	How many small bubbles ride in the slugs, 0 to 40.
hue	number	205	The liquid light's hue, 0 to 360, held at a fixed lightness for each theme.
path	string	—	The coil as an SVG path; it is fitted inside the box with its aspect kept. Defaults to a horizontal coil that fits the box.
viewBox	string	—	The coordinate box `path` was drawn in, so the server can show it before the canvas paints.
turns	number	—	Loops in the generated coil, 2 to 16. Defaults to about one for every 64 px of width.
tubeWidth	number	10	The tube's outer width, in px, 6 to 18.
glow	number	0.6	How much brighter the light runs where the coil doubles back on itself, 0 to 1.
warmth	number	0.6	How strongly the pointer warms the glass: the flow it adds and the bubbles it raises, 0 to 1.
warmColor	string	"oklch(0.76 0.14 55)"	The colour warm glass takes on, any CSS colour.
glassColor	string	"var(--foreground)"	The glass's colour, any CSS colour; resolved on the element so it follows the theme.
children	React.ReactNode	—	Content above the coil: a caption, a heading, a call to action.
interactive	boolean	true	The pointer and keys warm the glass and send slugs.
paused	boolean	false	Hold the liquid where it stands; a sent slug still runs.
label	string	"Glass condenser coil"	Names the coil for assistive technology.
seed	number	5	Seeds the slugs' lengths and where the bubbles ride.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onSend	() => void	—	Fires when a bright slug is sent, from the click or key that sent it.
onArrive	(count: number) => void	—	Fires when a bright slug leaves the outlet, with how many have run through.
disabled	boolean	false	Shows the coil flowing but takes no input.
className	string	"h-56 w-full"	Sizes the box.