FX-004 · Decode
Text scramble for websites.
Labels arrive as noise and resolve into words the first time they are seen, the way a HUD reads out a value. Hovering plays it again, and a list of words keeps cycling. The noise is drawn over the real text, which stays in the page.
- Weight2.0 KB
- LibraryGSAP
- PhonesWorks
- Licence€39
Live · Resolve
Out of noise.
It plays once as it slides in. With a mouse, hover it to play it again.
Live · Cycle
Alive.
Give it a list and it keeps cycling, decoding each word in turn.
Live · Glyphs
Your glyphs.
Use upper case, lower case, or any set of characters you like.
01 — Details
What it does.
Real text underneath
The noise is painted over the words by CSS, so the page's text never changes while it plays.
Word lists
Give it a list and it cycles through the words, decoding each in turn.
Hover replay
Hovering plays a label again, unless you turn that off.
Your own glyphs
Upper case, lower case, or any set of characters you like.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a text decode effect for this website with GSAP and its ScrambleText plugin. Behaviour - A short label arrives as random characters and resolves into its real words the first time it scrolls into view. - Hovering plays it again. - Given a list of words, it keeps cycling, decoding each word in turn. Build - Run ScrambleText on a detached span, not on the page's element. On each update, copy its text into a data attribute on the real element. - Make the real text transparent, and draw the noise over it with a ::after pseudo-element using content: attr(...). - Trigger it once with ScrollTrigger at "top 90%", with a duration around 1.2s, speed 0.6 and a reveal delay of a quarter of the duration. Must hold - The page's text must never contain noise, so search engines, copy and paste all get the real words. - The pseudo-element doesn't wrap, so keep this to short labels. - Reserve the label's space before it decodes, so nothing shifts. - Skip the cycle while the tab is hidden. - With prefers-reduced-motion, show the plain text. - Kill tweens and restore the element on teardown. Done when view source shows the real words, nothing shifts as it decodes, and a word list keeps cycling without piling up tweens.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <span data-fx="decode">System online</span> <span data-fx="decode" data-fx-decode-words="Alive|Cinematic"> Expensive </span>
| Option | Default | What it does |
|---|---|---|
| data-fx-decode-chars | 01<>/… | upperCase, lowerCase or your own glyphs |
| data-fx-decode-duration | 1.2 | Seconds |
| data-fx-decode-speed | 0.6 | How fast the noise changes |
| data-fx-decode-delay | 0 | Seconds before it starts |
| data-fx-decode-start | top 90% | Where it starts |
| data-fx-decode-hover | true | Set to false for no replay on hover |
| data-fx-decode-words | — | Words to cycle through, split by | |
| data-fx-decode-every | 2800 | Milliseconds each word holds |
04 — FAQ
Questions.
Does scrambled text hurt SEO?
No. The noise is only painted over the words with CSS, so the text in the page stays real.
What do screen readers get?
The real words. The text in the page never changes while the noise plays over it.
Can it cycle through words?
Yes. Give it a list and it decodes each word in turn, as often as you set.
Does it work on long text?
It is made for short labels and one-line headlines. For paragraphs, use Kinetic Split.
Licence
Decode · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.