KQ-1542 · BULB/MARQUEE

Bulb Marquee

A headline spelled in an alphabet of theatre bulbs: every glyph is a set of centre-line strokes with bulbs dropped along them at an even pitch, each in a dark socket on a deep enamel face, with a frame of bulbs round the edge. On reveal a comet chases one lap of the frame, then the letters fill bulb by bulb in pen order, each filament following the step response of springs.recoil — a cold filament's inrush flashes past its rest brightness and settles — while its colour climbs from dull red through orange to the warm white set by warmth; at rest a slow chase keeps the frame alive. Hover sparkles the letter under the pointer, a press throws the switch and relights the sign, and a transparent button gives the keyboard Enter to relight and Left and Right to sparkle letter by letter.

KQ-1542 · BULB/MARQUEE

Coldbrook Playhouse · Friday 7:30

Opening night

dark · press the sign to light it

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/bulb-marquee

Props

children / text: string; default —; The headline, as children or a prop; set in capitals.
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"; default "p"; The element that carries the headline.
bulbSize: number; default 1; Bulb diameter, 0.6 to 1.4 times the house bulb; the spacing follows, so small bulbs make fine letters and big ones chunky letters.
chase: number; default 4; The resting frame's chase, steps per second, 0 to 10; 0 holds the frame steady.
warmth: number; default 0.6; Filament colour temperature, 0 (clear white) to 1 (deep amber).
glow: number; default 0.6; How far each bulb's halo spills, 0 to 1.
pattern: "chase" | "alternate"; default "chase"; The frame at rest: a three-step chase, or odd and even bulbs taking turns.
frame: boolean; default true; Draw the border of bulbs round the sign face.
face: string; default —; The sign face, any CSS colour; a fixed enamel pigment by default so the sign reads the same in both themes.
trigger: "mount" | "inView" | "hover" | "manual"; default "inView"; What lights the sign.
once: boolean; default true; Light once, or go dark again when it leaves view or the hover ends.
play: boolean; default false; With trigger "manual": true lights the sign, false switches it off.
delay: number; default 0; Wait before the frame's first lap, ms.
stagger: number; default 70; Gap between letters starting to fill, ms.
duration: number; default 420; How long one letter takes to fill bulb by bulb, ms.
interactive: boolean; default true; Hover sparkles a letter, a press relights the sign, and the keys do both.
onStateChange: (state: "dark" | "warming" | "lit") => void; default —; The sign went dark, began warming up, or finished lighting.
onComplete: () => void; default —; The reveal has finished: every bulb is lit and settled.
className: string; default —; Size (the bulb grid is in em) and layout.

Prop	Type	Default	Description
children / text	string	—	The headline, as children or a prop; set in capitals.
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "div"	"p"	The element that carries the headline.
bulbSize	number	1	Bulb diameter, 0.6 to 1.4 times the house bulb; the spacing follows, so small bulbs make fine letters and big ones chunky letters.
chase	number	4	The resting frame's chase, steps per second, 0 to 10; 0 holds the frame steady.
warmth	number	0.6	Filament colour temperature, 0 (clear white) to 1 (deep amber).
glow	number	0.6	How far each bulb's halo spills, 0 to 1.
pattern	"chase" \| "alternate"	"chase"	The frame at rest: a three-step chase, or odd and even bulbs taking turns.
frame	boolean	true	Draw the border of bulbs round the sign face.
face	string	—	The sign face, any CSS colour; a fixed enamel pigment by default so the sign reads the same in both themes.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	What lights the sign.
once	boolean	true	Light once, or go dark again when it leaves view or the hover ends.
play	boolean	false	With trigger "manual": true lights the sign, false switches it off.
delay	number	0	Wait before the frame's first lap, ms.
stagger	number	70	Gap between letters starting to fill, ms.
duration	number	420	How long one letter takes to fill bulb by bulb, ms.
interactive	boolean	true	Hover sparkles a letter, a press relights the sign, and the keys do both.
onStateChange	(state: "dark" \| "warming" \| "lit") => void	—	The sign went dark, began warming up, or finished lighting.
onComplete	() => void	—	The reveal has finished: every bulb is lit and settled.
className	string	—	Size (the bulb grid is in em) and layout.