Text scramble (decode effect)
Letters flicker through random symbols before locking into the real words, like a message being decoded in front of you.
See it
What it is
A text scramble repeatedly swaps unrevealed characters for random glyphs, then locks the real letters into place until the final phrase is readable. It borrows the visual language of code breaking and terminal screens without changing the destination text. GSAP's ScrambleTextPlugin is a packaged version of the effect.
Use it for a short title, status change, or deliberate sci-fi beat where the act of decoding supports the tone. Resolve characters in order or in small random groups, and keep the total run short enough that the words arrive before reading becomes work.
Gotcha: replacing text every frame can make assistive technology chatter and proportional fonts make the layout vibrate. Keep one stable final string available to screen readers, mark the animated copy 'aria-hidden', and use a fixed width or monospace face when the swaps change character width. Never build glyphs with 'innerHTML' from untrusted text.
Ask AI for it
Build a text scramble reveal for this heading with GSAP ScrambleTextPlugin. Start with random uppercase letters and digits, resolve left to right into the exact original text over 900ms, and keep spaces fixed so the phrase does not collapse. Put the animated copy in an 'aria-hidden' span and expose the unchanged final heading text to assistive technology. Cancel any previous scramble before replaying it, never inject generated glyphs through innerHTML, and show the final text immediately when 'prefers-reduced-motion: reduce' matches.