---
title: "Text Scramble"
description: "Text that scrambles through random characters before settling on the final string."
canonical_url: "https://nuxt-motion-block.pages.dev/components/text/text-scramble"
---
# Text Scramble
> Text that scrambles through random characters before settling on the final string.
The TextScramble component fills a string with random characters from `characterSet`, then reveals the real text left to right as the animation progresses. It reads as a decrypting token or a system message and is a good match for status text, codes and short headlines.
## Usage
Pass the text as `text`. The scramble runs when `trigger` is `true` and re-runs every time `trigger` toggles.
```vue
Security Verification
Verification Status
Secure
Encryption
Protocol
Token
Regenerate Token
```
## Examples
### Scramble a heading
```vue
```
### Custom character set
Restrict `characterSet` to control the glyphs that appear while scrambling —
binary digits give a terminal read, for instance — and tune `speed` and
`duration` to set the pace. Toggling `trigger` back to `true` replays the
scramble, and `scrambleComplete` fires when it settles.
```vue
{{ done ? 'Decoded' : 'Decoding' }}
```
## Customize
## Props
The final text to reveal.
Total length of the scramble in seconds.
Seconds between frames. The number of frames is `duration / speed`.
The pool of characters drawn from while scrambling.
The HTML tag to render.
When it changes, the scramble re-runs. It only scrambles when the new value is `true`, so replay by toggling it `false` then `true`.
Called when the scramble finishes. Equivalent to listening for the `scrambleComplete` event.
CSS classes applied to the root element.
CSS classes applied to the root element.
Per-slot classes merged over the theme defaults. See [UI](#ui).
## Events
Emitted once when the scramble reaches the final text.
## UI
This component's theme exposes the slots below. Override any of them per instance with the [`ui` prop](https://nuxt-motion-block.pages.dev/getting-started/theming), or app-wide under `ui.textScramble` in `app.config.ts`.
Per-slot classes merged over the theme defaults.
The tag rendered by `as`, holding the scrambling text.
## Accessibility
The component renders a single text node and updates it on an interval; there is no live region, so assistive technology will not announce every frame. The final state is the readable `text`, and spaces are preserved throughout. Because the intermediate characters are random glyphs in the same DOM node, avoid scrambling content that a screen reader user needs to read while it is animating.
## Performance
- The scramble advances on a `setInterval` of `speed` seconds and rewrites one text node, which is cheap, but short `speed` values create many updates per second.
- The interval is cleared when the scramble ends and on unmount.
- The animation only runs on the client; during SSR the initial `text` is rendered as-is.
## Sitemap
See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.