Aquifer
Field notes on the build

How this aquifer was built

A single canvas draws a cross-section of the ground and solves the groundwater equation on it in real time. Every drop of rain you add has to flow somewhere — and the water table shows where.

01 The concept

Aquifer is a working cutaway of the subsurface for anyone who has ever wondered where a well's water actually comes from — hydrology students, groundwater engineers, and the merely curious. Its single job: make the invisible water table visible, and let you watch it respond to rain and to pumping the way real groundwater does.

Rain soaks into a sand-and-gravel column, percolates down through the unsaturated vadose zone, and joins the saturated aquifer below. The water table rises, slopes down its hydraulic gradient, and — when a well pumps — sags into a cone of depression. A clay aquitard at the base holds it all up.

02 Palette

Argued from the ground itself: warm dry earth, a single luminous blue reserved for water, and a cool grey-violet for impermeable clay. The bright blue only ever touches lines and water — every scrap of small text runs on a derived soil-light ink that clears 4.5:1 on the dark ground.

Earth-dark
#14100C
The ground and the page. Near-black, warm-biased so it reads as soil, not ink.
Water line/mark
#4C93C4
The water table surface, saturated tint, motes. Lines only — never body text.
Grain-warm
#B89768
Sand and gravel grains, ground surface, dry pores. The texture of the medium.
Clay aquitard
#3B3540
The impermeable base — cool and dense against the warm earth above.
Soil-ink (body)
#E6DAC5
Derived body-ink at ~11:1 on earth-dark. All primary copy.
Water-ink (text)
#7EB6DD
A lightened water tone for links and live readouts — passes contrast where the mark blue is borderline.

03 Type

Aquifer
Spectral · display

A transitional serif with a slightly geological weight — bookish but not fragile. Used at large sizes with an italic sub-line for the one moment of typographic contrast against the mono grid.

15.4 m
IBM Plex Mono · text & data

Everything instrument-like — readouts, labels, the depth ruler, field notes — runs on Plex Mono with tabular figures, so the numbers tick without reflowing. It reads as a field log.

04 The signature

The water table is a free surface — one height value per column across 180 columns — evolved by the Boussinesq groundwater equation (the Dupuit approximation of Darcy flow). Each step moves water between columns in proportion to the local head gradient times the saturated thickness, adds recharge from infiltration, and subtracts pumping at the well. Fixed-head boundaries hold a gentle baseline gradient, so at rest the table always sits mid-section and flows.

Rain is real recharge, not decoration: drops in the sky spawn infiltration motes that fall through the vadose zone and, on reaching the table, each deposits a little water into its column and rings a meniscus ripple. Pump the well and the same equation does the rest — the sink term pulls the surrounding table down into a cone of depression, steepest at the casing. A faint dye tracer drifts the full flowline from the recharge edge toward the well, so you can read the actual path the water takes.

Rendering is layered canvas 2D: a static grain field tinted wet or dry per frame against the table height, a translucent saturated fill, hatched clay, particle systems for infiltration and Darcy flow, and the luminous table line with a bright core on top.

Solver columns
180
Equation
Boussinesq
Grains / frame
620
Libraries
none

05 Iteration log

Pass 1Craft

Tightened the mono/serif scale and the readout grid, and unpicked a leftover double-frame() loop hack from the first draft into one clean rAF function. Caught the hydraulic-gradient readout displaying 0.155 — a head drop divided by the wrong length; re-based it on ~300 m of aquifer so it now reads a realistic 0.016. Verified the ink/line split: no small text sits on the mark-blue.

Pass 2Depth

The cone of depression — the whole point — was too shy: pumping barely dimpled the table. Raised the well's sink strength and sharpened its distribution so the surface clearly buckles into a cone that deepens as it pumps, with a dashed rest-line and label for the second read. Reworked the dye tracer from a flat horizontal streak into a fading, descending flowline that curves toward the well when pumping — the detail you only notice on a second visit.

Pass 3Hardening

Confirmed 375 px stacks with zero real overflow (nav and wordmark inside the box, scrollWidth clean). Reduced-motion iterates the solver to a settled steady state and draws one static, gently-sloping water table — flowing, not blank — with no rAF. Checked DPR cap at 2, container-sized resize, rAF pause on document.hidden, :focus-visible rings, and a zero-console-error headless run at rest, while pumping, and while raining.