Add a striking interactive WebGL magnifier to your images with smooth 3D bulging, soft edge masking, and high-performance hover reveals.

Features

• Real-time WebGL lens distortion and magnification

• Smooth mouse-tracking hover reveal mask

• Progressive soft-edge feathering

• Flawless color accuracy with raw pixel passthrough

• Highly optimized Three.js performance with smart viewport rendering

• Responsive resize handling and object-fit cover logic

• Zero-code, drag-and-drop Framer integration

• Live preview directly inside the Framer editor

Customization Options

• Top (Default) image

• Reveal (Background) image

• Mask radius size

• Edge softness and feathering

• Enable/disable 3D lens bulge

• Lens magnification intensity

How to Use

• Drop the component onto your Framer canvas

• Upload your default and reveal images via the properties panel

• Adjust the mask radius and softness to fit your style

• Tune the lens intensity for the perfect 3D bulge

• Publish for a premium interactive visual experience

Use Cases

• Before and after image reveals

• Premium portfolio galleries

• Interactive product showcases

• Creative agency landing pages

• Hidden visual easter eggs

• Modern team member headshots

• High-end e-commerce displays