KQ-1462 · STAGE/BEAMS

Stage Beams

A background of a lighting rig along the bottom edge throwing narrow volumetric beams up through drifting haze in mirrored pairs, a lighting desk moving them through looks on springs with the springs.drift constants — a fan, crossed pairs, straight up, a lean — with motes glinting where the beams pass and light pooling on the floor. The beam nearest the pointer leaves the show and follows the hand on springs.glide like a follow spot, and a press brings every beam onto that point on springs.snap with one crisp overshoot while the rig flares. Keyboard focus on a control inside puts the nearest pair on it, crossing there.

KQ-1462 · STAGE/BEAMS

Basinworks Live · night two

The hall goes dark at nine

Doors 8:30

6 beams · haze 0.55

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/stage-beams

Props

children: React.ReactNode; default —; The content in front of the rig: a hero line, a heading, a call to action.
beams: number; default 6; How many beams the rig throws, 2 to 12; they work in mirrored pairs, so odd counts round up.
haze: number; default 0.55; How thick the haze is, 0 (clean air: faint, crisp blades) to 1 (thick, textured shafts).
colors: "house" | "ice" | "ember" | "mono" | readonly string[]; default "house"; A named palette, or up to three CSS colours given to the pairs in turn.
speed: number; default 1; How fast the beams sway and the haze drifts, 0 (still) to 2.
spread: number; default 5; Each beam's width, degrees, 2 to 12.
intensity: number; default 1; How bright the beams burn, 0 to 1.5.
motes: number; default 0.5; How many motes glint in the beams, 0 to 1.
floor: number; default 0.6; How much light pools on the floor at each fixture, 0 to 1.
cue: number; default 4800; Milliseconds between the lighting desk's cues, 2000 to 12000.
interactive: boolean; default true; The pointer takes the nearest beam, keyboard focus the nearest pair, and a press brings every beam onto it.
pointerStrength: number; default 0.8; How far a beam leaves its cue for the hand and how bright the hit is, 0 to 1.
paused: boolean; default false; Hold the show: no cues, no sway, no drifting haze. The hand still directs the beams.
seed: number; default 1; Seeds the order of the looks, the haze and the motes.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onCue: (index: number) => void; default —; Fires when the desk runs a new cue, with its number in the show (1 up).
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) directing a beam.
onHit: (hitting: boolean) => void; default —; Fires when a press brings every beam onto it (true) and when the press ends and the desk takes them back (false).
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 rig: a hero line, a heading, a call to action.
beams	number	6	How many beams the rig throws, 2 to 12; they work in mirrored pairs, so odd counts round up.
haze	number	0.55	How thick the haze is, 0 (clean air: faint, crisp blades) to 1 (thick, textured shafts).
colors	"house" \| "ice" \| "ember" \| "mono" \| readonly string[]	"house"	A named palette, or up to three CSS colours given to the pairs in turn.
speed	number	1	How fast the beams sway and the haze drifts, 0 (still) to 2.
spread	number	5	Each beam's width, degrees, 2 to 12.
intensity	number	1	How bright the beams burn, 0 to 1.5.
motes	number	0.5	How many motes glint in the beams, 0 to 1.
floor	number	0.6	How much light pools on the floor at each fixture, 0 to 1.
cue	number	4800	Milliseconds between the lighting desk's cues, 2000 to 12000.
interactive	boolean	true	The pointer takes the nearest beam, keyboard focus the nearest pair, and a press brings every beam onto it.
pointerStrength	number	0.8	How far a beam leaves its cue for the hand and how bright the hit is, 0 to 1.
paused	boolean	false	Hold the show: no cues, no sway, no drifting haze. The hand still directs the beams.
seed	number	1	Seeds the order of the looks, the haze and the motes.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onCue	(index: number) => void	—	Fires when the desk runs a new cue, with its number in the show (1 up).
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) directing a beam.
onHit	(hitting: boolean) => void	—	Fires when a press brings every beam onto it (true) and when the press ends and the desk takes them back (false).
className	string	"h-full w-full"	Sizes and shapes the box.