Flickering Text for React

Flickering Text makes a line flicker like a tube that's about to go: some letters hold steady while others dip dim or blink, each on its own irregular rhythm, so the pattern never looks mechanical. It's brightness only: no letter moves or changes colour.

Use it for a short headline with a late-night, run-down feel, on its own or with a glow of your own. For a sign that works, with a halo and a single tired letter, use Neon Text; for text that tears and jumps, Glitch Text. It's CSS only: each flickering letter runs one of three keyframe rhythms of abrupt dips, added to your stylesheet by the install, its length and phase worked out from its place, so it looks random while the server and the browser draw the same. No letter dips more than three times a second, it steadies while the pointer is over it, and with reduced motion it doesn't flicker.

Installation

Usage

import { FlickeringText } from "@/components/ui/flickering-text";

<h2>
  <FlickeringText text="No vacancy tonight" />
</h2>

Demos

Intensity

intensity is how hard it flickers: subtle dims a few letters a little, and rarely; medium, half of them, to a third of their brightness; strong, nearly all of them, nearly dark and more often.

Glow

Flickering Text changes only the letters' opacity, so a glow of your own flickers with them: give the text a text-shadow in currentColor, here on a sky-blue sign.

Accessibility

Screen readers read the text once, from a visually hidden copy; the flickering letters are hidden from them. No letter dips more than three times a second, the whole line steadies while the pointer is over it, and with reduced motion it holds still at full brightness. Words wrap whole, and the line keeps its direction on a right-to-left page.

FAQ

API Reference