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 @compronents/inversion-lens-hoverInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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