Back to Gallery
Glitch Text Effect
£5 Standard License Unlimited projects
Four glitch styles from one engine: displacement shift, RGB chromatic aberration, VHS scan slice, and character-level chaos. Hover, click, scroll or continuous triggers.
About This Effect
A digital corruption engine for text with four distinct styles: displacement shift, true RGB chromatic aberration, VHS scan slice, and character-level chaos that swaps glyphs mid-burst. Every burst is randomised, so no two runs look the same, and each one reverts to clean, selectable text.
Read the full effect overview
The demo runs three styles continuously and puts the fourth on hover, so you can compare them side by side and fire the lot at once. Triggers cover hover, focus, click, scroll-into-view and a repeating interval.
What's Included
- Four glitch styles from one attribute: shift, rgb, slice, and all
- True RGB chromatic aberration with independent channel offsets
- VHS scan slice that clips the text into displaced horizontal bands
- Character-level chaos that swaps glyphs and shakes them individually
- Five triggers: hover, focus, click, scroll-into-view, and continuous interval
- Three intensity presets plus per-element duration and interval control
- data-glitch-trigger-all fires every glitch on the page from one button
- Rate limited to 20fps and fully disabled under reduced motion (WCAG 2.3.1)
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
Each style drives a different mechanism. RGB split renders two extra copies of the text with CSS pseudo-elements and blends them with mix-blend-mode: screen, while GSAP writes the --rgb-x and --rgb-y custom properties in randomised steps. Shift builds a GSAP timeline of set() calls on x, y, skewX and scaleX with occasional snap-backs to zero.
Slice runs a requestAnimationFrame loop that clip-paths a random horizontal band and displaces it. Chaos wraps every character in its own span, swaps a share of them for symbols from the glyph pool, and shakes each one independently. All four are capped at one frame every 50ms so the flicker stays under the WCAG three-flashes-per-second limit.
Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
