Glitch Text Effect
Digital glitch effect with displacement shift, RGB chromatic aberration, and scan line styles. Perfect for cyberpunk aesthetics and attention-grabbing headers.
About This Effect
A digital glitch effect that distorts text with displacement shifts, RGB chromatic aberration, and CRT-style scan lines. Perfect for cyberpunk themes, gaming interfaces, and attention-grabbing headlines that need to break through visual noise. The effect supports scroll-triggered activation and hover interactions with multiple intensity levels.
What's Included
- RGB chromatic aberration with independent channel offsets
- Horizontal displacement shift with randomized timing
- CRT scan line overlay for retro monitor aesthetics
- ScrollTrigger activation with configurable viewport thresholds
- Hover-triggered glitch bursts for interactive elements
- Multiple intensity presets: subtle, medium, and intense
- CSS custom properties for easy color and timing customization
- Accessible — automatically reduces to static state for reduced motion
Perfect For
- Cyberpunk and sci-fi themed website headers
- Gaming landing pages and esports branding
- Error page designs and 404 pages with personality
- Music and event promotion sites
- Tech startup hero sections with edgy aesthetics
How It Works
The effect layers multiple copies of the text element with CSS pseudo-elements, each offset by a few pixels in different directions. GSAP timelines animate the offsets with randomized keyframes, creating the characteristic glitch displacement. RGB split is achieved by applying different blend modes to each layer. Scan lines use a repeating-linear-gradient overlay animated with translateY.