Liquid Displacement Effects

When to use this

• You want images that ripple, warp, or melt on hover.
• The design calls for a liquid transition between two images (portfolio, slider, reveal).
• You need an RGB channel-shift (chromatic aberration) effect tied to mouse movement or scroll.
• You are building a displacement-map-driven distortion on a DOM-synced WebGL plane.
• Do NOT use this for full-page turbulence or noise distortion applied to text -- see svg-filter-effects for that. This skill is about image-specific displacement driven by interaction.

Mental model

Displacement maps work by shifting each pixel's position based on a lookup into a grayscale (or color) texture. The displacement map is a grayscale image where:

• 50% gray (128) = no displacement
• Lighter than 128 = shift in positive direction
• Darker than 128 = shift in negative direction

The fragment shader samples the displacement map at each UV coordinate, reads the grayscale value, converts it to a signed offset, and uses that offset to look up the source image at a shifted position. The scale uniform controls how much the displacement map actually moves pixels.

For hover distortion, the displacement scale is animated from 0 (no effect) to some peak value and back to 0. The displacement map itself is typically a pre-authored texture -- a photograph of water surface, a noise pattern, or a hand-drawn grayscale brush stroke.