Can I scramble a paragraph?

You can. You will lose the sentence. Keep it to a title, a name, or a 2 word status.

What about screen readers?

Keep the finished word in the document.

Does the width have to jump?

No. Use a mono font, tabular figures, or a reserved min-width.

Should this loop on a hero?

Once is plenty. A loop says the page is still loading.

What does reduced motion do?

Show the finished word. No shuffle.

Text scramble

A text scramble fills a line with random characters, then lets the real word settle in.

TextBuild difficulty: MediumscrambleText

Also called Decode text, Shuffle text, Hacked text, Glitch type.

Here it is working.

Motion

Letters settle into the sentence. Play again to run it once more.

For designers

You use this on a name, a status, or a short hover swap, when a beat of noise is part of the read. People will wait for 1 short word. They will not wait for a sentence. If the word tells someone what to press, show the word first and scramble later, or leave it still. Keep the random set close to the font you are in. Mono or tabular figures hold the width so the line does not jump while it decodes. Reduced motion shows the finished word and skips the shuffle.

Use this when

The line is a few words and the pause is the point.
You are changing one short label into another.
The type is mono or tabular, so the box stays put.
Hover or a single scroll entry can start it.
Reduced motion can skip to the finished word.

Reach for something else when

The heading should arrive in reading order. Use Text reveal or Typewriter.
Two labels both need to decode on a swap. Use Dual scramble.
Letters should pop in, without changing. Use Popping text or Character appear.
You want one word outlines to become another. Use Text morph.
The copy is a paragraph, a form label, or anything needed immediately. Set it in type.

How to build it

Write the real word in the document. Screen readers should get that word while the visual is still shuffling. Tween the visible string towards the finished text and let random characters fill the gaps on the way. Keep the run under 1 second for product UI. Match the random set to the typeface. Official ScrambleText is the usual tween on the string. On reduced motion, set the finished string and do not run the shuffle. If two words have different widths, reserve the wider box.

Official GSAP

ScrambleTextPlugin.

gsap.to('.title', {
  duration: 1.2,
  scrambleText: { text: 'Quiet motion', chars: 'upperCase' },
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How long should a scramble run?: Under 1 second for UI.
Can I scramble a paragraph?: You can. You will lose the sentence. Keep it to a title, a name, or a 2 word status.
What about screen readers?: Keep the finished word in the document.
Does the width have to jump?: No. Use a mono font, tabular figures, or a reserved min-width.
Should this loop on a hero?: Once is plenty. A loop says the page is still loading.
What does reduced motion do?: Show the finished word. No shuffle.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Typewriter