Text scramble
Text that decrypts from random glyphs, left to right, into the real words. The final text is laid out invisibly underneath, so the width never jumps; screen readers get the final text only. Frames update the DOM directly (no React render per frame). Reduced motion shows the text at once.
Crafted with careCrafted with care
import { TextScramble } from "pixelbits/text-scramble";
export default function Demo() {
return (
<p className="text-4xl font-light tracking-tight">
<TextScramble text="Crafted with care" trigger="hover" />
</p>
);
}Installation
import { TextScramble } from "pixelbits/text-scramble";npx shadcn add https://pixelbits.ali-moradi-develop.com/r/text-scramble.jsonAPI
<TextScramble>
Text that decrypts from random glyphs, left to right, into the real words. The final text is laid out invisibly underneath, so the width never jumps; screen readers get the final text only. Frames update the DOM directly (no React render per frame). Reduced motion shows the text at once.
<h1><TextScramble text="Crafted with care" /></h1>| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | — | The final text. Changing it scrambles over to the new text. |
| trigger | "view" | "hover" | "change" | "view" | When it runs: once in view, on hover and focus, or only when |
| duration | number | 720 | Total duration in ms. |
| glyphs | string | "#%&*+=/<>[]{}01" | Characters used while scrambling. |
Also accepts every prop of Omit<HTMLAttributes<HTMLSpanElement>, "children">.