KQ-1465 · SPECTRUM/BURST

Spectrum Burst

A background of light bursting from a point in every direction, each seeded ray split by dispersion: summed over seven wavelengths, each turned by an angle that grows away from the centre, so the colours overlap into white at the heart and fan into a spectrum toward each tip, red on one edge and violet on the other. The burst turns slowly and breathes, and its centre follows the hand on springs with the springs.drift constants; a press blooms it on springs.recoil — rays thrown out long and split wide, ringing twice as they settle — while a split ring of light leaves the centre on the enter easing. Keyboard focus on a control inside carries the centre to it and blooms softly.

KQ-1465 · SPECTRUM/BURST

Fieldline 4

Every colour at once

Out on the first

16 rays · dispersion 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/spectrum-burst

Props

children: React.ReactNode; default —; The content in front of the burst: a hero line, a heading, a call to action.
rays: number; default 16; How many rays leave the centre, 4 to 36.
dispersion: number; default 0.5; How far each ray splits into colour toward its tip, 0 (white blades) to 1.
speed: number; default 1; How fast the burst turns and pulses, 0 (still) to 2.
originX: number; default 0.5; Where the burst rests across the box, 0 (left) to 1 (right).
originY: number; default 0.42; Where the burst rests down the box, 0 (top) to 1 (bottom).
length: number; default 0.7; How far the rays reach, as a share of the box's diagonal, 0.2 to 1.
width: number; default 0.4; How broad each ray is, 0 (a fine blade) to 1 (a wide wedge).
intensity: number; default 1; How bright the light is, 0 to 1.5.
pulse: number; default 0.5; How much the rays breathe and ripple in length and brightness, 0 to 1.
halo: number; default 0.35; How bright the faint spectral ring around the burst is, 0 (none) to 1.
saturation: number; default 0.8; How rich the split colours are, 0 (grey fringes) to 1 (pure spectrum).
interactive: boolean; default true; The centre follows the hand, a press blooms the burst, and keyboard focus inside carries it to the control.
pointerStrength: number; default 0.7; How far toward the hand the centre travels and how hard a press blooms, 0 to 1.
paused: boolean; default false; Hold the turning and the pulse still; the hand still carries the centre.
seed: number; default 1; Seeds every ray's length, width, brightness and rhythm.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onBurst: () => void; default —; Fires when a press (or keyboard focus) blooms the burst.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) carrying the centre.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content in front of the burst: a hero line, a heading, a call to action.
rays	number	16	How many rays leave the centre, 4 to 36.
dispersion	number	0.5	How far each ray splits into colour toward its tip, 0 (white blades) to 1.
speed	number	1	How fast the burst turns and pulses, 0 (still) to 2.
originX	number	0.5	Where the burst rests across the box, 0 (left) to 1 (right).
originY	number	0.42	Where the burst rests down the box, 0 (top) to 1 (bottom).
length	number	0.7	How far the rays reach, as a share of the box's diagonal, 0.2 to 1.
width	number	0.4	How broad each ray is, 0 (a fine blade) to 1 (a wide wedge).
intensity	number	1	How bright the light is, 0 to 1.5.
pulse	number	0.5	How much the rays breathe and ripple in length and brightness, 0 to 1.
halo	number	0.35	How bright the faint spectral ring around the burst is, 0 (none) to 1.
saturation	number	0.8	How rich the split colours are, 0 (grey fringes) to 1 (pure spectrum).
interactive	boolean	true	The centre follows the hand, a press blooms the burst, and keyboard focus inside carries it to the control.
pointerStrength	number	0.7	How far toward the hand the centre travels and how hard a press blooms, 0 to 1.
paused	boolean	false	Hold the turning and the pulse still; the hand still carries the centre.
seed	number	1	Seeds every ray's length, width, brightness and rhythm.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onBurst	() => void	—	Fires when a press (or keyboard focus) blooms the burst.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) carrying the centre.
className	string	"h-full w-full"	Sizes and shapes the box.