# Glitch Text Effect
> Four glitch styles from one engine: displacement shift, RGB chromatic aberration, VHS scan slice, and character-level chaos. Hover, click, scroll or continuous triggers.
Canonical: https://gsapvault.com/effects/glitch-text
Live demo: https://gsapvault.com/demos/glitch-text/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | text-animation, glitch, chromatic-aberration, hover-effect |
| Uses Lenis | No |
## Overview
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.
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.
## Features
- 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)
## Use Cases
- 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
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## 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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add before closing `` tag:**
```html
```
**3. Add glitch attributes to any text element:**
```html
Link
LOADING
ERROR
```
### Triggers
| Attribute | Behavior |
|-----------|----------|
| `data-glitch-hover` | Triggers on hover/focus (recommended for interactive elements) |
| `data-glitch-click` | Triggers on click |
| `data-glitch-continuous` | Auto-repeats at interval (recommended for always-on effects) |
| `data-glitch-scroll` | Triggers once when scrolled into view (needs ScrollTrigger) |
| `data-glitch-trigger-all` | Put on a **button**: one click fires every glitch on the page |
### Options
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-glitch-style` | `shift`, `rgb`, `slice`, `all` | `shift` | Glitch effect type |
| `data-glitch-intensity` | `subtle`, `medium`, `intense` | `medium` | Effect strength |
| `data-glitch-duration` | Milliseconds | `300` | Effect duration per glitch |
| `data-glitch-interval` | Milliseconds | `3000` | Repeat interval (continuous mode only) |
### Accessibility
- **Respects `prefers-reduced-motion`** — completely disabled for users who prefer reduced motion
- **Frame rate limited** — maximum 20fps for flicker effects (WCAG 2.3.1 compliance: < 3 flashes/sec)
- **Continuous mode uses `aria-live="off"`** — prevents screen readers from announcing changes
- **Focus triggers** — hover effects also work with keyboard focus
- **Semantic HTML** — use `