Displacement map
Using one image's light and dark values as a map that shoves another image's pixels around. Texture-driven warping.
See it
What it is
A displacement map is a second image used as instructions rather than as something you look at. For every pixel of the source, the map's value at that spot says how far to shove that pixel and in which direction: mid gray means stay put, darker pushes one way, brighter pushes the other. SVG's feDisplacementMap does this literally, with one channel (say red) driving horizontal movement and another (green) driving vertical.
Feed it fractal noise (feTurbulence, or simplex noise in a shader) and you get liquid ripples, heat haze, and melting hover effects. Feed it a photo of crumpled paper or fabric and the flat artwork appears to drape over the wrinkles, which is the classic Photoshop mockup move. WebGL image sliders use one as a transition wipe: the outgoing image tears apart along the map's contours while the incoming one settles in.
Two things to know. This is not a bump or normal map: those fake lighting and leave pixels where they are, while a displacement map actually moves them. And the map wants to be soft. A high-contrast, high-frequency map at a big scale shreds the image into confetti, so blur the map and keep the displacement amount small. Watch the edges too, since pixels get dragged in from outside the source and smear the borders unless you oversize the source or clamp it.
Ask AI for it
Distort this image with a displacement map using an SVG filter: generate a soft, tileable fractalNoise map with feTurbulence (baseFrequency around 0.01, 2 octaves) larger than the frame, then run feDisplacementMap on the source with xChannelSelector='R' and yChannelSelector='G' and a scale of about 20 so the warp is a gentle liquid ripple, not confetti. Keep the turbulence seed fixed and translate the map's sampling coordinates continuously instead: animating the seed swaps the noise pattern for an unrelated one every step and reads as flicker rather than drift. Oversize the source and clamp its edges so the warp never smears the borders.