Image morph guide

Overview

Image morph bends one picture into another: shapes slide towards their partners while the first picture fades into the second.

A pale, pearl-covered head and a praying figure in a patterned robe blended into one, a spiked gold halo and red spires behind
The Liquid morph preset partway through: both pictures bent towards each other and blended.

It is an image transition between two pictures, A and B. See picture A and picture B and morphing.

First the tool works out an optical flow: for each small area of A, which way it would have to move to look like B, and the same from B back to A. It does this on small grey copies of both pictures, solving the tiniest one first and refining on larger ones. See coarse to fine and image pyramid. While it works, the frame dims and the hint line reads Computing flow…

During a run, A is pushed forward along its flow and B backward along its own, and a crossfade blends the two. See two-way warp and in-between frame. The flow compares brightness only; it does not pair features such as eyes with eyes. See feature matching.

One number, the transition progress, runs from 0 to 1 over the run, and an easing curve sets how it speeds up and slows down. The bending and blending are worked out for each pixel in a fragment shader on the GPU.

After each run the direction flips: the next run carries B back into A.

Five presets set every slider at once: Liquid morph, Slow shapeshift, Hard cut morph, Dream drift and Rubber pull. You can swap in your own two pictures, and keep a PNG or a video.

Open Image morph Start here

In this guide

  1. StartWhat you need and your first morph in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree presets caught mid-morph, and how each was made.
  4. Keep your workThe PNG and the video.
  5. HelpWhat to do when something goes wrong.

It runs in your browser with WebGL. Your pictures stay on your device and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.