# Motion Text Scramble

Security page heading that decodes when it scrolls into view.

- id: `motion-text-scramble`
- Page: https://agentic-ui-kit.com/components/motion-text-scramble
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-scramble

## Install

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

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** glyph-scramble, decode-variant, hover-glitch-variant, number-scramble-variant, in-view-trigger, hover-and-focus-trigger, replay-trigger, rescramble-on-value-change, locked-width, pause-offscreen, accessible-target-text, reduced-motion-fallback
- **Intents:** communicate, track-status
- **Suits domains:** saas, devtools, auth, settings, ai-workspace
- **Interaction:** scroll-trigger, hover, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Security page heading that decodes when it scrolls into view, Key rotation counter whose digits scramble to the new value, Navigation labels that glitch briefly on hover or keyboard focus, Access code or API key reveal on a developer settings page
- **Avoid when:** Body copy, form labels, errors or anything the user must read immediately, More than one scrambling heading in the same viewport, Protected enterprise screens, where the personality does not allow the text group, Values that change several times per second (use motion-number-morph or motion-counter-ticker)
- **Preserve when adapting:** target-text-in-dom, aria-hidden-glyph-layer, no-live-region, locked-width, target-text-without-motion
- **Replace when adapting:** text, glyphs, timing, glyph-colour, variant, trigger
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select, table
- **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