FX · Text

Text that breaks into offset colour slices in short, occasional bursts.

SYSTEM_OVERRIDE

bash
npx shadcn@latest add https://www.rad-ui.com/r/glitch-text.json
React
import GlitchText from "@/components/fx/glitch-text" <GlitchText as="h2" text="SYSTEM_OVERRIDE" />
  • Bursts are brief and spaced seconds apart, staying well under 3 flashes per second (WCAG 2.3.1).
  • The colour layers are real aria-hidden elements, not ::before content that some screen readers announce; the text is read once.
  • Pauses offscreen; `paused` stops it.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) removes the glitch entirely.
PropTypeDefaultDescription
text
string
—

The text. Read once by screen readers.

as
'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4'
'span'

Element to render.

interval
number
3

Seconds between bursts.

colors
[string, string]
cyan, pink

Colours of the split channels.

paused
boolean
false

Stop glitching.