WINDWARD is a fictional surface-wind observatory. Its one job is to make an invisible field legible at a glance — thousands of tapering strokes advected through a live wind field over a dark relief, gusting gold where the flow squeezes through the passes, with a corner instrument that sounds the bearing and knots anywhere you point.
One dusk ground, one bright accent reserved strictly for the moving air, and a derived slate ink for every word — so nothing small is ever set in the line colour.
An engineered grotesque with wide, upright letterforms that read like instrument signage. It holds a wordmark at 12rem without wobble, and the tight cut keeps a huge headline dense rather than airy.
The measurement voice. Tabular figures keep the bearing, knots and coordinates from jittering as they tick, and the mono width signals "this is a reading, not a claim."
A single seeded value-noise height field is the source of everything. Sampled on a grid and run through marching squares, it becomes the SVG contour relief — nine elevation levels, majors every third line brighter. Sampled again for its gradient, it becomes the wind vector grid: a prevailing flow deflected to follow contours around ridges and accelerated through the low saddles by a venturi term.
The signature is the streaming field. A few thousand massless tracers are advected through the vector grid by bilinear sampling; each frame the canvas is faded with a destination-out wipe rather than a paint, so old trails erode toward transparency and the SVG relief shows through underneath. Stroke length, width and opacity read the local speed; the colour lerps from teal toward gust-gold as a coherent gust front marches diagonally across the range every ~18 seconds. Point anywhere and a live sample reports the wind the way a station would — the compass bearing it blows from, in knots.
No libraries — just canvas 2D, inline SVG and the noise function. Motion caps devicePixelRatio at 2, sizes to the container, rebuilds the relief and grid on a debounced resize, and pauses the loop when the tab is hidden.
The strokes read grey, not teal: alpha followed a speed² curve that starved the mid-field. Replaced it with a linear floor (0.22 + 0.5·speed) so the teal identity carries. Added a soft radial scrim behind the hero copy so the slate body text holds contrast over the busiest strokes without dimming the field elsewhere.
Enriched the signature with a marching gust front — a travelling band that flares gold through the passes and gives the field a second-read pulse. Added a cursor "stir" that brightens the air you point at, plus a pulsing sampling ring at the crosshair — and deliberately kept the stir out of the measured readout so the knots stay honest.
Reworked 375px: the hero anchors to the top and the supplementary sub-paragraph is hidden so the floating readout never overlaps copy. Confirmed the reduced-motion path renders a settled frame of integrated streamlines (no rAF) rather than a blank, and re-checked focus states, DPR cap, hidden-tab pause and the debounced resize rebuild.
Designed & built by Sapience Analytics — part of the Generative Assets collection.