Decrypting…
The dimmed random symbols are the glyph churn — each character locks in at its own deadline, left to right (click to replay)
Text Scramble (Decode Effect)
/ ScrambleTextPlugin · requestAnimationFrame + charset swap /
also called decode effect, matrix text effect, shuffle text
“The letters shuffle until they spell the word” is a text scramble, also called the decode or Matrix effect — every character churns through random glyphs, then locks into place, usually left to right. The classic tool is GSAP's ScrambleTextPlugin (free since 3.13); hand-rolled versions are a requestAnimationFrame loop with a settle deadline per character.
If you called it…
…you meant a text scramble (decode effect).
Anatomy — every part, named
- 1Glyph churn
chars (ScrambleTextPlugin)“The random letters still spinning at the end while the rest has settled” is the churn — the not-yet-locked characters drawn from the scramble charset.
Prompt — paste into your agent
Build a text scramble (decode) effect: each character cycles random glyphs and locks into the real one left to right (GSAP ScrambleTextPlugin, or a requestAnimationFrame loop with a per-character settle deadline). Use a monospace font or tabular glyphs so width never jitters, expose the final string via aria-label with the churning span aria-hidden, and honor prefers-reduced-motion by rendering the text instantly.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my text scramble effect (GSAP ScrambleTextPlugin / rAF charset loop). Rule out: layout jitter because glyph widths differ (needs monospace or tabular-nums); the animation never settling because the per-character deadline keeps resetting on re-render; screen readers announcing garbage (final text must live in aria-label, churn aria-hidden); the effect re-running on every state change instead of once per mount; reduced-motion users getting the churn instead of instant text. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| GSAP | ScrambleTextPlugin | the canonical implementation — free since GSAP 3.13 |
| JS | requestAnimationFrame + charset swap | the hand-rolled version: per-character reveal deadline, random glyphs until then |
| CSS | font-variant-numeric: tabular-nums | monospace/tabular glyphs stop the line jittering while it churns |
| A11y | aria-label + aria-hidden churn | screen readers get the final text, never the noise |