## Decode Text (S—009)

Text that resolves out of glyph noise, left to right, without any layout shift.

- URL: https://sundaeui.dev/components/decode-text
- Category: Animations & interactions · Art direction: Futuristic
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/decode-text.json`
- Tags: typography, animated, text, react, scramble

Characters cycle through random glyphs and lock into their final letters in sequence, like a terminal decrypting a transmission. Unresolved glyphs sit at reduced opacity, so the reveal reads as a front moving across the line.
Each character is held in its own fixed-width box, so the line never reflows or jitters while it animates. Screen readers get the real text immediately through aria-label.
Trigger it on mount, when it scrolls into view, or on hover and focus. Use it for headlines, loading states and status lines in futuristic or developer-facing interfaces.

### Usage

```tsx
import { DecodeText } from '@/components/sundae/decode-text'

<DecodeText as="h1" text="HANDSHAKE COMPLETE" trigger="view" duration={1200} />
```

### Props

- `text` (`string`, required): Final text.
- `trigger` (`'mount' | 'view' | 'hover'`, default `'view'`): When the decode runs.
- `duration` (`number`, default `1100`): Total duration in ms.
- `glyphs` (`string`): Characters used for noise.
- `as` (`'span' | 'h1' | 'h2' | 'h3' | 'p'`, default `'span'`): Element to render.

### Accessibility

- The element carries aria-label with the real text, and the animated glyphs are aria-hidden.
- With prefers-reduced-motion, the final text appears immediately.
- The hover trigger also runs on keyboard focus.