Text Glitch

A high-fidelity, CSS-animation-powered cyberpunk text glitch component featuring red/cyan chromatic aberrations and custom speed toggles.

Preview

Variations

Animation Speeds

Choose between slow frequency, normal mode, or fast clock speeds for the glitching interval.

Trigger Control

Animate the glitch continuously or trigger it dynamically via state actions.

Component Concept

Vibe UI's TextGlitch component provides a pure-CSS chromatic distortion loop, avoiding heavy JS tracking packages. By copying text strings dynamically into pseudo-elements using HTML data-text selectors, it creates cyan/red outline channels that skew and split apart using randomized clipping bounds.

Key Attributes & Options

• text (Required): string — The text label to render and duplicate.
• speed: 'slow' | 'normal' | 'fast' (default 'normal') — Controls keyframe interval loops.
• active: boolean (default true) — Toggles the active CSS animation tracking.