Neon Tube Sign
A neon sign that lights the wall behind it — glass tubes with a hot core, one tired letter that stutters, an ignition flicker, and a real on/off switch.
DOM + CSS0 deps1 file · 10 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
/**
* A neon sign on a wall: outlined glass tubes with a hot core and a bloom,
* light spilling onto the wall behind, one failing tube that stutters now and
* then — and it can be switched off, when the glass stays faintly visible.
*
* NEON LIGHTS THE WALL, NOT JUST ITSELF. Glowing text on black is the cheap
* version. What makes a sign read as a physical object is the spill: a broad
* pool of the tube's colour screened over the wall texture, dipping whenever
* the tube does. Without it the letters float.
*
* THE TUBE IS THREE STROKES AND ONE FILTER. A coloured stroke, a thin
* near-white core on top of it (lit neon is hottest in the middle), and one
* static filter merging three blur radii for the bloom. Flicker animates only
* OPACITY — of the failing letter and of the spill — so the filtered graphic
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Neon is real signage for bars, tattoo studios, barbers and late-night diners, which is why the usual web imitation — glowing text on black, blinking on a metronome — looks like a template. Three things make this one read as an object. It lights the wall: a broad pool of the tube's colour is screened over the wall texture and dips whenever the tube does, and without it the letters simply float. The tubes are built like tubes: an always-visible glass outline, the coloured gas, and a thin near-white core on top, since lit neon is hottest in the middle, all bloomed by one static filter with three blur radii. And it fails like a real sign: rather than the whole thing strobing, one letter is a tired tube that dips two or three times in a ten-second loop, each dip shorter than a tenth of a second, far inside WCAG's flash limit. Only opacity animates, so the filtered graphic is never redrawn per frame. Switching it on replays an ignition stutter; switching it off leaves the dark glass on the wall. The lit prop is real, so a sign reading OPEN can follow the shop's actual hours.
Curator’s note
Neon on the web is almost always text-shadow on black, blinking in time. Real signs light the wall, and only ever one tube is on its way out.
