KQ-1441 · AETHER/SWIRL

Aether Swirl

A background of colour folded through itself like ink suspended in oil: a WebGL2 shader warps noise by noise by noise and draws four palette colours out into banded swirls that follow the folds, with hair-fine filaments where the bands meet and a soft sheen across their slopes, drifting and re-folding over tens of seconds. The folds deepen under the pointer, its place following on the springs.glide constants and its presence arriving on springs.drift, and a press winds the colour round the hand through a critically damped twist spring with the drift constants; keyboard focus on a control inside brings the hand there with a softer fold.

KQ-1441 · AETHER/SWIRL

Basinworks Inks

Pigments that move in the bottle

Twelve colours, ground by hand

cobalt · warp 0.60 · 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/aether-swirl

Props

children: React.ReactNode; default —; The content on top of the colour: a hero line, a heading, a call to action.
warp: number; default 0.6; How deeply the colour folds through itself, 0 (soft clouds) to 1 (tight marbling).
speed: number; default 0.5; How fast it drifts, 0 (still) to 2.
palette: "cobalt" | "dusk" | "ember" | "lagoon" | readonly string[]; default "cobalt"; A named palette, or four CSS colours of your own, darkest first.
scale: number; default 340; The size of a swirl, px.
detail: number; default 0.6; How much fine structure the folds carry, 0 to 1.
veins: number; default 0.4; Fine filaments along the folds, 0 (none) to 1.
sheen: number; default 0.4; Light on the surface, like oil, 0 to 1.
grain: number; default 0.25; A whisper of film grain that also hides banding, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus deepen the folds, and a press winds the colour round.
pointerStrength: number; default 0.6; How much the hand deepens the folds and how hard a press winds them, 0 to 1.
radius: number; default 200; How far the hand reaches, px.
paused: boolean; default false; Hold the colour still; the hand still folds it.
seed: number; default 1; Seeds the pattern, so two swirls 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) folding the colour.
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 colour: a hero line, a heading, a call to action.
warp	number	0.6	How deeply the colour folds through itself, 0 (soft clouds) to 1 (tight marbling).
speed	number	0.5	How fast it drifts, 0 (still) to 2.
palette	"cobalt" \| "dusk" \| "ember" \| "lagoon" \| readonly string[]	"cobalt"	A named palette, or four CSS colours of your own, darkest first.
scale	number	340	The size of a swirl, px.
detail	number	0.6	How much fine structure the folds carry, 0 to 1.
veins	number	0.4	Fine filaments along the folds, 0 (none) to 1.
sheen	number	0.4	Light on the surface, like oil, 0 to 1.
grain	number	0.25	A whisper of film grain that also hides banding, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus deepen the folds, and a press winds the colour round.
pointerStrength	number	0.6	How much the hand deepens the folds and how hard a press winds them, 0 to 1.
radius	number	200	How far the hand reaches, px.
paused	boolean	false	Hold the colour still; the hand still folds it.
seed	number	1	Seeds the pattern, so two swirls 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) folding the colour.
className	string	"h-full w-full"	Sizes and shapes the box.