# ASCII Scramble

> Text that decodes out of random glyphs on mount or hover.

Category: Type. Docs: https://asciicn.sumak.dev/docs/ascii-scramble

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-scramble
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiScramble } from "@/components/ascii/ascii-scramble"

<AsciiScramble text="access granted" />
<AsciiScramble text="hover me" trigger="hover" />
```

## Examples

### Navigation on hover

With `trigger="hover"` every pointer enter decodes the label again. Short durations keep it playful rather than slow.

```tsx
<nav className="flex gap-6">
  {["work", "about", "contact"].map((l) => (
    <a key={l} href={`#${l}`}>
      <AsciiScramble text={l} trigger="hover" duration={400} />
    </a>
  ))}
</nav>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | Final text. Screen readers get it immediately. |
| `trigger` | `"mount" | "hover"` | `"mount"` | When to decode. |
| `duration` | `number` | `900` | Milliseconds until settled. |
| `glyphs` | `string` | `!<>-_\/[]{}…` | Noise characters. |

## Notes

- **Accessibility.** The final text sits in an `sr-only` span from the first render. The noise is `aria-hidden`, so nothing garbled is ever announced.
- **Motion.** Under `prefers-reduced-motion` the text appears settled and never scrambles.
- **Layout.** Glyphs are monospace and spaces stay put, so the width never jumps while decoding.
- **Dependencies.** None. No engine, no canvas: one `requestAnimationFrame` loop while decoding.