Text scramble
Also called scramble text effect, decrypt text effect, or hacker text effect
A text animation where each character flickers through random letters and symbols before settling on the final word, like a code being cracked.
import { useEffect, useState } from 'react';
import { animate, useReducedMotion } from 'motion/react';
const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&*+=?@';
const DURATION = 0.8; // seconds for every letter to lock in
function scramble(text: string, revealed: number) {
return [...text]
.map((char, i) =>
i < revealed || char === ' '
? char
: GLYPHS[Math.floor(Math.random() * GLYPHS.length)]
)
.join('');
}
export function ScrambleHeading({ text }: { text: string }) {
// Start with the real text so server and client render the same markup.
const [display, setDisplay] = useState(text);
const reduceMotion = useReducedMotion();
useEffect(() => {
if (reduceMotion) return;
// Letters lock in from left to right as the count climbs.
const controls = animate(0, text.length, {
duration: DURATION,
ease: 'linear',
onUpdate: (latest) => setDisplay(scramble(text, Math.floor(latest))),
onComplete: () => setDisplay(text)
});
return () => controls.stop();
}, [text, reduceMotion]);
return (
// A monospace font keeps the width steady while glyphs change.
<h1
aria-label={text}
className='font-mono text-4xl font-bold tracking-tight uppercase'
>
<span aria-hidden>{reduceMotion ? text : display}</span>
</h1>
);
}Add a text scramble to the hero headline: every unrevealed character cycles through random uppercase letters and symbols each frame, and the real characters lock in from left to right over 800ms. Use a monospace font so the width stays fixed, render the real text on the server, expose the final text with aria-label, and skip the effect when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Text scramble?
A text scramble swaps every character for random glyphs for a moment, then locks the real letters in place one by one, usually from left to right. It reads as decoding or computing, which is why it shows up on tech landing pages, developer portfolios, and button hovers.
Use it on short labels and headlines: a word or two, or one short line. On a paragraph it turns into noise, and nobody can read the text until it stops.
A monospace font keeps the width steady while the glyphs change; in a proportional font the line wobbles. Give screen readers the final text with an aria-label, and show it immediately for people who prefer reduced motion. In server-rendered apps, render the real text first, since random characters picked on the server will not match the ones picked in the browser.
Often confused with
- Typewriter effect
- A typewriter reveals a line by adding one character at a time. A text scramble shows the full length at once and decodes it in place.
Related terms
All termsTypewriter effect
A text animation that reveals a line one character at a time, as if someone were typing it, usually with a blinking caret at the end.
Split text animation
A text animation that breaks a heading into characters, words, or lines and animates each piece in turn, so the text arrives as a wave.
Text morph
A text transition where the letters two words share slide to their new spots while the others fade out or in, so a label changes without a hard cut.
Reduced motion
An operating system setting that asks apps to minimize movement, which websites detect with the prefers-reduced-motion media query.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.