Neon Sign
Glass-tube neon lettering that warms up letter by letter — with a broken, buzzing tube.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Every letter stutters on with its own timing, the brick wall picks up the glow, and the tubes you mark as broken keep buzzing forever. Tubes are stroked glyphs with stacked drop-shadows, so they read as bent glass.
Installation
$ npx shadcn@latest add https://guetix.com/r/neon-sign.json
Uses the shadcn CLI. It creates components/guetix/neon-sign.tsx and installs nothing else.
Usage
example.tsx
"use client";
import NeonSign from "@/components/guetix/neon-sign";
export default function NeonSignDemo({ variant = "animated" }: { variant?: string }) {
return <NeonSign animated={variant !== "regular"} text="Open late" subtext="code & coffee" color="#ff2d95" subColor="#38e1ff" broken={[6]} />;
}
Hero / landing title404 / maintenance pagesEvent & nightlife sitesSection dividers
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Unlit glass and lit gas are two stacked glyph layers, so an "off" flicker shows the dead tube instead of empty space.
- 02Per-letter delays come from `(i × 7) mod 5`: they look random but render the same on server and client.
- 03The brick wall is built from four CSS gradients, with no image assets.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Main line. |
| subtext | string | — | Second, smaller line. |
| color | string | "#ff2d95" | Main tube color. |
| subColor | string | "#38e1ff" | Second line color. |
| broken | number[] | [] | Letter indexes that keep flickering. |
| wall | boolean | true | Brick wall background. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Exposed as one image with the full text as its label.
- Reduced motion: lit immediately, no flicker.