KQ-1455 · AURORA/CURTAIN

Aurora Curtain

A night sky with an aurora in it, drawn in one WebGL2 pass with the content on top: tall curtains of light with a sharp pink lower fringe, a body of fine vertical rays and a ragged crown, sampled through travelling folds so the rays crowd and thicken where the sheet bunches, over a low ridge and treeline. The pointer gathers the rays toward the hand, the place following on springs.glide and the presence arriving on springs.drift, and a press sets off a breakup on the nearest curtain whose rays shoot up and die away on a critically damped drift spring. It is decoration and never takes focus; keyboard focus landing on a control inside gathers the rays there with a softer flare.

KQ-1455 · AURORA/CURTAIN

Fieldline Expeditions

Seven nights under the curtains

Small groups, dark skies, a guide who reads the forecast

polar · 3 curtains · rays 0.60

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/aurora-curtain

Props

children: React.ReactNode; default —; The content on top of the sky: a hero line, a heading, a call to action.
curtains: number; default 3; How many curtains hang in the sky, far to near, 1 to 5.
rays: number; default 0.6; Ray detail, 0 (broad soft striation) to 1 (fine, dense, crisp rays).
palette: "polar" | "glacier" | "rose" | "ember" | readonly string[]; default "polar"; A named palette, or three CSS colours of your own: lower fringe, body, crown.
height: number; default 0.55; How tall the nearest curtain stands, as a fraction of the box, 0.2 to 0.9.
fold: number; default 0.5; How deeply the curtains fold, 0 (flat sheets) to 1 (deep travelling folds).
intensity: number; default 0.7; How bright the light is, 0 to 1.
speed: number; default 0.6; How fast the curtains drift and the rays shimmer, 0 (still) to 2.
stars: number; default 0.5; The star field behind, 0 to 1; it shows only on a dark page.
horizon: number; default 0.1; Height of the ridge and treeline at the foot, as a fraction of the box, 0 (none) to 0.3.
interactive: boolean; default true; The pointer and keyboard focus gather the rays, and a press sets off a flare.
pointerStrength: number; default 0.6; How hard the hand gathers the rays and how high a flare throws them, 0 to 1.
radius: number; default 150; How far the hand reaches along a curtain, px.
paused: boolean; default false; Hold the sky still; the hand still gathers and flares.
seed: number; default 1; Seeds the curtains, the stars and the ridge, so two skies 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) gathering the rays.
onFlare: () => void; default —; Fires when a press or keyboard focus sets off a flare.
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 sky: a hero line, a heading, a call to action.
curtains	number	3	How many curtains hang in the sky, far to near, 1 to 5.
rays	number	0.6	Ray detail, 0 (broad soft striation) to 1 (fine, dense, crisp rays).
palette	"polar" \| "glacier" \| "rose" \| "ember" \| readonly string[]	"polar"	A named palette, or three CSS colours of your own: lower fringe, body, crown.
height	number	0.55	How tall the nearest curtain stands, as a fraction of the box, 0.2 to 0.9.
fold	number	0.5	How deeply the curtains fold, 0 (flat sheets) to 1 (deep travelling folds).
intensity	number	0.7	How bright the light is, 0 to 1.
speed	number	0.6	How fast the curtains drift and the rays shimmer, 0 (still) to 2.
stars	number	0.5	The star field behind, 0 to 1; it shows only on a dark page.
horizon	number	0.1	Height of the ridge and treeline at the foot, as a fraction of the box, 0 (none) to 0.3.
interactive	boolean	true	The pointer and keyboard focus gather the rays, and a press sets off a flare.
pointerStrength	number	0.6	How hard the hand gathers the rays and how high a flare throws them, 0 to 1.
radius	number	150	How far the hand reaches along a curtain, px.
paused	boolean	false	Hold the sky still; the hand still gathers and flares.
seed	number	1	Seeds the curtains, the stars and the ridge, so two skies 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) gathering the rays.
onFlare	() => void	—	Fires when a press or keyboard focus sets off a flare.
className	string	"h-full w-full"	Sizes and shapes the box.