Reveal Lens

About Reveal Lens

Before and after, under glass. Not a circle cut out of the second picture: the lens zooms it around the exact point underneath, squeezes more of it into a ring at the rim the way a real lens does, bends it with a turbulence refraction, and carries its own tint, highlight and shadow. Four shapes, images or video on either side, a resting position you choose, finger dragging on touch and arrow keys on a keyboard.

Features

• Real optics: the point under the lens is the same point in both pictures.

• A compressed rim, not a clip-path circle.

• Four shapes — Circle, Squircle, Rounded, Square — all with a working rim and shadow.

• Zoom, Refraction, Blur, Border, Glass Tint, Highlight and Shadow.

• Images or video on either side, with video paused off screen and under reduced motion.

• A resting position, and a cursor lag you set.

• Finger dragging that never scrolls the page behind it.

• Arrow keys, a focus ring, alt text and a screen-reader description of both sides.

• Unsafe media URLs refused; empty slots labelled rather than blank.

• Snaps into place instead of trailing under reduced motion.

• One standalone React + TypeScript file.

• 24 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.