Text
Scramble text
Text that decodes itself from random glyphs, settling letter by letter.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ScrambleText } from '@vizzele/react';
<ScrambleText as="h2" duration={1100} trigger="view">
Liquid light, decoded.
</ScrambleText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Final text. |
duration | number | 900 | Total time (ms). |
chars | string | — | Glyphs used while decoding. |
trigger | 'view' | 'hover' | 'mount' | 'manual' | 'view' | When it plays. Hover also plays on focus. |
ref.play() | ScrambleTextHandle | — | Replay programmatically. |
Accessibility
- The element carries the final text as aria-label, so screen readers never hear the noise.
- Reduced motion: the text appears directly.