KQ-1248 · CLOUD/CHAMBER

Cloud Chamber

A canvas backdrop of a side-lit cloud chamber: invisible particles leave vapour trails that condense just behind them, then broaden, break into droplets, drift down with the gas and curl in its currents until they fade — fat alphas from a source needle, thin betas that wander and tighten into spirals as they slow, long muons from above with the small curls they knock loose. The pointer is a magnet: every particle is integrated a step at a time in the field of the moment (κ = qB/p, falling off like a pole's), so betas hook round it and slow ones are caught in a spiral, while a glow and a curl arrow mark it and its presence eases in on a short tween; a press flips its pole. The keyboard path is a role="application" surface where focus brings the magnet in, arrow keys move it and Enter or Space flip it, with the new pole announced once.

KQ-1248 · CLOUD/CHAMBER

Gaugeworks Lab

Particle week

Watch the tracks, then bring a magnet

north pole · hover to bend the tracks, click to flip

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/cloud-chamber

Props

rate: number; default 0.5; How many particles cross the chamber, 0 to 1: from one every second or so up to about ten a second on a 760×232 box, scaled by area.
field: number; default 0.6; The magnet's strength, 0 to 1, with the chamber's own weak field: 0 leaves every track straight, 1 coils slow electrons tight round the pointer. The chamber's own field alone curls slow electrons at the ends of their tracks.
tint: "mist" | "ember" | "aqua"; default "mist"; The vapour and the chamber's lamp. The trails mix it with the page's foreground: dark ink on the light theme, lit vapour on the dark one.
pole / defaultPole: "north" | "south"; default "north"; Which way the magnet bends the tracks, controlled or uncontrolled. The curl arrow round the magnet shows the way an electron turns.
onPoleChange: (pole: "north" | "south") => void; default —; Fires from the press or the key that flipped the pole, with the new pole.
label: string; default "Cloud chamber"; The accessible name of the keyboard surface.
disabled: boolean; default false; Ambient only: the chamber keeps running but ignores the pointer and the keyboard and leaves the tab order.
children: React.ReactNode; default —; What sits over the chamber — a hero, a heading — in a layer above it. Presses on its own controls never flip the pole.
className: string; default —; Classes for the root, which fills its container (h-full w-full); set its size and radius here.

Prop	Type	Default	Description
rate	number	0.5	How many particles cross the chamber, 0 to 1: from one every second or so up to about ten a second on a 760×232 box, scaled by area.
field	number	0.6	The magnet's strength, 0 to 1, with the chamber's own weak field: 0 leaves every track straight, 1 coils slow electrons tight round the pointer. The chamber's own field alone curls slow electrons at the ends of their tracks.
tint	"mist" \| "ember" \| "aqua"	"mist"	The vapour and the chamber's lamp. The trails mix it with the page's foreground: dark ink on the light theme, lit vapour on the dark one.
pole / defaultPole	"north" \| "south"	"north"	Which way the magnet bends the tracks, controlled or uncontrolled. The curl arrow round the magnet shows the way an electron turns.
onPoleChange	(pole: "north" \| "south") => void	—	Fires from the press or the key that flipped the pole, with the new pole.
label	string	"Cloud chamber"	The accessible name of the keyboard surface.
disabled	boolean	false	Ambient only: the chamber keeps running but ignores the pointer and the keyboard and leaves the tab order.
children	React.ReactNode	—	What sits over the chamber — a hero, a heading — in a layer above it. Presses on its own controls never flip the pole.
className	string	—	Classes for the root, which fills its container (h-full w-full); set its size and radius here.