Ripple transition guide

Overview

Ripple transition carries one picture into another with a ring of water waves that spreads from the point you tap.

A pearl-crowned figure before dark spires, ringed by a bright, rippling band with rainbow edges, the first picture's patterned robe still at the corners
The Default preset partway through: picture B shows inside the ring, picture A outside it.

It is an image transition between two pictures, A and B. See picture A and picture B. Ahead of the ring you see A; behind it, B.

The ring works like a displacement map: each pixel under the wave is pushed along the line from the tap, so the picture bends as the ring passes. The red, green and blue parts can drift apart there too. See RGB split.

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. Everything else is 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.

Six presets set every slider at once: Default, Liquid glass, Chromatic, Psychedelic, Subtle dissolve and Shockwave. You can swap in your own two pictures, and keep a PNG or a video.

Open Ripple transition Start here

In this guide

  1. StartWhat you need and your first ripple in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree presets caught mid-ripple, 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.