Inside Room 83 of 175: The Making of “Thames Mudlark — The River Gives Up Its Past”

Discover the Hidden Stories of the Thames

In this AI-crafted exhibit, “Thames Mudlark — The River Gives Up Its Past,” an immersive web experience, the river’s secrets are revealed through an innovative, tide-controlled interface. The signature move? A dynamic tide that responds in real-time to both the clock and user input, gently withdrawing or revealing artifacts from the riverbed, as if the river itself is breathing and revealing its history through subtle motion and layered visual cues.

Design Foundations: Palette, Type & Interaction

The visual language employs a muted, earthy palette inspired by river silt, fog, linen, and Delft blue, creating a subdued, documentary feel. Typography is carefully chosen: a large, soft-edged newsreader font for labels, echoing the rhythm of cataloging, while Space Mono supplies a technical, neutral tone for data and annotations. The core interaction hinges on a signature technique: a tide-responsive water scale, achieved through a custom JavaScript loop that synchronizes water movement with time and user controls. The scene’s scenery and artifacts are meticulously built with CSS, SVG, and Canvas, eliminating reliance on stock imagery. Instead, abstracted forms—ripples, silt, linen weave—are generated procedurally, reinforcing the site’s documentary yet artistic tone. The interaction scheme emphasizes careful observation: tools like erasing grime layers, lifting objects, and inspecting evidence labels foster a deliberate, contemplative engagement that echoes traditional mudlarking.

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 83 of 175, “mudlark”):
THAMES MUDLARK — licensed foreshore historian. Aesthetic: river-fog documentary; finds laid on linen. Palette: thames silt brown #5c5142, fog grey, linen cream, one Delft-shard blue accent, clay-pipe white. Fonts: newsreader (display), epilogue (body), space-mono (find codes). SIGNATURE: WORK THE FORESHORE — a tide-ruled strip of riverbed where the WATER ACTUALLY WITHDRAWS on the tide clock, exposing glints; brush/hover to clear mud from a find (blur+grime wipes away in strokes) then lift it to the finds tray: each (clay pipe 1680, Tudor dress pin, Roman tessera, 1953 penny) gets a museum label with layer-date reasoning. Tide table gates when the “beach” is workable, PLA license note, the ethics card (report treasure). Unforgettable: the river giving something up to your brush.

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/mudlark/

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 Canvas: The Creation Pipeline

The process began with a detailed field guide, informing a three-phase development approach: initial build, rigorous critique, and final approval by an art director. The site’s core mechanic—a tide-sensitive water movement—was first implemented through a core JavaScript loop, translating tide data into visual transforms. Next, the design was refined through relentless critique, ensuring interactions were intuitive yet subtly layered. Finally, an art director verified the site’s fidelity to the thematic and aesthetic goals, emphasizing the documentary feel and the significance of each recovered object. Throughout, the focus was on creating a seamless, atmospheric experience that invites viewers to explore the river’s hidden past as an active, living record.

The full build notes live in the room’s design guide.

Experience the Thames Mudlark

Visit the full immersive exhibit and explore all 175 field records at the dedicated hub. Dive into the layered, tide-controlled world where history surfaces with every ebb and flow, built entirely by AI for a truly unique digital artifact.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 77: The Foley Stage — Perform the Picture
• Room 76: The Immortal Game — London, 1851
• Room 80: Paper Flight Lab — Fold, Trim & Fly

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.

Powered by Thorsten Meyer AI