Image shatter guide

Overview

Image shatter breaks one picture into pieces of glass that fly apart from the point you tap, showing a second picture underneath.

A veiled figure holding a small bottle shows through the middle of a faded mosaic of pale, pearl-covered pieces that fill the rest of the frame
The Crystallize preset partway through: pieces of picture A fade, and picture B shows through in the middle, where the break began.

It is an image transition between two pictures, A and B. See picture A and picture B. The picture that breaks is on top; the other one waits, still, underneath.

The pieces come from a Voronoi split: the picture is cut into cells, each holding the points closest to one scattered seed. Each cell becomes a shard.

Every shard gets its own direction, turn and start time. It flies away from the tap, turns as it goes and fades out near the end of its flight. Shards close to the tap leave first. See break order.

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 breaks B to show A.

Six presets set every slider at once: Crystallize, Explode, Sliver wave, Mosaic fall, Frost break and Dust. You can swap in your own two pictures, and keep a PNG or a video.

Open Image shatter Start here

In this guide

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