KQ-1430 · TUBE/GLOW

Tube Glow

A slowly shifting colour field seen through a curved picture tube, as a background with the content in front and perfectly crisp: domain-warped noise through a four-stop ramp, bowed by barrel distortion into a rounded picture that falls into a dark phosphor rim, laid with fine scanlines that close where the light is bright, an aperture grille, a slowly breathing bloom, a rolling sync bar and a soft reflection on the glass, all in two WebGL2 passes. The curve leans toward the pointer, placed on springs.glide and eased in on springs.drift, while the reflection slides the other way, and a press degausses the tube: the colour swirls round the press and the guns part, ringing down on the recoil spring. It never takes focus; keyboard focus on a control inside leans the curve toward it and degausses softly.

KQ-1430 · TUBE/GLOW

Fieldline Television

Tonight, in colour

Three films and the late news from nine

on air · aurora field, curve 0.50

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/tube-glow

Props

children: React.ReactNode; default —; The content in front of the tube: a hero line, a heading, a call to action.
curve: number; default 0.5; How far the glass bulges, 0 (flat) to 1 (a deep old tube).
scanlines: number; default 0.5; How dark the gaps between scanlines are, 0 to 1.
colors: "aurora" | "ember" | "lagoon" | "mono" | readonly string[]; default "aurora"; A named palette, or your own four CSS colours from darkest to brightest.
mask: number; default 0.35; How strongly the phosphor stripes show, 0 to 1.
bloom: number; default 0.5; How much bright colour blooms and breathes, 0 to 1.
roll: number; default 0.4; How bright the rolling sync bar is, 0 (none) to 1.
speed: number; default 1; How fast the colour field shifts, 0 (held) to 3.
pitch: number; default 3; Scanline pitch, in px (2 to 8).
glare: number; default 0.5; How bright the reflection on the glass is, 0 to 1.
interactive: boolean; default true; The pointer and keyboard focus lean the tube's curve toward them.
pointerStrength: number; default 0.6; How far the curve leans toward the pointer, 0 to 1.
pulse: boolean; default true; A press on the tube (not on a control) degausses it: the colour swirls and rings down.
intro: boolean; default true; The tube warms up the first time it comes into view.
paused: boolean; default false; Hold the field, the bar and the breath still; the pointer can still lean the curve.
seed: number; default 1; Seeds the colour field, so two tubes never show the same picture.
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) leaning the curve.
className: string; default —; Sizes and shapes the box; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
children	React.ReactNode	—	The content in front of the tube: a hero line, a heading, a call to action.
curve	number	0.5	How far the glass bulges, 0 (flat) to 1 (a deep old tube).
scanlines	number	0.5	How dark the gaps between scanlines are, 0 to 1.
colors	"aurora" \| "ember" \| "lagoon" \| "mono" \| readonly string[]	"aurora"	A named palette, or your own four CSS colours from darkest to brightest.
mask	number	0.35	How strongly the phosphor stripes show, 0 to 1.
bloom	number	0.5	How much bright colour blooms and breathes, 0 to 1.
roll	number	0.4	How bright the rolling sync bar is, 0 (none) to 1.
speed	number	1	How fast the colour field shifts, 0 (held) to 3.
pitch	number	3	Scanline pitch, in px (2 to 8).
glare	number	0.5	How bright the reflection on the glass is, 0 to 1.
interactive	boolean	true	The pointer and keyboard focus lean the tube's curve toward them.
pointerStrength	number	0.6	How far the curve leans toward the pointer, 0 to 1.
pulse	boolean	true	A press on the tube (not on a control) degausses it: the colour swirls and rings down.
intro	boolean	true	The tube warms up the first time it comes into view.
paused	boolean	false	Hold the field, the bar and the breath still; the pointer can still lean the curve.
seed	number	1	Seeds the colour field, so two tubes never show the same picture.
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) leaning the curve.
className	string	—	Sizes and shapes the box; it fills its parent by default (h-full w-full).