Grid Deformation Effect

How it works

A full-screen photograph that behaves like a soft material. Sweep the cursor across it and the image is dragged along with the gesture, block by block, pixels smearing in the direction of the swipe with a faint red and blue fringe along the edges of the push. Stop, and the picture slowly springs back until it is perfectly still and undistorted again.

It is built with Three.js alone. There is no animation library: the motion is a small physics step that runs on every frame.

A deformation field with memory

The key idea is that the distortion is not computed from the cursor directly. It is stored. Behind the image sits a tiny texture, a coarse grid of cells covering the screen, where each cell holds a horizontal and a vertical push. Think of it as a map of how far each part of the picture has been shoved.

Every frame two things happen to that map. First, every cell loses a fraction of its push, which is the relaxation that makes the image return to rest. Then the cursor writes into it: all the cells within a soft brush around the pointer receive the pointer's current velocity, strongest at the centre of the brush and fading towards its edge. A slow movement writes almost nothing; a fast flick writes a strong push that lingers and fades over a fraction of a second. The velocity itself also decays between mouse events, so a flick finishes cleanly instead of stopping dead.

What the shader does

The fragment shader reads the field at each pixel and shifts where it samples the photograph by that amount, so the image is dragged locally. The field texture is read without smoothing, which is what keeps the cells as visible blocks rather than a liquid blur. To add the chromatic fringe, the red, green and blue channels are sampled at slightly different offsets along the same push, so colour separates exactly where the image moves and nowhere else.

Where it gets hard

The feel comes from balancing two decays against the brush: how fast the field relaxes and how fast the input velocity fades. Too slow and the image turns to mush; too fast and it looks like a glitch rather than a material. The field must also be rebuilt when the viewport changes shape, so the cells stay square and the brush keeps the same size relative to the screen.

Performance and mobile

The GPU work is light: one quad and three texture reads per pixel. The CPU work is a loop over a small grid every frame, which is negligible. The effect is pointer-driven, so on touch screens the photo simply sits still and sharp, which is a reasonable fallback. A photograph with strong edges and detail shows the drag and the fringing best; flat images hide it.