Liquid distortion / ripple
An image surface warped by traveling waves, like water disturbed by a drop or a pointer moving across soft glass.
See it
What it is
A liquid distortion shifts image coordinates with a moving displacement field, making the surface appear to bend like water or soft glass. Concentric waves produce a ripple, while animated noise produces a flowing, irregular warp.
Reach for it on image reveals, watery transitions, album art, or pointer interactions where the surface should react to a touch. A WebGL fragment shader or a displacement map gives direct control over the wave direction, strength, and decay.
Gotcha: large displacement makes subjects unrecognizable and moving text hard to read. Keep interface copy outside the warped layer, damp pointer waves quickly, cap rendering resolution on large surfaces, and provide a still version when reduced motion is requested.
Ask AI for it
Create a mouse-reactive liquid ripple with a WebGL fragment shader: distort the image UV coordinates using a damped radial sine wave centered on the latest pointer position, with the wave traveling outward and fading within one second. Keep displacement under 12px, preserve sharp areas between waves, and disable animation for reduced motion.