Media Reveal Lens is not just a hover effect—it’s a premium WebGL component that transforms standard images and videos into a fluid, magnetic discovery experience. Engineered with custom vertex and fragment shaders, this component creates a liquid distortion mask that reveals secondary media, giving your site an instant, award-winning feel. Whether you are building a luxury fashion site, a creative portfolio, or a high-tech landing page, Media Reveal Lens delivers buttery-smooth performance, interactive fluid physics, and complete visual control right from the Framer sidebar.

✨ Key Highlights

• Mixed Media Mastery: Seamlessly mix images and videos as base layers and reveal layers, with built-in support for autoplaying MP4s.

• Liquid Edge Distortion: Powered by custom GLSL noise functions, the edge of your lens ripples and wobbles organically as the user interacts.

• Physics-Driven Ripple: Move your cursor to send liquid displacement ripples across the entire component using an advanced physics grid.

• Mobile-First Engineering: Features smart global mouse tracking to ensure the lens mask stays perfectly mapped even while scrolling natively.

• Zero-Code Customization: Every visual aspect—from mask radius and turbulence to RGB chromatic aberration—is an intuitive control directly inside Framer.

⚙️ Complete Design Control

• Content & Media: Easily toggle between Image or Video nodes for both the primary background and the secondary reveal layer. Control fit modes (Fill, Fit, Stretch) independently.

• Geometry & Space: Define the exact base radius of the lens, smooth the edges with a softness slider, and add chromatic aberration (RGB split) to the boundary for a prism effect.

• Physics & Motion: Fine-tune the magnetic damping to make the lens drag naturally behind the cursor, and dictate the exact strength, impact radius, and relaxation speed of the liquid ripples.

💡 Perfect For

• Luxury Brands: Reveal high-end product details or alternate colorways beneath lifestyle imagery.

• Creative Exhibitions: Build hypnotic before-and-after sliders or hidden Easter eggs in your portfolio.

• Product Showcases: Highlight the internal hardware of a tech product beneath its sleek exterior.