Glitchy Text

Overview

Glitchy Text helps important words arrive with intent: characters fracture before resolving.

Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.

The production risk is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately.

Install Command

Usage Code

Component Code

Example Production Use Case

Use this as text-animation implementation guidance. Verify the shipped component API, splitting strategy, accessible text exposure, duplicated span handling, layout reservation, and reduced-motion behavior before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Cyber, AI, and developer-tool headlines where a brief fracture supports the tone.
• One-line claims that can resolve quickly into stable DOM text.
• Glitchy Text makes a short phrase arrive with timing while keeping the final text readable and indexable.

Not For

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Performance Budget

Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks.

Accessibility and Mobile

Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate.

Common Mistakes

• Using Glitchy Text on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.