Text Scramble · paneui

STATUS:

Installation

pnpm dlx shadcn@latest add @paneui/text-scramble

Usage

import { TextScramble } from "@/components/ui/text-scramble"

<TextScramble value={status} />

Examples

Scramble On Mount

Custom Glyphs

Use a narrower set, such as hex digits, to match the kind of value shown.

Duration

On Complete

Use to start the next step once the text settles.

Accessibility

The scrambling characters are aria-hidden; screen readers read the final value from a visually hidden copy. The final value also sizes the box, so the width never jumps.

Motion

With reduced motion the new value appears immediately and nothing scrambles. Related: Text Shimmer, Text Cascade, Text Reveal.

API Reference

TextScramble

Scrambles from the previous value to the new one, resolving left to right. Also accepts every prop of span.

value*: string; The text to show. Changing it scrambles from the old value to the new one.
duration= length × 34, clamped 360–900: number; Total animation time in ms.
glyphs= "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&*+=?/": string; Characters sampled while a position is unresolved. An empty string disables scrambling.
scrambleOnMount= false: boolean; Also scramble in on first render.
onComplete: () => void; Called once the new value has fully resolved.

Prop	Type	Default	Description
value*	string	—	The text to show. Changing it scrambles from the old value to the new one.
duration	number	length × 34, clamped 360–900	Total animation time in ms.
glyphs	string	"ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&*+=?/"	Characters sampled while a position is unresolved. An empty string disables scrambling.
scrambleOnMount	boolean	false	Also scramble in on first render.
onComplete	() => void	—	Called once the new value has fully resolved.

data-slot: "text-scramble" on the root, "text-scramble-display" on the animated layer.

Data attribute	Description
data-slot	"text-scramble" on the root, "text-scramble-display" on the animated layer.