Cinemagraph guide

Overview

Cinemagraph makes a still photo move in one place only: the part you paint.

A drawn lake at dusk under an orange sky and dark hills, its water tinted blue where it is painted to move
The lake sample with its water painted and Show mask on: the blue tint marks the part that moves.

A cinemagraph is a photo where most things stay still and one part keeps moving: water, a flag, a flame. The stillness around it is what makes the motion catch your eye.

You mark the moving part with a brush. That paint is a motion mask: a hidden black-and-white picture the same size as your photo. White means move, black means stay, and grey means move a little. A soft brush gives soft edges; see mask softness.

A shader on the GPU then draws every pixel about sixty times a second. For each pixel it reads the mask. Where the mask is white, it takes the colour from a spot a little way off in the photo, and that spot shifts as time runs. This is a UV offset: the picture seems to ripple while the frame stays put. Where the mask is black, the pixel is read from its own place and does not move.

Five effects move pixels this way, each with its own pattern: Flow, Wave, Breathe, Shimmer and Sway. The sixth, Flicker, moves nothing and changes brightness instead.

Open Cinemagraph Start here

In this guide

  1. StartWhat you need, your first moving photo, and the brush.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures from the lake sample and the settings behind them.
  4. Keep your workThe PNG, the copy, and the video.
  5. KeysPause, brush, size and mask from the keyboard.
  6. HelpWhat to do when something goes wrong.

The tool opens with a drawn lake at dusk, and its water is already painted, so the Flow effect is moving from the first second.

It needs WebGL 2. The photo is worked on in your browser and never leaves your device.