ScrambleText

On every tick of the tween, ScrambleText rewrites the element's textContent. Some characters are already locked to the real target text, the rest are random filler pulled from a charset. As progress moves from 0 to 1, more characters lock in and the filler shrinks, so the final string emerges out of the scramble.

Use ease: "none" on the tween itself. The scramble has its own internal cadence, so an easing curve on top fights it and makes the lock-in rate feel uneven. revealDelay is how long the characters keep scrambling before any of them start resolving, which buys you a beat of pure noise at the start.

You can pass a plain string as a shorthand for the target text, or an object for full control:

• text - the final string to resolve to. Pass "{original}" to scramble back to whatever text is already in the element.
• chars - the filler set. A custom string like "01" for binary, or the keywords "upperCase", "lowerCase", "upperAndLowerCase".
• speed - how fast the filler characters churn. Higher is busier, 1 is the default.
• revealDelay - seconds of scramble before characters start locking to the real text.
• newClass / oldClass - CSS classes applied to the not-yet-revealed vs already-revealed characters, which is how you color the noise differently from the resolved text.
• delimiter - split on something other than per-character (e.g. " " to scramble whole words).

• Decode-style hero headlines on dev tools, security, and gaming products
• Hover labels on nav links or buttons that flip text on enter
• Status text swapping in place (Loading resolving into Ready)
• Code, hashes, or numbers that should read as 'computed' rather than typed

• You want a per-character entrance with no glyph churn (slide or fade each letter in) - use SplitText plus a staggered tween, no ScrambleText
• You want text typed one character at a time - that's a typewriter reveal (a width mask or a stepped substring), not a scramble
• You want one word's letters to morph into another word's shapes - that's an SVG or Flip morph, not a text-content swap
• The user has prefers-reduced-motion: reduce set - skip the scramble and set the final text instantly via gsap.matchMedia

Two Annnimate components produce the scramble effect, and they take opposite routes to it:

• Dual Scramble runs two ScrambleText tweens back to back. The text scrambles through a brand-accent color first, then resolves into the final foreground, using oldClass and newClass to recolor characters as they lock.
• Text Scramble reproduces the same decode reveal with a hand-written character cycler instead of the plugin. Worth knowing the effect is buildable without ScrambleText when you want full control over the charset and timing.