Scramble Text
A free decrypt and scramble text effect that resolves into your copy once on scroll.
Beacon Risk
Card fraud caught before it settles
Beacon scores every authorisation against ninety days of the cardholder’s own behaviour and answers in under 80ms, so a genuine customer never meets a challenge screen.
Customise
Code
<TextScramble>
Card fraud caught before it settles
</TextScramble>Scramble Text is a free text effect component for Next.js and React that decrypts a string into your copy. Letters and digits cycle through random characters of their own kind (capitals, lowercase letters, digits) and resolve to the final text left to right, triggered once when the wrapper scrolls into view, while spaces and punctuation stay in place so every word keeps its shape. It runs on Motion and is styled with Tailwind.
The final string is rendered in the server HTML, once, so crawlers, no-JS visitors and reduced-motion users always get the real copy. At rest it is ordinary text: it wraps inside a sentence, takes a link's underline and a gradient fill, and copies as written. While it scrambles, each word keeps the space of its final text, so layout never shifts, and screen readers read the final string once while the scrambling characters are hidden from them. The copy is always written as plain text: an ampersand, an angle bracket or an emoji shows exactly as written.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-scrambleUsage
import { TextScramble } from "@/components/text-scramble";
export function Example() {
return (
<h1 className="text-5xl font-semibold">
<TextScramble duration={1.2}>Decrypt your headline</TextScramble>
</h1>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | Final text; rendered in the SSR HTML. |
| as | ElementType | "span" | Element rendered as the wrapper. |
| duration | number | 1.2 | Scramble duration in seconds (--dur-4). |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Scramble Text deliberately ships without component-level CSS variables. The decrypt runs over the library's --dur-4 beat (1.2 seconds) by default, so it stays in step with the rest of your motion system. Pace it with the duration prop:
<TextScramble duration={2}>
A slower, more deliberate decrypt
</TextScramble>Frequently asked questions
- Is Scramble Text free for commercial use?
- Yes. Scramble Text is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Scramble Text accessible to screen readers?
- Yes. At rest the text is plain, read once. While it scrambles, screen readers read the final string once and the scrambling characters are hidden from them, so they never hear the glyphs. With reduced motion enabled the final text renders immediately with no scramble, and the text stays selectable once the animation completes.
- How do I change the speed of the scramble?
- Use the duration prop to set the scramble length in seconds; the default is 1.2, matching the library's longest motion token. Longer durations read as a slower, more cinematic decrypt, shorter ones as a quick glitch.