# Motion Text Glitch

Glitch text effect on hover for a 404 or error heading.

- id: `motion-text-glitch`
- Page: https://agentic-ui-kit.com/components/motion-text-glitch
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-glitch?piece=motion-text-glitch

## Install

```bash
agentic-ui add motion-text-glitch
npx shadcn@4.17.0 add @agentic-ui/motion-text-glitch
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rgb-split-glitch, clip-path-bands, hover-trigger, loop-trigger, intensity-levels, keyboard-focus-trigger, controlled-active, theme-token-colours, text-untouched, pause-offscreen, reduced-motion-fallback
- **Intents:** communicate, track-status
- **Suits domains:** marketing, devtools, saas, media, social, ai-workspace
- **Interaction:** hover, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** glitch text effect on hover for a 404 or error heading, RGB split cyberpunk style heading that glitches every few seconds, link that flickers with a chromatic aberration burst on hover, retro terminal style glitching title for a developer tool landing page
- **Avoid when:** Anything that must be read immediately or that carries an error the user has to act on, Calm or protected contexts (billing, healthcare, legal): use motion="none" or another piece, A scrambling decode effect is wanted (use motion-text-scramble, which has its own hover glitch variant), More than one looping glitch in the same viewport
- **Preserve when adapting:** text-in-dom-once, aria-hidden-copies, text-never-moves, burst-length-limit
- **Replace when adapting:** text, trigger, intensity, interval, copy-colours, element
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion