KQ-1478 · GLOW/ORB

Glow Orb

A background built to sit behind a headline: one soft orb of light whose surface is a living noise of colour, sampled on the sphere's own normal so it turns like a lit globe of gas, bright at the core and cooler toward a limb with no hard rim, inside a wide halo. It breathes on a slow asymmetric cycle; its halo leans toward the pointer, following on the springs.glide constants and arriving on springs.drift, and a press draws a deep breath on glide that is let out on drift with a soft ring leaving the limb. Keyboard focus on a control inside leans the halo there and takes a gentler breath; without WebGL2 a CSS orb still breathes and leans.

KQ-1478 · GLOW/ORB

Fernworks Breathe

Slow down for one minute

Breathe with the light

breathing · 7 s cycle · aurora

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/glow-orb

Props

children: React.ReactNode; default —; The content on top of the light: a headline, a line, a call to action.
size: number; default 0.6; The orb's diameter, as a share of the box's short side, 0.2 to 0.9.
palette: "aurora" | "accent" | "ember" | "lagoon" | readonly string[]; default "aurora"; A named palette, or four CSS colours of your own, darkest first.
breath: number; default 0.5; How deeply the orb breathes, 0 (still) to 1: how much it swells and brightens on each breath.
breathDuration: number; default 7000; One whole breath, in and out, ms.
speed: number; default 0.6; How fast the colour flows over its surface, 0 (still) to 2.
detail: number; default 0.55; How much structure the surface carries, 0 (smooth) to 1 (fine).
halo: number; default 0.6; How wide and bright the halo is, 0 to 1.
lean: number; default 0.6; How far the halo leans toward the pointer, 0 (not at all) to 1.
x: number; default 0.5; The orb's centre across the box, 0 (left) to 1 (right).
y: number; default 0.5; The orb's centre down the box, 0 (top) to 1 (bottom).
grain: number; default 0.2; A whisper of grain that also hides banding, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus lean the halo, and a press draws a deep breath.
paused: boolean; default false; Hold the orb still mid-breath; the hand still leans it.
seed: number; default 1; Seeds the surface, so two orbs 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) leaning the halo.
onBreathChange: (inhaling: boolean) => void; default —; Fires as each breath turns: true when it starts to breathe in, false when it starts to breathe out.
onDeepBreath: (drawn: boolean) => void; default —; Fires when a press draws a deep breath (true) and when it is let out (false).
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 light: a headline, a line, a call to action.
size	number	0.6	The orb's diameter, as a share of the box's short side, 0.2 to 0.9.
palette	"aurora" \| "accent" \| "ember" \| "lagoon" \| readonly string[]	"aurora"	A named palette, or four CSS colours of your own, darkest first.
breath	number	0.5	How deeply the orb breathes, 0 (still) to 1: how much it swells and brightens on each breath.
breathDuration	number	7000	One whole breath, in and out, ms.
speed	number	0.6	How fast the colour flows over its surface, 0 (still) to 2.
detail	number	0.55	How much structure the surface carries, 0 (smooth) to 1 (fine).
halo	number	0.6	How wide and bright the halo is, 0 to 1.
lean	number	0.6	How far the halo leans toward the pointer, 0 (not at all) to 1.
x	number	0.5	The orb's centre across the box, 0 (left) to 1 (right).
y	number	0.5	The orb's centre down the box, 0 (top) to 1 (bottom).
grain	number	0.2	A whisper of grain that also hides banding, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus lean the halo, and a press draws a deep breath.
paused	boolean	false	Hold the orb still mid-breath; the hand still leans it.
seed	number	1	Seeds the surface, so two orbs 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) leaning the halo.
onBreathChange	(inhaling: boolean) => void	—	Fires as each breath turns: true when it starts to breathe in, false when it starts to breathe out.
onDeepBreath	(drawn: boolean) => void	—	Fires when a press draws a deep breath (true) and when it is let out (false).
className	string	"h-full w-full"	Sizes and shapes the box.