Inversion Lens is not just another magnification tool; it is a high-performance WebGL engine designed specifically for Framer creators who demand interactive sophistication. By manipulating light and color in real-time, this component creates a stunning "optical glass" effect that gives your digital assets a tangible, physical presence.
Built with performance in mind, the Inversion Lens utilizes custom fragment shaders to render complex distortions and chromatic shifts at 60fps, ensuring that your site remains fluid even with high-resolution assets. Whether you are building a high-end fashion portfolio, a tech agency landing page, or a creative showcase, this component adds a layer of depth that standard CSS effects simply cannot match.
- Dual Shader Modes: Seamlessly toggle between 'Inversion' (perfect for surreal, high-contrast reveals) and 'Magnify' (for detailed, high-fidelity focus) directly within the Framer property sidebar.
- Interactive 3D Spatial Tilt: The entire component container tracks the user's cursor with a responsive 3D rotation, providing a tactile card-like experience that reacts to every movement.
- Professional Chromatic Aberration: Mimic the look of expensive wide-angle glass with adjustable RGB fringing that splits color channels at the lens boundary.
- Organic Edge Wobble: Integrated turbulence mathematics adds a subtle liquid-like wobble to the lens edges, making the interaction feel organic rather than clinical.
- Smart Media Sync: Supports both high-resolution Images and Video (MP4/MOV). Features specialized 'Play on Hover' logic to conserve browser resources while providing instant feedback.
- Optical Tuning: Gain total control over Lens Size, Edge Softness (blur), and RGB Fringe Intensity to match your brand's aesthetic perfectly.
- Physics-Driven Damping: A dedicated damping slider allows you to control the 'weight' of the lens as it follows the mouse, ranging from snappy to silky smooth.
- Zero-Flash Loading: Includes a specialized Background Color fallback system to prevent distracting black flashes while video assets are pre-loading.
- Surreal Brand Visuals: Create a 'negative film' effect that users can explore with their mouse.
- Portfolio Case Studies: Highlight specific design details or micro-interactions using the precision magnification mode.
- Interactive Hero Banners: Grab attention immediately with a 3D-tilting hero card that encourages user engagement from the first second.
Inversion Lens is not just another magnification tool; it is a high-performance WebGL engine designed specifically for Framer creators who demand interactive sophistication. By manipulating light and color in real-time, this component creates a stunning "optical glass" effect that gives your digital assets a tangible, physical presence.
Built with performance in mind, the Inversion Lens utilizes custom fragment shaders to render complex distortions and chromatic shifts at 60fps, ensuring that your site remains fluid even with high-resolution assets. Whether you are building a high-end fashion portfolio, a tech agency landing page, or a creative showcase, this component adds a layer of depth that standard CSS effects simply cannot match.
- Dual Shader Modes: Seamlessly toggle between 'Inversion' (perfect for surreal, high-contrast reveals) and 'Magnify' (for detailed, high-fidelity focus) directly within the Framer property sidebar.
- Interactive 3D Spatial Tilt: The entire component container tracks the user's cursor with a responsive 3D rotation, providing a tactile card-like experience that reacts to every movement.
- Professional Chromatic Aberration: Mimic the look of expensive wide-angle glass with adjustable RGB fringing that splits color channels at the lens boundary.
- Organic Edge Wobble: Integrated turbulence mathematics adds a subtle liquid-like wobble to the lens edges, making the interaction feel organic rather than clinical.
- Smart Media Sync: Supports both high-resolution Images and Video (MP4/MOV). Features specialized 'Play on Hover' logic to conserve browser resources while providing instant feedback.
- Optical Tuning: Gain total control over Lens Size, Edge Softness (blur), and RGB Fringe Intensity to match your brand's aesthetic perfectly.
- Physics-Driven Damping: A dedicated damping slider allows you to control the 'weight' of the lens as it follows the mouse, ranging from snappy to silky smooth.
- Zero-Flash Loading: Includes a specialized Background Color fallback system to prevent distracting black flashes while video assets are pre-loading.
- Surreal Brand Visuals: Create a 'negative film' effect that users can explore with their mouse.
- Portfolio Case Studies: Highlight specific design details or micro-interactions using the precision magnification mode.
- Interactive Hero Banners: Grab attention immediately with a 3D-tilting hero card that encourages user engagement from the first second.
