KQ-1454 · POLAR/GLOW

Polar Glow

A background of a night sky with an aurora barely there in it: broad, blurred curtains whose lower edges fold in three slow travelling waves, their light rising from the edge and fading upward from the palette's lower colour to its upper one, brighter where a sheet folds toward you, over a faint star field that shows only on a dark page — low contrast by design, so a headline sits on it comfortably. The curtain nearest the pointer brightens around it, each curtain's light following its own springs.drift so it hands over smoothly as the hand moves (the hand itself follows on springs.glide); a press sends a surge running out both ways along the nearest curtain, and keyboard focus on a control inside brightens the curtain nearest it and sends a softer surge.

KQ-1454 · POLAR/GLOW

Fernworks Lodge

Nights worth staying up for

Cabins under a northern sky

polar · intensity 0.50 · 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/polar-glow

Props

children: React.ReactNode; default —; The content on top of the sky: a hero line, a heading, a call to action.
palette: "polar" | "dusk" | "glacier" | "ember" | readonly string[]; default "polar"; A named palette, or 2 or 3 CSS colours of your own, lower edge first.
intensity: number; default 0.5; How strongly the curtains show, 0 (barely there) to 1 (vivid, still soft).
speed: number; default 0.6; How fast the curtains drift and fold, 0 (still) to 2.
curtains: number; default 3; How many curtains hang in the sky, 1 to 5.
height: number; default 0.6; How far up the frame a curtain's light reaches, 0.2 to 0.9 of its height.
fold: number; default 0.5; How deeply the curtains fold, 0 (straight arcs) to 1.
softness: number; default 0.7; How blurred a curtain's lower edge is, 0 to 1.
stars: number; default 0.5; The star field behind, 0 to 1; it shows only on a dark page.
interactive: boolean; default true; The pointer and keyboard focus brighten the nearest curtain, and a press sends a surge along it.
pointerStrength: number; default 0.6; How much the hand brightens a curtain and how hard a press surges, 0 to 1.
paused: boolean; default false; Hold the sky still; the hand still brightens it.
seed: number; default 1; Seeds the curtains' folds and the stars.
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) brightening a curtain.
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.
palette	"polar" \| "dusk" \| "glacier" \| "ember" \| readonly string[]	"polar"	A named palette, or 2 or 3 CSS colours of your own, lower edge first.
intensity	number	0.5	How strongly the curtains show, 0 (barely there) to 1 (vivid, still soft).
speed	number	0.6	How fast the curtains drift and fold, 0 (still) to 2.
curtains	number	3	How many curtains hang in the sky, 1 to 5.
height	number	0.6	How far up the frame a curtain's light reaches, 0.2 to 0.9 of its height.
fold	number	0.5	How deeply the curtains fold, 0 (straight arcs) to 1.
softness	number	0.7	How blurred a curtain's lower edge is, 0 to 1.
stars	number	0.5	The star field behind, 0 to 1; it shows only on a dark page.
interactive	boolean	true	The pointer and keyboard focus brighten the nearest curtain, and a press sends a surge along it.
pointerStrength	number	0.6	How much the hand brightens a curtain and how hard a press surges, 0 to 1.
paused	boolean	false	Hold the sky still; the hand still brightens it.
seed	number	1	Seeds the curtains' folds and the stars.
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) brightening a curtain.
className	string	"h-full w-full"	Sizes and shapes the box.