A civic instrument,
not a museum label.
The Polder Board imagines a Dutch water authority’s public ledger as a Delftware tile that has become mechanically alive.
The emotional center is a simple national paradox: the cultivated land sits beneath the sea, yet feels orderly rather than precarious. Delft blue provides precision and continuity; polder green belongs to the land being protected; brick and brass mark the human mechanisms between them. The page moves from the playable cross-section through daily measurements, a NAP datum lesson, the mill roster, and credible board minutes. Invented names, resolutions, equipment figures, and dates make the institution feel inhabited across centuries.
The machinery in the glaze.
Living cross-section
The main illustration is one inline SVG in index.html. Its sea, stepped boezem channels, dyke, fields, mills, screws, and datum line share a constrained line language. tick() in main.js computes tide and storm surge on each animation frame, updates the outer-water path, rotates the tide hand and wind needle, and writes measured levels into the ledger bar.
The brass sounding traverse
The range control beneath the landscape calls setSurvey(), moving a fine brass probe across eight surveyed stops. Each position reveals a named station, NAP level, and physical role; the same reading is announced after keyboard or touch input. It turns the illustration from scenery into an inspectable section drawing.
Screws that visibly lift
Each Archimedean screw combines a brass casing, a blue shaft, animated helical flight marks, and moving water beads following an upward animateMotion path. setMills() couples sail rotation, the cross-section, and the magnified lift instrument, keeping every carried pocket legible even on a phone.
Storm drill and gentle failure
endStorm(), setGate(), and the frame loop form a small operational model. A surge raises the sea. Open gates admit water; turning mills restore capacity. If the hold meter falls, the fields darken, electric auxiliaries engage, and the system steadily recovers. Buttons expose pressed state, while setMode() and an ARIA live region make the state legible in color, text, and speech.
Tide cycle governs the gate.
Keeper sequences mills, gate, surge.
Fields darken; auxiliaries recover.
Surface and motion
A fixed fractal-noise SVG creates imperfect glaze without an image request. Borders, hatched land, offset papers, brass fittings, and oxide-blue and green fields create depth. The load moment reveals ledger marks, proclamation, then the waterworks. Continuous motion pauses when the page is hidden; reduced-motion users receive a still, operable instrument.
Glaze, earth, ink.
DM Serif Display carries proclamations and landscape-scale headings. Zilla Slab makes body copy feel both technical and humane. Chivo Mono labels every level, time, code, and instrument state. Tight display tracking contrasts with the mono face’s widely spaced administrative notation.
Prompt for a system,
not a style sample.
Ask an AI agent to build a self-contained civic website around one working physical model. Specify the institution, material tradition, engineering logic, exact palette, and what the visitor must operate. Require inline SVG or canvas, visible cause and effect, measured fail-and-recovery states, self-hosted type, and a document-like content trail after the interaction.
Finally, insist on screenshot inspection at phone, tablet, and desktop widths. The distinctive result comes less from adding effects than from ensuring typography, simulation, copy, and surface texture all express the same institutional idea.