Aurora Flares
Backgrounds
Liquify Lens
A glass lens that refracts the backdrop with liquid distortion and caustics.
Customize
ADVERT
Overview
Liquify Lens adds a dynamic glass lens that follows your cursor and refracts whatever sits beneath it. The lens adds depth with subtle chromatic edges, caustic highlights, and liquid distortion without overwhelming the layout. Use it for hero banners, feature callouts, or interactive showcases.
Props
Use the props below to customise the liquify lens in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| backgroundImageUrl | string | No | "/images/nebula_rift.webp" | Background image URL for the base layer. |
| lensSize | number | No | 280 | Diameter of the lens in pixels. |
| className | string | No | undefined | Optional class name for layout control. |
| mouseRef | React.MutableRefObject<{ x: number; y: number }> | No | undefined | Optional pointer ref for external cursor tracking, values in the range [-1, 1]. |
| strength | number | No | 0.75 | Strength of the distortion effect (0 to 1). |
| minHeight | number | string | No | 520 | Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string. |
Related React components
More components from the same category or sharing similar tags.
