PLAYA

Field guide · how it was built

The drought, rendered

PLAYA is a fictional desiccation survey of Kestrel Flat, a dry lake that hasn't taken measurable rain in years. Its single job is to make deep time legible: to let a visitor watch a mud crust dry — contracting into polygons, curling at every rim, and whitening with salt — over seasons compressed into seconds. The audience is anyone who has stood on a cracked lakebed and wondered how long it took.

The signature

The crust is a single raw-WebGL fragment shader — no three.js, no textures. A fullscreen triangle runs an Inigo-Quilez-style Voronoi border metric: a first pass finds the nearest cell centre, a second measures the distance to the edge between it and its neighbours. That edge distance is the crack. The point field is domain-warped by value-noise fbm so the polygons read organic rather than gridded.

A single dryness uniform drives everything, grown on an exponential curve — dry = 1 − e^(−0.108 · seasons) — so early seasons crack fast and late ones asymptote, the way a real playa does. Rising dryness widens the crack mask and the curl rim, deepens the relief, and pushes the whole surface toward salt-white. Above 0.58 a second, higher-frequency Voronoi layer fades in, so fresh hairline cracks visibly propagate through the plates as the drought deepens.

The curl is the trick that sells it: using OES_standard_derivatives, the screen-space gradient of the plate-height field becomes a surface normal, lit by a low raking sun. Plate interiors stay flat and bright; rims — where the gradient is steep — catch the light and lift, while crack troughs fall into shadow. Turn up the dryness and the relief deepens, so the flat visibly becomes a tilework of shallow, upturned dishes.

Palette — argued from the salt flat

Playa tan
#D8C8A6
Damp clay — the base tone of the crust and the site's accent surface.
Cracked shadow
#5A4A34
The open fissure. Reserved for lines and marks, never small text.
Salt white
#F2ECDC
The mineral rime of gypsum and halite left as brine evaporates.
Silt ink
#5C4A2E
The small-text ink — darkened from the concept's silt so body copy clears 4.5:1 over the warm paper.
Rim brass
#A8792E
A warm ochre kept for live marks only — the pulse dot, the season bar, the plate-map overlay.

The concept's danger was contrast: a bright playa is a light background, and gold-on-tan is the collection's most repeated readability failure. So the accent (brass) drives only lines and marks; every run of text uses a dedicated dark ink (silt-ink or the stronger #3B2E14) that clears 4.5:1.

Type

Archivo 800
Display — grotesque, built for tight-set masses
Space Mono
Readouts — the survey instrument's numerals

Archivo at 800 sets the wordmark and the monumental PLAYA — a dense, geometric grotesque that packs into a tight, cracked-earth mass at display size, the one moment of typographic bravery. Space Mono handles every reading — seasons, days, humidity — giving the drought instrument the deadpan authority of a logged field measurement.

Techniques

Raw WebGL fragment shader for the crust (Voronoi border + fbm warp + derivative-lit curl). DOM & CSS for the whole instrument panel and layout. An inline SVG polyline sparkline for the humidity strip, shifted and redrawn in JS each half-second. No animation library — the loop is a plain rAF with a clamped delta, paused on document.hidden and when the field scrolls off-screen. DPR is capped at 2 behind a 1500px quality clamp; a WebGL-context failure drops to a static CSS crack scene.

Iteration log