HalftoneBackdrop

Options

paper #fbfaf4

css colour

Paper colour. Set this to your own background or the panel will not sit in the page.

inkA #363630

css colour

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

inkB #c44400

css colour

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

scale 1.9

0.3 to 6, good: 1.2 to 3

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

screen 8

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

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 5

2 to 120 s, good: 5 to 25

Seconds for one full loop. The animation is exactly periodic over this. The default is 5 so that the preview video is a whole cycle. Raise it to 15 or 25 for a page background you want to forget is moving.

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

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1.4 ms · 1 context

Pinned to

v0.6.2

• 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