Discover the Polder Board: An Interactive Civic Instrument
Room 71 unveils an AI-crafted, interactive representation of Dutch water management — a digital relic that reflects the ingenuity of land reclamation. Its standout feature? A meticulously animated cross-section of the waterworks, allowing visitors to manipulate tides, operate mills, and adjust sluice gates—all in real time—illustrating the complex machinery that keeps land dry beneath the sea.
Design Elements and Technical Interplay
The site employs a restrained color palette rooted in traditional Delftware hues—deep Delft blue for clarity, polder green for land, and brick and brass accents emphasizing mechanical components. The interface balances informational content with visual cues, integrating inline SVG elements that depict the water channels, mills, and sluices with precise line work. Interactive controls—such as sliders and buttons—are crafted to update the SVG in real time via JavaScript functions that simulate tide levels, mill rotations, and gate operations. The typography combines a serif display font for proclamations with a monospaced typeface for technical labels, creating a hierarchy that feels both authoritative and approachable. The entire experience is built to be self-contained, with all interactions and animations managed locally, ensuring accessibility and responsiveness across devices.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 71 of 175, “polder”):
THE POLDER BOARD — Dutch water authority, est. 1533. Aesthetic: Delftware engineering; water ledgers. Palette: Delft blue #27548f on white glaze, polder green #5a7247, brick, brass sluice fittings. Fonts: dm-serif-display (display), zilla-slab (body), chivo-mono (levels). SIGNATURE: KEEP THE LAND DRY — a living cross-section from sea to polder floor (below sea level, marked): windmills’ sails spin with the wind gauge, their Archimedean screws visibly lift water between stepped channels, sluice gates open/close on the tide clock; a storm event raises the outer water and you must sequence mills + gates to hold the line (gentle fail state: fields darken, pumps catch up). All illustrated in Delft-blue linework like a painted tile come alive. Water-board minutes, mill roster, NAP datum explainer. Unforgettable: the screws actually lifting.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/polder/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
From Concept to Certification
The development followed a three-step pipeline: initial construction based on the guide’s directives, rigorous internal critique focusing on clarity and interaction fidelity, and final approval by an art director ensuring the site’s educational and aesthetic integrity. The guide emphasized building a system that is both functional and transparent, prioritizing cause-and-effect visuals, measurable states, and a content trail that documents each interaction—highlighting the site’s role as a public record of water management operations.
The full build notes live in the room’s design guide.
Explore the Waterworks
Visit the live site to experience the detailed simulation firsthand, and browse all 175 rooms to see how AI constructs engaging, educational civic exhibits. Dive into the mechanics of land reclamation and witness history come alive through interactive storytelling.
Visit the live room → · Browse all 175 rooms
Previously in Wing III
- Room 66: The Comb Works — Bees, decoded
- Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
- Room 68: The Belfry | Eight Bells, Endless Changes
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
interactive water management simulation kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
water engineering educational kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
digital water management display
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
