Liquid Ripple Image

Pro

Pointer trails bloom into concentric ripples that refract a photo in WebGL.

webglimagerippledistortionrefractioncursorfull bleed

Props

Prop	Type	Default	Description
`imageUrl`	string	-	Photo the ripples refract. Must be same-origin or CORS-enabled.
`alt`	string	-	Accessible name. Omit for a purely decorative backdrop.
`trigger`	"hover" \| "click" \| "both"	"hover"	What lays down ripples.
`brushSize`	number	150	Diameter of a freshly spawned ripple, in CSS pixels.
`spread`	number	5	How far a ripple grows before it dies, as a multiple of brushSize.
`fade`	number	3	Seconds a ripple takes to fade out.
`spacing`	number	15	Pointer travel between spawns, in CSS pixels. Lower draws a denser trail.
`clickStrength`	number	2	Size multiplier for a ripple spawned by a click.
`strength`	number	0.2	Peak refraction offset, in UV units.
`swirl`	number	1	Rotation applied to the refraction, in turns. 0 pushes straight outward.
`rings`	number	4	Concentric wavefronts inside one ripple.
`dispersion`	number	0	Chromatic split between the red and blue samples. 0 is off.
`glint`	number	0	Specular highlight strength on the wave crests. 0 is off.
`highlightColor`	string	"#ffffff"	Hex colour of that highlight.
`tint`	string	"#ffffff"	Hex colour pushed into the displaced pixels.
`tintAmount`	number	0.1	How much of tint to push in, 0-1.
`grayscale`	number	0	Desaturation of the whole photo, 0-1.
`quality`	"low" \| "medium" \| "high"	"low"	Displacement field resolution as a share of the canvas.
`maxRipples`	number	100	Ripples alive at once. The oldest is recycled past this. Clamped to 200.
`fit`	"cover" \| "contain"	"cover"	How the photo maps into the frame, as object-fit would.
`backgroundColor`	string	"transparent"	Hex fill behind the photo, or "transparent" to show the page through.
`interactive`	boolean	true	Turn off ripple spawning without unmounting the context.
`paused`	boolean	false	Freeze the field on its current frame.
`dpr`	number	-	Render scale. Defaults to the device ratio, capped at 2.