KQ-1870 · PASSING/CUMULUS

Passing Cumulus

A loading and thinking indicator: a field of soft dots shaded like beads in sunlight, with a small cumulus's shadow passing over it. While busy the cloud gathers, its puffs swelling in one after another on springs.drift's constants, and drifts across; the dots beneath swell and dim, each easing toward its own shade with a lag so a soft wake trails behind, and the next cloud gathers as one leaves. When the state turns done the cloud thins away and the whole field lifts evenly to full sun on the same spring. It is a polite status region that says the state in words; it takes no input.

KQ-1870 · PASSING/CUMULUS

Gaugeworks Reasoner

thinking

Comparing three route plans for Saturday

thinking

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/passing-cumulus

Props

state: "idle" | "busy" | "done"; default "busy"; What the work is doing: a cloud drifts while busy and thins away when done, and the field lifts to full sun.
cloud: number; default 1; The cloud's size relative to the field's height, 0.4 to 1.6.
dotSize: number; default 7; Dot diameter, px, 3 to 12; the field fills its box with whole rows and columns.
pitch: number; default 2.4; Dot spacing as a multiple of the dot size.
drift: number; default 1; How fast the cloud drifts across, as a multiple of its natural pace.
swell: number; default 0.5; How much a shaded dot grows, 0 to 1.
dim: number; default 0.55; How much a shaded dot darkens toward the shade colour, 0 to 1.
sunColor: string; default a warm pigment from --warn; The dots in sunlight, any CSS colour; their highlight and rim are mixed from it.
shadeColor: string; default a cool pigment from --accent-bright; The dots in the cloud's shadow, any CSS colour.
label: string; default "Working"; What the work is, spoken while busy (“Working…”).
labels: Partial<Record<"idle" | "busy" | "done", string>>; default —; What the status says in each state, replacing “Ready.”, “<label>…” and “Done.”.
seed: number; default 3; Shapes the clouds; each new cloud is a variation on it.
paused: boolean; default false; Hold the field as it is.
dpr: number; default 2; Device-pixel-ratio cap for the canvas, at most 2.
onSettle: (state: "idle" | "busy" | "done") => void; default —; Fires once a state's change has finished drawing — for done, when the field is fully lit.
className: string; default "h-28"; Size the field with a height class.

Prop	Type	Default	Description
state	"idle" \| "busy" \| "done"	"busy"	What the work is doing: a cloud drifts while busy and thins away when done, and the field lifts to full sun.
cloud	number	1	The cloud's size relative to the field's height, 0.4 to 1.6.
dotSize	number	7	Dot diameter, px, 3 to 12; the field fills its box with whole rows and columns.
pitch	number	2.4	Dot spacing as a multiple of the dot size.
drift	number	1	How fast the cloud drifts across, as a multiple of its natural pace.
swell	number	0.5	How much a shaded dot grows, 0 to 1.
dim	number	0.55	How much a shaded dot darkens toward the shade colour, 0 to 1.
sunColor	string	a warm pigment from --warn	The dots in sunlight, any CSS colour; their highlight and rim are mixed from it.
shadeColor	string	a cool pigment from --accent-bright	The dots in the cloud's shadow, any CSS colour.
label	string	"Working"	What the work is, spoken while busy (“Working…”).
labels	Partial<Record<"idle" \| "busy" \| "done", string>>	—	What the status says in each state, replacing “Ready.”, “<label>…” and “Done.”.
seed	number	3	Shapes the clouds; each new cloud is a variation on it.
paused	boolean	false	Hold the field as it is.
dpr	number	2	Device-pixel-ratio cap for the canvas, at most 2.
onSettle	(state: "idle" \| "busy" \| "done") => void	—	Fires once a state's change has finished drawing — for done, when the field is fully lit.
className	string	"h-28"	Size the field with a height class.