Building the field: one ribbon behind the whole site

The background you are reading over is not a video or an image. It is one fragment shader running on a single triangle that covers the screen. It draws one thing: a ribbon of fine strands that drifts slowly through plain dark ink, and takes the colour of whichever of our products is on screen.

The first version gave people headaches

Our first field filled the whole screen with contour lines, like a topographic map that never stopped moving. In a screenshot it looked great. On a real screen, fine high-contrast lines drifting everywhere make the eye vibrate, and the first person to look at it for a minute said so.

So we kept the idea of light moving through ink and threw the texture away. Now one form carries all the light, and the rest of the screen stays dark.

Strands, not glow

The ribbon is a family of curves. For each pixel, the shader works out where it sits across the ribbon, from -1 on one edge to 1 on the other, and draws evenly spaced strands in that space. fwidth keeps every strand exactly one device pixel wide:

float v = (p.y - centre) / halfWidth;   // -1..1 across the ribbon
float S = (v * 0.5 + 0.5) * 46.0;       // 46 strands
float f = fract(S);
float d = min(f, 1.0 - f);              // distance to the nearest strand
float aw = fwidth(S);                   // how much S changes per pixel
float line = 1.0 - smoothstep(aw * 0.45, aw * 1.45, d);

The ribbon's width rises and falls along its length on a smooth wave, and the light gathers where it narrows. An earlier version let the ribbon pinch to a point to fake a twist. The strands snapped together into a hard seam there, so we took it out. The width never drops below about half, and the strands never crowd closer than a few pixels.

Calm by design

• Motion is slow: one full drift takes about a minute.
• The grain is static. Animated grain reads as shimmer.
• Each section routes the ribbon differently, so the light moves through the page. On phones it runs low along the bottom edge.
• When nothing changes, the loop doesn't draw at all.
• Pause motion freezes the field and remembers your choice. With reduced motion turned on, the field never animates.

If you are planning something like this for your product, tell us about it.