HalftoneBackdrop

Options

paper #f6f3ea

css colour

The stock the inks are printed on. An explicit colour rather than `auto`, which adopts the page's own background and is the right default for almost every other item here. A halftone is ink on paper: the dots are a partial covering that lets the stock through, so on a near-black ground there is nothing for them to be a partial covering of and two saturated inks come out muddy. Pass `auto` if you do want it to take the page it is dropped on.

inkA #1a2a8c

css colour

First plate. A desaturated near-black reads as ink; pure black reads as a hole.

inkB #e5007a

css colour

Second plate. This is where the colour lives, so change this one first.

scale 1.6

0.3 to 6, good: 1.2 to 3

Size of the ink shapes. Lower is broader and calmer.

screen 16

2 to 40 dots / 100px, good: 5 to 14

Halftone frequency. Above about 20 the screen stops reading as a screen and starts reading as noise.

angleA 15

0 to 180 deg

Screen angle of the first plate.

angleB 75

0 to 180 deg, good: 45 to 105

Screen angle of the second plate. Keep it at least 30 degrees from angleA. Closer than that and the two screens beat against each other.

drift 5

0 to 30 px, good: 4 to 12

Registration error: how far the plates slide apart over a loop. Zero is a clean print and much duller.

coverage 0.2

0.1 to 0.9, good: 0.35 to 0.6

Ink density. Past 0.7 the plates flood and the paper stops showing through.

grain 0.35

0 to 1

Paper tooth. Static by design. Animated grain flickers, and a flicker this fine is what WCAG 2.3.1 exists to prevent.

period 30

2 to 120 s, good: 5 to 25

Seconds for one full loop. The animation is exactly periodic over this. Slow on purpose: the plates should drift apart over half a minute, which reads as a press settling rather than as something happening.

reducedMotionTime 1.4

0 to 120 s

The single frame shown when the user prefers reduced motion. Pick one that composes rather than the frame at zero.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1.4 ms · 1 context

Pinned to

v0.13.0

• WebGL2 for gl_VertexID; there is no WebGL1 fallback and none is planned
• Falls back to a still frame under prefers-reduced-motion, handled in the runtime
• One full-screen triangle, four octaves of value noise, two halftone lookups
• No render targets, no textures, no allocations per frame