Inversion Lens Hover

Getting Started

Guides

Scroll Animations

Text Animations

Hover & Cursor

Sliders & Carousels

Galleries & Grids

Menus & Navigation

Preloaders & Intros

Page Transitions

3D & WebGL

UI Elements

How it works

A container-sized WebGL canvas draws the image on a full-screen plane, fitted to the image's height.

The fragment shader measures each pixel's aspect-corrected distance to the cursor and adds eight octaves of value-noise turbulence that scrolls over time, so the circle's edge boils.

Inside the lens the pixel becomes inverted grayscale; outside it keeps its original color.

The cursor position is lerped by lerpFactor, and the lens grows to maskRadius on enter and shrinks to zero on leave at radiusLerpSpeed.

Pointer listeners live on the component. An IntersectionObserver pauses rendering while it is off-screen. Everything is disposed on unmount.

With prefers-reduced-motion: reduce, the image renders once without the lens.

Props

Prop	Type	Default	Description
`image`	`string`	remote photo	Image shown full-bleed.
`alt`	`string`	default	Accessible label for the image.
`maskRadius`	`number`	`0.15`	Lens radius relative to the container height.
`maskSpeed`	`number`	`0.75`	Speed of the turbulent edge animation.
`lerpFactor`	`number`	`0.05`	How quickly the lens follows the cursor.
`radiusLerpSpeed`	`number`	`0.1`	How quickly the lens grows and shrinks.
`turbulenceIntensity`	`number`	`0.075`	How jagged the lens edge is.
`className`	`string`	—	Extra classes on the outer container.

How it works

A container-sized WebGL canvas draws the image on a full-screen plane, fitted to the image's height.

The fragment shader measures each pixel's aspect-corrected distance to the cursor and adds eight octaves of value-noise turbulence that scrolls over time, so the circle's edge boils.

Inside the lens the pixel becomes inverted grayscale; outside it keeps its original color.

The cursor position is lerped by lerpFactor, and the lens grows to maskRadius on enter and shrinks to zero on leave at radiusLerpSpeed.

Pointer listeners live on the component. An IntersectionObserver pauses rendering while it is off-screen. Everything is disposed on unmount.

With prefers-reduced-motion: reduce, the image renders once without the lens.

Props

Prop	Type	Default	Description
`image`	`string`	remote photo	Image shown full-bleed.
`alt`	`string`	default	Accessible label for the image.
`maskRadius`	`number`	`0.15`	Lens radius relative to the container height.
`maskSpeed`	`number`	`0.75`	Speed of the turbulent edge animation.
`lerpFactor`	`number`	`0.05`	How quickly the lens follows the cursor.
`radiusLerpSpeed`	`number`	`0.1`	How quickly the lens grows and shrinks.
`turbulenceIntensity`	`number`	`0.075`	How jagged the lens edge is.
`className`	`string`	—	Extra classes on the outer container.

Inversion Lens Hover

Installation

Usage

How it works

Props

Inversion Lens Hover

Installation

Usage

How it works

Props