KQ-1448 · CROWN/RAYS

Crown Rays

A background of volumetric rays fanning down from a source just above the frame through a soft haze: seeded rays of their own widths and brightness, the crown turning slowly as a pendulum and every ray breathing on its own period, the haze breaking them into shafts and scattering light between them, burning toward white near the source. The source follows the pointer along the top on springs.drift so the crown swings with weight, and a press breaks the light: a bright front runs down the rays on the enter easing, strongest toward the press, while a critically damped drift-spring impulse brightens the crown and thins the haze; keyboard focus on a control inside moves the source over it with a softer pulse.

KQ-1448 · CROWN/RAYS

Basinworks Summit

See it from above

June 12 · the high hall

12 rays · haze 0.50

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/crown-rays

Props

children: React.ReactNode; default —; The content under the rays: a hero line, a heading, a call to action.
rays: number; default 12; How many rays fan down from the source, 4 to 24.
haze: number; default 0.5; How thick the air is, 0 (clean blades of light) to 1 (soft, broken, glowing).
color: string; default "var(--warn)"; The light's colour, any CSS colour; it is taken at a fixed light lightness so both themes read it the same.
origin: number; default 0.5; Where the source rests along the top, 0 (left) to 1 (right).
spread: number; default 110; How wide the crown fans, degrees, 40 to 160.
length: number; default 0.7; How far down the frame the rays reach, 0 (short) to 1 (all the way).
intensity: number; default 1; How bright the rays burn, 0 to 1.5.
sway: number; default 0.5; How far the crown turns and how deeply each ray breathes, 0 to 1.
speed: number; default 1; How fast the crown turns, breathes and the haze drifts, 0 (still) to 2.
interactive: boolean; default true; The pointer and keyboard focus move the source, and a press sends a pulse down the rays.
pointerStrength: number; default 0.7; How far the source follows the hand and how bright a pulse is, 0 to 1.
paused: boolean; default false; Hold the crown still; the hand still moves the source.
seed: number; default 1; Seeds the rays and the haze, so two crowns 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) moving the source.
onPulse: () => void; default —; Fires when a press (or keyboard focus) sends a pulse down the rays.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content under the rays: a hero line, a heading, a call to action.
rays	number	12	How many rays fan down from the source, 4 to 24.
haze	number	0.5	How thick the air is, 0 (clean blades of light) to 1 (soft, broken, glowing).
color	string	"var(--warn)"	The light's colour, any CSS colour; it is taken at a fixed light lightness so both themes read it the same.
origin	number	0.5	Where the source rests along the top, 0 (left) to 1 (right).
spread	number	110	How wide the crown fans, degrees, 40 to 160.
length	number	0.7	How far down the frame the rays reach, 0 (short) to 1 (all the way).
intensity	number	1	How bright the rays burn, 0 to 1.5.
sway	number	0.5	How far the crown turns and how deeply each ray breathes, 0 to 1.
speed	number	1	How fast the crown turns, breathes and the haze drifts, 0 (still) to 2.
interactive	boolean	true	The pointer and keyboard focus move the source, and a press sends a pulse down the rays.
pointerStrength	number	0.7	How far the source follows the hand and how bright a pulse is, 0 to 1.
paused	boolean	false	Hold the crown still; the hand still moves the source.
seed	number	1	Seeds the rays and the haze, so two crowns 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) moving the source.
onPulse	() => void	—	Fires when a press (or keyboard focus) sends a pulse down the rays.
className	string	"h-full w-full"	Sizes and shapes the box.