KQ-1456 · PLASMA/BLOOM

Plasma Bloom

A background of plasma in a palette you would wear, drawn in one WebGL2 pass with the content on top: interfering sine fields, planar and radial with slowly wandering centres, mapped through five low-chroma pigments mixed in OKLab, with a soft posterise from smooth gradient to crisp printed bands and a fine grain fixed to the cloth. The pointer adds its own source of rings that interfere into a soft moiré, the place following on springs.glide and the strength arriving on springs.drift, and a press drops a ring that rides outward while its strength rises and dies away on a critically damped drift spring. It is decoration and never takes focus; keyboard focus landing on a control inside brings the rings there and drops a softer one.

KQ-1456 · PLASMA/BLOOM

Coldbrook Knitwear

Colour that moves like cloth

Twelve pieces in four colourways

denim · scale 280 px · drifting

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/plasma-bloom

Props

children: React.ReactNode; default —; The content on top of the cloth: a hero line, a heading, a call to action.
palette: "linen" | "sage" | "denim" | "clay" | readonly string[]; default "denim"; A named palette, or five CSS colours of your own in field order (the middle one shows most).
scale: number; default 280; The plasma's wavelength, px.
speed: number; default 0.5; How fast the field evolves, 0 (still) to 2.
fields: number; default 4; How many sine fields interfere, 3 to 6.
bands: number; default 0.45; How the colours meet, 0 (a smooth gradient) to 1 (crisp printed bands).
contrast: number; default 0.7; How far the field reaches into the palette's ends, 0 (mostly the middle colour) to 1.
grain: number; default 0.35; A soft grain that makes it read as cloth, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus add interference rings, and a press drops a ring into the cloth.
pointerStrength: number; default 0.6; How strong the hand's rings and a dropped ring are, 0 to 1.
radius: number; default 170; How far the hand's rings reach, px.
paused: boolean; default false; Hold the field still; the hand still makes rings.
seed: number; default 1; Seeds the fields and their wandering centres, so two cloths never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) ringing the field.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the cloth: a hero line, a heading, a call to action.
palette	"linen" \| "sage" \| "denim" \| "clay" \| readonly string[]	"denim"	A named palette, or five CSS colours of your own in field order (the middle one shows most).
scale	number	280	The plasma's wavelength, px.
speed	number	0.5	How fast the field evolves, 0 (still) to 2.
fields	number	4	How many sine fields interfere, 3 to 6.
bands	number	0.45	How the colours meet, 0 (a smooth gradient) to 1 (crisp printed bands).
contrast	number	0.7	How far the field reaches into the palette's ends, 0 (mostly the middle colour) to 1.
grain	number	0.35	A soft grain that makes it read as cloth, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus add interference rings, and a press drops a ring into the cloth.
pointerStrength	number	0.6	How strong the hand's rings and a dropped ring are, 0 to 1.
radius	number	170	How far the hand's rings reach, px.
paused	boolean	false	Hold the field still; the hand still makes rings.
seed	number	1	Seeds the fields and their wandering centres, so two cloths never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) ringing the field.
className	string	"h-full w-full"	Sizes and shapes the box.