Inversion Lens Hover
A WebGL image where a soft circular lens tracks the cursor and inverts a grayscale version of the image inside it, its edge broken up by 8-octave turbulence scrolling over time so the boundary churns like a living blot; the lens eases open on enter and closes when the pointer leaves or the element scrolls out of view.
npx shadcn@latest add https://ui.aryank.space/r/inversion-lens-hover.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | BLANK-hosted JPEG | Image inverted inside the lens. |
| maskRadius / turbulenceIntensity / maskSpeed | number | 0.15 / 0.075 / 0.75 | Lens radius, edge turbulence, and churn speed. |
| lerpFactor / radiusLerpSpeed | number | 0.05 / 0.1 | Cursor follow easing and lens open/close easing. |
maskRadius / turbulenceIntensitytupleLens size and how ragged its edge churns.
maskSpeed / lerpFactortupleTurbulence scroll speed and cursor easing.
three