Scramble / Decode Text
A mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.
- gsap
Split, masked, scrambled and kinetic typography.
6 effects
A mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.
A headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.
Two bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.
A self-running motion poster: seven stacked rows of the same word, from hairline to black, shear and slide in alternating directions on a yoyo loop while a secondary word flips over in 3D every 1.6 seconds.
An editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).
A single display word split into characters whose font weight (300 → 900) and SOFT axis follow the pointer with a Gaussian falloff; leaving sends a left-to-right ripple back to rest, and touch devices get an automatic looping wave.
No effects match these filters.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…