# Picture effects

> Make a picture glitch, break into cells, swell under the pointer or turn into a field of dots, and tune how each one plays.

Source: https://uxdeck.app/guide/picture-effects (checked against uxdeck on 16 October 2026)

Picture effects draw over a layer's picture as the page runs: **Glitch**, **Pixel distortion** and **Bulge** work on the picture itself, and **Dither** fills a layer with a field of dots. They are the heavier, more visual effects, so use one or two per page where they earn attention, such as a hero picture or a project cover.

Add one from the [Effects library](/guide/effects-library), then tune it in **Effects** in the **Prototype** tab.

## Settings they share

Every picture effect has these:

- **Plays:** what drives it.
  - **While hovering:** while the pointer is over the layer.
  - **As it appears:** as the layer comes into view.
  - **Always:** all the time.
  - **With scroll speed:** harder the faster the page scrolls.
- **Intensity** (0 to 100): how strong it is.
- **Speed** (0.1x to 4.0x, starting at 1.0x): how fast it moves.

The canvas shows the first frame. Press play at the top right of the selection to watch it move there; **Preview** and your site play it as set.

## Glitch

Blocks of the picture break up and the colours split, while hovering. It goes on an image, or any layer with an image fill.

A new Glitch plays **While hovering** at **Intensity** 60. It has only the shared settings: raise **Intensity** for a harsher break, lower **Speed** for a slower stutter.

## Pixel distortion

The picture breaks into cells that follow the pointer as it moves across, then settle back into place. It goes on an image, or a layer with an image fill.

- **Look:** three starting points. **Blocks** (the default) are big cells that settle fast. **Liquid** is a fine smear that settles slowly. **Mosaic** is a few large tiles. Change any number below and the look reads **Custom**.
- **Cells** (2 to 1000, 50 to start): how many cells across.
- **Reach** (0 to 100%, 25% to start): how far round the pointer the cells move.
- **Push** (0 to 100): how far each cell is pushed.
- **Settles** (50 to 99%, 90% to start): how slowly the cells return; higher takes longer.

On **Always**, the cells drift along a slow path of their own, and follow the pointer while it moves over the picture.

## Bulge

The text or picture swells towards you round the pointer, lit like a dome, and settles back as the pointer leaves. It goes on a text with words in it, an image, or a layer with an image fill.

- **Size** (2 to 100%, 20% to start): the dome's width, as a share of the layer's.
- **Swell** (0 to 100, 60 to start): how far it rises.
- **Light** (0 to 100, 50 to start): how strongly the dome is lit.
- **Follow** (0 to 2.0 s, 0.5 s to start): how far behind the pointer the dome trails.

A text swells only inside its own box, so give it some room round the words.

## Dither

A field of dots over a drifting cloud, or over the picture, and the pointer leaves a trail through it. It goes on almost anything: a frame, a shape or an image, though not on text, lines, arrows or notes. A new Dither plays **Always** at **Intensity** 70.

- **Pattern:** **Ordered dots** (the default) or **Halftone**.
- **Dot size** (1 to 64 px, 2 px to start).
- **Trail size** (0 to 2000 px, 90 px to start): how wide the pointer's trail is.
- **Dot colour** (black to start), **Trail colour** (#B3FDD0 to start) and **Paper colour** (the layer's own fill unless you set one).

Type a colour as a hex such as #B3FDD0, rgb(), hsl() or a colour name, or press the swatch to pick one. A colour the effect cannot read is flagged, and the effect uses its own until you fix it.

Dropped on a frame, Dither goes onto the frame itself; only on empty canvas does it make a new rectangle to fill.

## Catches

- **Glitch and Pixel distortion need a picture.** On a plain box they are refused; drop them on empty canvas to get a sample picture instead.
- **A video's first frame is not a picture** these effects can read.
- **Liquid asks more of a phone.** Past 300 cells the panel warns that it is heavier.
- **On the canvas, everything plays as Always** when you press play, since there is no hover or scroll there. Check the real behaviour in Preview.
- **Without WebGL, or for people who ask for less motion,** visitors see the picture as it is.

Picture effects are on every plan.