# Text scramble

> Characters cycle through glyphs and settle into the final text.

Component · Free · https://lodeui.com/components/text-scramble

## When to use

- Short technical labels and headings that decode on load or hover.

## When not to use

- Sentences and body text.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/text-scramble.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TextScramble } from "@/components/ui/text-scramble";

export function Label() {
  return <TextScramble text="DEPLOY_READY" className="font-mono" />;
}
```

## API reference

### TextScramble

Characters cycle through glyphs and settle left to right.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | – | Final text. |
| duration | `number` | `900` | ms for the decode. |
| trigger | `"mount" \| "hover" \| "both"` | `"both"` | When it plays. |

## Accessibility

- aria-label holds the real text; glyphs are aria-hidden.
- Static under reduced motion.

## Motion

- Decodes over the duration.

## Responsive behavior

- Use a monospace font so the width doesn't jump.

## Performance

- requestAnimationFrame only while playing.

## Notes for AI

- Keep text under ~24 characters.

## Related

- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.