Skip to content

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.

Proneoneditorial
Category
Text Effects
Added
2026-09-24
Deps
none
Updated
2026-09-24

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview
Click the sign to switch it off

Props

Lit
Tired tube
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

GPU fractal noise drifting through a gradient light field, with no JS loop.

backgroundnoisesvg-filter
Featured
NewPro

A real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.

heroduotonesvg-filter
Featured
NewPro

Type debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.

svg-filterlightingletterpress