Image / media · 5.1

Displacement image hover

Two photographs melting into each other through frosted glass.

Hovering liquefies an image as it transitions to a second one, with the character authored in a greyscale map.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it actually works

The map-swap is the single most teachable knob in the index, because of what it implies about who is driving. Every other knob on this site is a number a developer picked. This one is a PNG a designer made. Same shader, same three lines, entirely different product.

Two textures on a plane plus a greyscale displacement image. The fragment shader offsets each fragment's UV by the displacement texel's value, scaled by a progress uniform animated 0 to 1 on hover, then mixes texture A to B. Swapping the displacement map completely changes the character: ripple, slice, smoke, ink. The look is authored in Photoshop, not in code. That is the point of the technique.

The knobs, named

The displacement map itself is the whole personality. Strength, duration and easing are trim.

Knob	Source	What it teaches
Displacement map	sourced	The whole personality, and the point of the entry. Same shader, five different transitions, zero code changed.
Displacement strength	sourced	How far the map is allowed to push a pixel. Past 0.4 the two images stop being images.
Transition duration	sourced	How long the hover takes to complete.
Easing	sourced	The curve of the progress uniform.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

INFERRED

Codrops "WebGL Distortion Hover Effects" (2018, the canonical reference, snippet-only); "Interactive WebGL Hover Effects" (2020); "Motion Hover Effects with Image Distortions" (2019). The mechanism is standard and well-corroborated across three articles, but none was fetched in full. Not upgraded to VERIFIED.

Seen on: Codrops distortion-hover articles. The most-copied WebGL effect on the web.
Dependencies: Three.js, OGL, or the hover-effect lib. Vanilla WebGL here.
Difficulty: trivial-to-moderate
Performance: Cheap: one plane, few taps.
Accessibility and the floor: No hover on touch. Ours falls back to the static first image on coarse pointers, without WebGL, and without JS.

Where our build departs from the source: Our five maps are generated procedurally in the shader, not loaded as PNGs. That is a real departure: the source's whole point is that a designer authors the map in Photoshop and hands it over. We kept the knob (swap the map, change everything) but not the authoring pipeline, because this build ships no external assets. The two "photographs" are procedural fields for the same reason.

Notes

Composability. The displacement map and the threshold map (5.8) are the same idea twice: a greyscale texture deciding per-pixel behaviour. Learn one, you have both.

The one that must degrade. Render a real img in the DOM and replace it with the canvas only if WebGL initialises, or you have shipped a blank grid to everyone whose driver blocklisted them. And there is no hover on touch, so the whole feature is desktop-only by construction.

Scroll-linked per-word illumination

Real-time ASCII conversion