KQ-1442 · PRISM/SPILL

Prism Spill

A background in which a glass prism, drawn in light strokes, splits a beam of white light into its colours: the beam is traced through the prism each frame for seven wavelengths (Snell's law in, a Cauchy index whose dispersion is the spread, one internal reflection allowed, Snell's law out) and the escaping colours fan out as spectral bands that soften and diffuse into a wash across the surface. The prism sways slowly about its angle of least deviation and the fan swings with it the way a real one does; the pointer turns the prism on the springs.drift constants, heavy and without overshoot, a press sends a pulse of light down the beam and out through the spectrum, and keyboard focus on a control inside turns the prism toward it and pulses.

KQ-1442 · PRISM/SPILL

Waylight Optics

Light, taken apart

Hand-polished crown glass

spread 0.50 · swaying slowly

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/prism-spill

Props

children: React.ReactNode; default —; The content on top of the light: a hero line, a heading, a call to action.
spread: number; default 0.5; How widely the glass splits the light, 0 (a single white beam) to 1.
speed: number; default 0.5; How fast the prism sways on its own, 0 (still) to 2.
glow: number; default 0.6; How brightly the colours spill across the surface, 0 to 1.
diffusion: number; default 0.6; How quickly the bands soften into a wash as they travel, 0 to 1.
size: number; default 120; The prism's side, px; it shrinks to fit a small box.
anchor: readonly [number, number]; default [0.3, 0.52]; Where the prism stands, as fractions of the box: [x, y].
beamAngle: number; default 34; The direction the white beam travels, in degrees below the horizontal.
sway: number; default 12; How far the prism swings either side of its resting angle, degrees.
lineColor: string; default the ink, softened into the page; The prism's strokes.
interactive: boolean; default true; The pointer and keyboard focus turn the prism, and a press sends a pulse down the beam.
pointerStrength: number; default 0.6; How far the pointer can turn the prism, 0 to 1 (8° to 40°).
intro: boolean; default true; The beam draws itself in and the spectrum unfurls the first time it is seen.
paused: boolean; default false; Hold the prism still; the pointer still turns it.
seed: number; default 1; Seeds where in its sway the prism starts.
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) turning the prism.
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 hero line, a heading, a call to action.
spread	number	0.5	How widely the glass splits the light, 0 (a single white beam) to 1.
speed	number	0.5	How fast the prism sways on its own, 0 (still) to 2.
glow	number	0.6	How brightly the colours spill across the surface, 0 to 1.
diffusion	number	0.6	How quickly the bands soften into a wash as they travel, 0 to 1.
size	number	120	The prism's side, px; it shrinks to fit a small box.
anchor	readonly [number, number]	[0.3, 0.52]	Where the prism stands, as fractions of the box: [x, y].
beamAngle	number	34	The direction the white beam travels, in degrees below the horizontal.
sway	number	12	How far the prism swings either side of its resting angle, degrees.
lineColor	string	the ink, softened into the page	The prism's strokes.
interactive	boolean	true	The pointer and keyboard focus turn the prism, and a press sends a pulse down the beam.
pointerStrength	number	0.6	How far the pointer can turn the prism, 0 to 1 (8° to 40°).
intro	boolean	true	The beam draws itself in and the spectrum unfurls the first time it is seen.
paused	boolean	false	Hold the prism still; the pointer still turns it.
seed	number	1	Seeds where in its sway the prism starts.
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) turning the prism.
className	string	"h-full w-full"	Sizes and shapes the box.