Scramble Text
A free decrypt and scramble text effect built on GSAP ScrambleText.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Scramble Text is a free text effect component for Next.js and React that decrypts a string into your copy with GSAP ScrambleText. Characters cycle through random glyphs and resolve to the final text left to right, triggered once when the wrapper scrolls into view, and styled with Tailwind.
The final string is rendered in the server HTML, so crawlers, no-JS visitors and reduced-motion users always get the real copy. The wrapper carries an aria-label with the final string while the mutating node is hidden from assistive technology, and the string length stays constant during the tween, so screen readers hear one coherent string and layout never shifts.
Template Empire
Characters cycle through random glyphs and decrypt left to right into the real copy. Replay it, or enable reduced motion and the finished headline is simply here.
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. The wrapper element carries an aria-label with the final string and the node whose characters mutate is hidden from assistive technology, so screen readers announce one coherent string and never hear the scrambling 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.