Inversion_Lens

Animated turbulent inversion lens effect

A stunning WebGL-powered component that creates a smooth, animated lens effect that follows your mouse cursor. Built with Three.js shaders, this component uses CSS difference blend mode to create a striking visual effect where the lens interacts with the colors underneath, creating unique color variations with turbulent, distorted edges. How It Works Simply drop this component onto your canvas and position it over any content - images, text, buttons, or entire sections. The component acts as an invisible overlay that doesn't block interactions with content below. When you hover over the area, a circular/orb shaped lens appears and follows your mouse, using blend mode to create dramatic color effects on everything underneath it. The edges of the lens are animated with organic, turbulent distortion for a premium, high-end feel. Controls Lens Color - Choose the color of the lens circle. White creates the most dramatic contrast effect. Different colors (cyan, magenta, red, etc.) create unique color interactions with the content below due to the difference blend mode. Lens Size (0.05 - 1.0) - Controls the radius of the lens. Smaller values create a tight spotlight effect, while larger values cover more area. Default is 0.15 for a balanced look. Turbulence (0 - 0.2) - Adjusts the intensity of edge distortion. Set to 0 for a perfect circle, or increase for organic, wavy, animated edges. Default is 0.06 for subtle movement. Animation Speed (0 - 2) - Controls how fast the turbulent edges animate. Slower values create calm, gentle movement, while faster values create energetic, rapid distortion. Default is 0.75. Mouse Smoothness (0.01 - 0.3) - Determines how smoothly the lens follows your cursor. Lower values make it track instantly, while higher values create a dreamy, delayed trail effect. Default is 0.05 for natural following. Fade Speed (0.01 - 0.5) - Controls how quickly the lens fades in when you hover and fades out when you leave the area. Lower values create snappy appearance, higher values create gentle transitions. Default is 0.1. Perfect For Hero sections with dramatic effects Interactive portfolio showcases Product image galleries Creative agency landing pages About/team sections Any content where you want to add visual interest The component is optimized for 60fps performance, works on all modern browsers, and is fully customizable to match your design aesthetic. For design work, questions, or help, please reach out at https://www.fireislanddesign.com/

Animated turbulent inversion lens effect