Skip to content

Scramble Lens

Hover-readable text scramble effect

Scramble Lens preview image 1

Summary

Scramble Lens turns any text into an interactive surface.

Description

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.

Rank history How rankings work →

12001400157898/149/59/2710/1911/10
  • All · #5789

Details

More like this