MeshGradient

Options

base #fbfaf4

css colour

What the colour layers are laid over, and what shows wherever none of them reaches. Usually the palest of the four, because it is doing the job the paper does in print.

one #ffc9e3

css colour

The first colour layer, laid over the base. Keep the three within reach of each other on the wheel and mind what they make where they overlap: the first palette here had a peach under a cornflower, and peach under blue is tan, so the frame had a patch of mud in it that neither colour explains.

two #a9d8ff

css colour

The second layer, over the first.

three #cdbcff

css colour

The third, and the one that shows least, because it is only drawn where its own field is high.

scale 0.75

0.3 to 4

Size of the shapes. Lower is fewer and larger, which is what a hero wants: the shapes should be bigger than the headline sitting on them, not a texture behind it.

warp 0.42

0 to 1.2

How far the field is bent before it is read. At 0 the layers are parallel bands, which is the single thing that gives away most attempts at this effect.

softness 0.6

0.02 to 1

Width of the transition between one layer and the next. This is the control that decides whether the result reads as a gradient or as a map of three countries.

relief 0.16

0 to 0.6

How much the field is lit by its own slope. Small, and the thing that makes it look like a surface being folded rather than a picture being blurred. At 0 it is wallpaper.

grain 0.3

0 to 1

Grain, which on a field this smooth is doing real work: it breaks the banding that eight bit colour leaves across a slow gradient. Static rather than crawling.

period 36

12 to 120 s

Seconds for one full cycle, and the pace control. Long on purpose: this sits behind a headline, and a backdrop has to survive being ignored.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~0.2 ms · 1 context

Pinned to

v0.12.0

• Three ingredients and nothing else: layered waves for scale, a domain warp so the bands bend around each other rather than staying parallel stripes, and shading taken from the slope of the same field
• The shading is the part most versions of this leave out. On the original the plane is a mesh whose vertices are displaced, so the light follows the displacement; here the same derivative that would have moved a vertex lights the result instead. Without it the whole thing flattens into wallpaper
• The diagonal edge people associate with this effect is not in the shader and should not be. On the original it is the container, skewed with CSS and clipped, which is two lines and is in the recipe
• Every moving term is a sum of waves whose time coefficients are whole numbers of turns over the period, so the loop closes exactly. Noise advanced by time never returns to its first frame and the recorder needs it to
• The warp is frozen while the layers drift through it. Warping the warp as well doubles the measured change per frame for something that reads as the whole image sliding
• Declared as working on either ground. The default palette is warm paper with pastel layers; the same effect with dark colours over a dark base is the version everybody else ships
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Five fields of four waves each, so forty sines and forty cosines per pixel, and no textures, noise lookups or render targets
• The cost is the pixel count rather than the shader, so a full-screen canvas at 2x device pixel ratio is the thing to watch