Simplex Noise

What it does

It generates a flowing field from your colours, and then posterises it into a set number of bands — so instead of a smooth gradient you get distinct steps of colour moving through each other.

It's the difference between an airbrush and a screen print.

Controls

8 controls.

Working through the panel

Steps and Softness

Steps is the control that defines this component. At one you get flat blocks. At two or three you get the poster look it starts on. Raise it toward ten and the bands get fine enough that it approaches a smooth gradient again.

Softness then works against that. At zero the edges between bands are hard, which is the point. Raise it and they blur, which gives you a middle ground between poster and gradient.

Those two together are the whole personality. Set them before you touch anything else.

Colour and framing

Colors is your list — and this component rewards fewer colours than you'd think. Because the field is banded, every colour you add is clearly visible as its own region, so four strong colours read better than eight similar ones.

Scale zooms the pattern, Rotation turns it, and the two offsets move it within the frame. Use the offsets when a band edge lands somewhere awkward behind your content.

Speed is the drift, and zero freezes it.

Performance and limits

• It stops rendering when it scrolls out of view, so an instance below the fold costs nothing until the visitor reaches it.

• Static rendering is handled, so canvas thumbnails and exports show a settled frame rather than a blank box.

• It renders with WebGL at whatever size and pixel density the frame needs — there is no image to download and no resolution to outgrow.