Transform flat media into an interactive, spatial experience with the Inversion Lens. Powered by a custom WebGL fragment shader, this component generates a cursor-tracking optical lens that organically distorts, magnifies, or color-inverts your images and videos. Complete with cinematic chromatic aberration and an interactive 3D container tilt, it delivers the kind of award-winning "vibe code" typically reserved for custom-coded agency sites—now fully controllable right from the Framer sidebar.

✨ Key Highlights

• Dual Optical Modes: Instantly toggle the shader's core logic. Choose Inversion for a striking, color-negative x-ray effect, or Magnify for a beautiful, physics-driven glass refraction lens.

• Organic Shader Physics: The lens isn't just a perfect circle. Built-in Simplex noise algorithms create adjustable "Turbulence," giving the edges of the lens an organic, liquid-like wobble as it tracks the cursor.

• Cinematic Aberration: Dial in the exact amount of RGB Fringe. As the lens moves, it mathematically splits the red, green, and blue color channels at the edges, simulating real-world thick glass optics.

• Spatial 3D Tilt: The entire component container physically reacts to the mouse position, tilting on the X and Y axes to create profound 3D depth before the user even triggers the lens effect.

• Smart Media Engine: Seamlessly supports both high-res images and videos. Features an intelligent zero-black preload system, customizable media fit (Fill, Fit, Stretch), and performance-saving "Play on Hover" synchronization.

⚙️ Complete Design Control

• Media & Playback: Upload your assets, assign a video thumbnail, and completely dictate the playback rules (Autoplay, Loop, Muted, or Play on Hover).

• Optics & Distortion: Take absolute control over the WebGL math via simple sliders. Adjust the Lens Size, Edge Softness (blur), Turbulence (wobble), and Aberration (RGB split).

• Tactile Physics: Customize the Damping slider to control how "heavy" or "silky" the lens feels as it trails the cursor, and define the exact depth of the 3D Spatial Tilt.

• Container Styling: Easily adjust the border radius, background color (to prevent load flashes), and apply complex drop shadows to ground the component in your layout.

💡 Perfect For

• Creative Agency Portfolios: Prove your technical edge by using this as a deeply interactive thumbnail for high-end case studies.

• Fashion & Editorial: Add a futuristic, tactile layer of discovery to lookbooks or high-resolution photography collections.

• Hero Sections: Use it as a massive, interactive centerpiece on a tech or Web3 landing page to instantly grab user attention.