Typography / text · 4.4
Text scramble and decode
A combination lock spinning to its number.
Characters cycling through random glyphs and resolving into the real string.
4 knobs
How it actually works
The charset is a text input, and it is the rarest kind of knob in this index: not a number, not a dropdown, a field you type into that changes the entire personality. Type 01 and it is a machine. Type the punctuation set and it is a 1995 hacker movie. Type your own name and it is nonsense, immediately, which is a useful thing to be able to prove in one second.
Each character gets a randomised start and end frame. Before its start it shows nothing, between start and end it shows a random glyph from the charset (re-rolled occasionally), and after its end it shows the real character forever. The known vanilla implementation is about forty lines and uses the charset !<>-_\/[]{}—=+*^?#
The knobs, named
chars is the charset and the entire personality. speed, revealDelay and tweenLength are the plugin's real option names for the rest.
| Knob | Source | What it teaches |
|---|---|---|
| chars (charset) | sourced | The entire personality, and the only text-input knob in the catalog. The default is the soulwire set, verbatim. Try 01, or ▓▒░, or ABC. |
| speed | sourced | How fast the resolve sweeps across the string. |
| revealDelay | sourced | Scramble fully before unscrambling. At 0 the first letters resolve before the last ones have started. |
| Glyph churn rate | ours | How often an unresolved character re-rolls. Low is a slot machine easing to a stop; high is static. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
GSAP ScrambleTextPlugin docs (the option names chars, speed, revealDelay, tweenLength are the plugin's real ones); soulwire CodePen mEMPrK for the vanilla class and the charset.
- Seen on
- GSAP docs; soulwire CodePen mEMPrK.
- Dependencies
- GSAP ScrambleText (free since 2025), or about 40 lines vanilla (ours)
- Difficulty
- trivial
- Performance
- Cheap.
- Accessibility and the floor
- GSAP's docs give no accessibility notes. Churning live text is hostile to screen readers and to cognitive accessibility, so ours puts aria-hidden on the effect and keeps the static real text in the accessibility tree. Under reduced motion the string is simply there.
Notes
Composability. Scramble on enter, then hand off to 4.5. Both leave real text behind, which is more than most of this category can say.