Liquify Lens React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install @react-three/fiber three

CSS Modules

Usage

Matches your current playground settings.

import LiquifyLens from "./LiquifyLens";

export default function Example() {
  return (
    <LiquifyLens
      backgroundImageUrl={"https://reactverse.dev/images/nebula_rift.webp"}
      lensSize={280}
      strength={0.75}
      minHeight={520}
    />
  );
}

Using Liquify Lens

Supply your own artwork through backgroundImageUrl and set minHeight to reserve its visible area.

lensSize changes the refracting region and strength changes the distortion. Use a clear source image and moderate distortion when its content matters.

Props

Name	Type	Required	Default	Description
backgroundImageUrl	string	No	""	Background image URL for the base layer.
lensSize	number	No	280	Diameter of the lens in pixels.
strength	number	No	0.75	Strength of the distortion effect (0 to 1).
className	string	No	undefined	Additional CSS class names, merged with base component styles.
minHeight	number \| string	No	520	Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string.
mouseRef	React.MutableRefObject<{ x: number; y: number }>	No	undefined	Optional pointer ref for external cursor tracking, values in the range [-1, 1].