KQ-1815 · GEL/SCROLLER

Gel Scroller

A stage seen from the house: floor lamps throw soft washes up a cyc through drifting haze, each behind a gel scroller whose strip of taped gels rolls past the lens, so the seam between two gels travels up the beam and, with no cue held, colour chases along the row. Hovering previews the cue under the pointer and a click takes it: every strip rolls the shortest way round on a spring with the springs.snap constants capped at the motor's speed, running through the gels between and braking onto the frame together with one crisp overshoot. The cue rail is a radiogroup — arrows, Home and End take cues and Escape lets the strips roll free.

KQ-1815 · GEL/SCROLLER

Fieldline Hall · Act II

rolling · spectrum · click to take a cue

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/gel-scroller

Props

cues: "spectrum" | "dusk" | "neon" | "theatre" | { name: string; color: string }[]; default "spectrum"; The gels on every strip, in order: a preset or your own list (2 to 12).
haze: number; default 0.55; How much haze hangs in the air: more shows the beams and blurs them into one another, 0 to 1.
roll: number; default 4; The scroller motor's top speed, in gel frames a second.
value / defaultValue: number | null; default null; The cue every strip holds, or null to let them roll; controlled or initial.
onValueChange: (value: number | null) => void; default —; Fires from the click, tap or key that took (or let go of) a cue.
beams: number; default 6; How many lamps stand along the floor, 3 to 9.
spread: number; default 0.5; How wide each wash spreads, 0 to 1.
intensity: number; default 1; How bright the lamps burn, 0 to 1.5.
chase: number; default 0.35; How fast the strips roll on their own while no cue is held, frames a second; 0 holds them.
floor: boolean; default true; A stage floor with pools of light under the lamps.
backdrop: string; default "oklch(0.17 0.02 258)"; The cyclorama behind the beams, any CSS colour; a dark stage by default in both themes.
interactive: boolean; default true; Hovering previews a cue and a click takes it.
paused: boolean; default false; Freezes the haze and the strips.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Lighting cue"; The cue rail's accessible name.
disabled: boolean; default false; The rail cannot be used; the strips still roll.
className: string; default "h-56 w-full"; Sizes the stage.

Prop	Type	Default	Description
cues	"spectrum" \| "dusk" \| "neon" \| "theatre" \| { name: string; color: string }[]	"spectrum"	The gels on every strip, in order: a preset or your own list (2 to 12).
haze	number	0.55	How much haze hangs in the air: more shows the beams and blurs them into one another, 0 to 1.
roll	number	4	The scroller motor's top speed, in gel frames a second.
value / defaultValue	number \| null	null	The cue every strip holds, or null to let them roll; controlled or initial.
onValueChange	(value: number \| null) => void	—	Fires from the click, tap or key that took (or let go of) a cue.
beams	number	6	How many lamps stand along the floor, 3 to 9.
spread	number	0.5	How wide each wash spreads, 0 to 1.
intensity	number	1	How bright the lamps burn, 0 to 1.5.
chase	number	0.35	How fast the strips roll on their own while no cue is held, frames a second; 0 holds them.
floor	boolean	true	A stage floor with pools of light under the lamps.
backdrop	string	"oklch(0.17 0.02 258)"	The cyclorama behind the beams, any CSS colour; a dark stage by default in both themes.
interactive	boolean	true	Hovering previews a cue and a click takes it.
paused	boolean	false	Freezes the haze and the strips.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Lighting cue"	The cue rail's accessible name.
disabled	boolean	false	The rail cannot be used; the strips still roll.
className	string	"h-56 w-full"	Sizes the stage.