KQ-1183 · NEON/STRIKE

Neon Strike

A status line in bent neon tube on a dark sign board: each phrase warms up tube by tube in an uneven, seeded order, every tube trying once or twice, striking with a white flash and flickering on keyframed tweens before it settles to a steady glow, while the board takes on the colour as more of it lights and one faulty tube keeps a stutter. Lit phrases hold, power down on an exit tween and hand over to the next; given progress, the sign becomes a meter that lights the share of each phrase its band has reached, mostly left to right. The sign is a real button — the pointer near a tube makes it flicker, a press knocks the glass and sends a flicker outward, Left and Right walk a probe along the letters and Space or Enter knocks from it — and each phrase is announced once.

KQ-1183 · NEON/STRIKE

Gaugeworks · meter fleet north

warming · 1 of 3 · knock the glass

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/neon-strike

Props

phrases: string[]; default —; The status phrases, lit one after another and cycled in order.
active: boolean; default true; Warming. False powers the sign down, lights doneText steady and stops every timer and the stutter.
doneText: string; default —; What stays lit once inactive. Defaults to the last phrase.
progress: number; default —; Determinate, 0 to 1: phrase i owns the band [i/n, (i+1)/n), and the share of its letters lit is the progress through that band; entering the next band powers the sign down and shows the next phrase.
speed: number; default 1; How fast tubes strike, hold, power down and stutter, 0.5 to 2.
glow: number; default 0.6; How far the glow spills, 0 (bare tubes) to 1: the halo's layers and the wash the lit sign throws on its board.
colour: "rose" | "sky" | "amber" | "lime"; default "rose"; The gas in the tubes, as fixed pigments that read the same in both themes.
faulty: boolean; default true; One seeded tube keeps a stutter while the sign runs.
sound: boolean; default false; Play what the visitor causes: a buzz for a tube the pointer or the probe flickers, a click for a knock. Warming, the fault and power-downs are silent.
disabled: boolean; default false; The sign keeps lighting but cannot be knocked or flickered.
onPhraseChange: (index: number) => void; default —; A phrase began: its index in phrases, or -1 for doneText. Also reported on the first commit.
className: string; default —; Classes for the root; it is w-full by default.

Prop	Type	Default	Description
phrases	string[]	—	The status phrases, lit one after another and cycled in order.
active	boolean	true	Warming. False powers the sign down, lights doneText steady and stops every timer and the stutter.
doneText	string	—	What stays lit once inactive. Defaults to the last phrase.
progress	number	—	Determinate, 0 to 1: phrase i owns the band [i/n, (i+1)/n), and the share of its letters lit is the progress through that band; entering the next band powers the sign down and shows the next phrase.
speed	number	1	How fast tubes strike, hold, power down and stutter, 0.5 to 2.
glow	number	0.6	How far the glow spills, 0 (bare tubes) to 1: the halo's layers and the wash the lit sign throws on its board.
colour	"rose" \| "sky" \| "amber" \| "lime"	"rose"	The gas in the tubes, as fixed pigments that read the same in both themes.
faulty	boolean	true	One seeded tube keeps a stutter while the sign runs.
sound	boolean	false	Play what the visitor causes: a buzz for a tube the pointer or the probe flickers, a click for a knock. Warming, the fault and power-downs are silent.
disabled	boolean	false	The sign keeps lighting but cannot be knocked or flickered.
onPhraseChange	(index: number) => void	—	A phrase began: its index in phrases, or -1 for doneText. Also reported on the first commit.
className	string	—	Classes for the root; it is w-full by default.