Neon Flicker Text

Neon-tube text with random micro-flicker and layered glow, in any color you choose.

Layered text-shadow builds up a white-hot core and a colored glow into neon-tube text, and each letter occasionally dies out and relights along a pseudo-random track seeded by its index, like a sign with a loose connection — well suited to headings and atmospheric scenes on dark backgrounds.

Loading preview…

npx shadcn@latest add https://webberui.com/r/neon-flicker-text.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Neon colorcolor

Outer glow colorglowColor

Flicker strengthflickerIntensity

0.5

Flicker speed multiplierspeed

<NeonFlickerText />

Installation

npx shadcn@latest add https://webberui.com/r/neon-flicker-text.json

Or, once registries are configured in components.json, install it as @webberui/neon-flicker-text.

Usage

import { NeonFlickerText } from "@/components/ui/neon-flicker-text";

<div className="bg-neutral-950 p-12 text-center">
  <NeonFlickerText
    text="Midnight Diner"
    color="#f472b6"
    flickerIntensity={0.5}
    className="text-6xl font-bold tracking-widest"
  />
</div>

Props

Prop	Type	Default	Description
`text`	`string`	—	The neon text content to display
`color`	`string`	`"#22d3ee"`	The main neon color (any valid CSS color), used for both the tube and the inner glow
`glowColor`	`string`	same as `color`	Color of the outer glow; falls back to the main color when unspecified
`flickerIntensity`	`number`	`0.5`	Flicker strength (0 to 1): higher dies out more often and more deeply
`speed`	`number`	`1`	Speed multiplier for the flicker rhythm
`className`	`string`	—	forwarded to the outermost container

Accessibility

When the user has "reduce motion" enabled at the system level, the text stays lit without flickering while keeping the full neon glow
The complete text is exposed sr-only for the screen reader to announce, and the split graphemes are hidden from assistive technology (aria-hidden)
The flicker is a brief, low-frequency opacity change on individual letters, and a ghost of the glyph remains even while dark, avoiding large-area high-frequency flashing
The flicker track is generated deterministically from an index seed, so SSR and CSR output match and no hydration error occurs