Glitch Text for React

Glitch Text tears a line like a bad signal: in short bursts, bands of the text jump sideways, fringed in red and cyan, then snap back into place. Between the bursts it's plain and readable. It can glitch all the time, or only while the pointer is over it.

Use it for a headline or a label with a digital, broken edge: an error page, a game, a launch teaser. For colours that split without tearing, use Chromatic Text; for text that resolves out of noise, Decrypted Text. It's CSS only: two copies of the text, each clipped to a band, are the torn slices, and the real text is masked where they tore; one keyframe animation, added to your stylesheet by the install, steps the bands through registered CSS properties, at most six changes a second. Nothing paints a background, so it works over any surface. With reduced motion the text is plain.

Installation

Usage

import { GlitchText } from "@/components/ui/glitch-text";

<h1>
  <GlitchText text="Signal lost" />
</h1>

Demos

Hover

trigger="hover" glitches only while the pointer is over the text, starting with a burst the moment it arrives. On a touch screen, where there's no hover, the text stays plain.

Intensity

intensity is how far the torn slices jump: subtle, medium or strong. duration is one round of bursts, 3000 ms by default; a shorter round glitches more often, but never under 2000 ms.

Accessibility

The text stays real text, read once by screen readers and selectable; the torn slices are copies hidden from them and from the pointer. The glitch never changes more than six times a second, three flashes at most, and with reduced motion it doesn't play. In forced-colors mode the slices are dropped and the text is plain.

FAQ

API Reference