Inversion_Lens: Free Interactions Component by Troy Miller

A WebGL-powered overlay that creates a smooth, animated inversion lens effect following your mouse. Features turbulent distorted edges, customizable size, color, and animation speed. Just drop it on your canvas to add this eye-catching effect to any section.

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.