Image Ripple Effect

Image Ripple (WebGL)

Transform any image into a living water scene with crisp, responsive ripples—built for mouse, touch, and pen. Enjoy smooth performance on mobile and broad WebGL1 compatibility. Accurate cover mapping keeps your visuals on-brand (no stretching or cropping), while adaptive timing delivers silky motion across devices. Perfect for hero banners, product imagery, and interactive sections that captivate and convert.

Highlights

• Realistic, responsive ripple simulation

• Pointer Events support (mouse/touch/pen)

• Mobile-friendly with smart DPR capping

• WebGL1-ready for older GPUs

• Adaptive timing for steady animation

• Accurate cover UV mapping

Quick controls

• Image: choose the source/alt for your visual.

• Ripple Strength: overall intensity of the effect.

• Ripple Speed: how fast waves evolve.

• Ripple Density: frequency/complexity of ripples.

• Liquid Line Density: adds subtle flowing patterns.

• Distortion Strength: push/pull of pixels around interaction.

• Distortion Radius: area of influence.

• Distortion Falloff: how quickly the effect fades outward.

• Mouse Offset: slight drift following the pointer for depth.

• Effect Width / Height: limit the active region (per-axis).

• Dampening: controls trail fade-out and persistence.

• Quality (DPR cap): balance clarity vs. speed on high-DPI screens.

• Max Trail: adjust trail length for stability and style.

Make imagery feel alive—without heavy assets or video. Plug in, tweak, and ship experiences that stand out.