Picture effects

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, 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.