Scramble Lens
An interactive typography effect: your text reads normally, and when the cursor hovers over it, a soft lens keeps the letters under it readable while the rest scramble into random characters. Fully responsive, smooth, and editable.
About this Component
Scramble Lens turns any text into an interactive surface.
Your text reads normally. When the cursor hovers over it, a soft circular lens follows the pointer — the letters inside the lens stay perfectly readable, while everything outside scrambles into random characters. The noise churns organically as you move, then settles when you stop. Move the cursor away and the text returns to normal.
Fully editable in Framer: text, font, text color, scramble color, background, corner radius, padding, alignment, lens size, edge softness, churn amount, animation smoothing and the scramble character set.
Built with pure code — no dependencies, fully responsive, and the layout never shifts because each letter is width-locked.
Perfect for headlines, hero text, taglines and anywhere you want a tactile, eye-catching typography moment.
