A text component that decodes itself on hover and click, adding a satisfying layer of motion to any headline, button, or link.
ScrambleHover animates your text by rapidly cycling through random characters before settling into the real word or sentence, like a terminal decrypting a message. Triggered on hover and on click, it gives users tactile, responsive feedback that makes interfaces feel alive without being distracting.
Dual trigger — Scrambles on hover, and again on click, so it responds naturally to how users actually interact
Customizable character set — Choose symbols, letters, or numbers used during the scramble
Adjustable speed & duration — Control how fast the scramble cycles and how long it takes to resolve
Works with any text — Headlines, nav links, buttons, or body copy
Lightweight & performant — No layout shift, smooth animation, optimized for Framer canvas and live sites
No-code friendly — Just drop it in, connect your text, adjust settings from the properties panel.
Portfolio sites, agency landing pages, editorial or experimental layouts.
A text component that decodes itself on hover and click, adding a satisfying layer of motion to any headline, button, or link.
ScrambleHover animates your text by rapidly cycling through random characters before settling into the real word or sentence, like a terminal decrypting a message. Triggered on hover and on click, it gives users tactile, responsive feedback that makes interfaces feel alive without being distracting.
Dual trigger — Scrambles on hover, and again on click, so it responds naturally to how users actually interact
Customizable character set — Choose symbols, letters, or numbers used during the scramble
Adjustable speed & duration — Control how fast the scramble cycles and how long it takes to resolve
Works with any text — Headlines, nav links, buttons, or body copy
Lightweight & performant — No layout shift, smooth animation, optimized for Framer canvas and live sites
No-code friendly — Just drop it in, connect your text, adjust settings from the properties panel.
Portfolio sites, agency landing pages, editorial or experimental layouts.
