Particle disperse guide

Overview

Particle disperse breaks one picture into thousands of small points that drift away from the point you tap, while a second picture appears underneath.

A pale, crowned figure with folded hands breaking into fine dots over a second figure before red spires
The Ash preset partway through: points of picture A drift over picture B as it fades in.

It is an image transition between two pictures, A and B. See picture A and picture B. The kind of move is a dissolve, made with a particle system.

Picture A is laid out as a square grid of round points, each taking the colour of the pixel it sits on. See picture colour. Under the points, the picture itself fades from A to B, so there are no black gaps. See crossfade.

Each point moves along its own path: pushed away from the tap, swirled by curl noise, blown by a steady wind and pulled by gravity. Points near the tap fade first, so the break spreads outward. See reveal order and stagger.

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. Each point's place is worked out from that number alone on the GPU, in a vertex shader. See GPU particles.

After each run the direction flips: the next run breaks B into points over A.

Six presets set every slider at once: Ash, Ember rise, Sandstorm, Pixel burst, Dust settle and Detonate. You can swap in your own two pictures, and keep a PNG or a video.

Open Particle disperse Start here

In this guide

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