Discover a digitally crafted coastal research station that blends scientific rigor with tactile life, all generated through AI design techniques. This virtual exhibit captures the essence of intertidal zones—dynamic, unpredictable, and alive—using a signature approach that eschews traditional imagery in favor of primitive, handcrafted visualizations.
The development begins with constructing a responsive canvas ecosystem, layering radial gradients, irregular basalt shapes, and animated caustic lines through code. The second phase involves rigorous critique, testing organism behaviors and tide responsiveness to refine natural interactions and visual coherence. Final approval from the art director ensures the scene captures both scientific authenticity and aesthetic vitality, guided by the detailed manual that emphasizes behavior before decorative flourish.
The full build notes live in the room’s design guide.
The Palette and Typography Interplay
The color scheme centers on deep basalt hues, oceanic teals, and coral accents, evoking a vibrant shoreline environment. These tones are paired with a type system that combines rough, technical grotesque headlines with clean, legible labels, creating a visual tension that underscores the station’s experimental nature. All styles are managed with CSS variables to ensure consistency and responsiveness across devices.
The Signature Technique in Action
The core signature lies in the ecosystem simulation, which relies solely on primitive SVG and canvas primitives—no external images. For instance, anemones respond to pointer proximity with abrupt retraction and gradual re-extension, achieved through quadratic curves whose reach and sway depend on interaction openness. Crabs reposition themselves between shells, and limpets clamp onto rocks—all dynamically animated with JavaScript that detects user input and tide cycles, which are mapped onto a cosine curve to reflect real-time water levels. This approach fosters a tactile, almost organic feel, balancing institutional observation with untamed marine life.
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 61 of 175, “tidepool”):
THE INTERTIDAL SOCIETY — a rocky-shore field station. Aesthetic: bright coastal field guide; wet rock. Palette: rockpool teal #2e7f74, wet basalt #2b2f31, anemone coral #e0645c, barnacle bone, foam white. Fonts: bricolage-grotesque (display), epilogue (body). SIGNATURE: LIVING POOLS — canvas tidepools where anemones’ tentacles sway and RETRACT when your cursor touches them (poke = shy close, slow reopen), hermit crabs relocate between shells, limpets clamp; and the TIDE CLOCK is real: a 6-hour cycle (scrub or wait) drains and floods the pools, exposing different species zones (zonation diagram syncs). Field notes, species cards with tide-zone badges, “adopt a pool” ledger. Unforgettable: the anemone flinching from your finger.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/tidepool/
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.
Experience the Live Coastal Lab
Visit the AI-crafted virtual intertidal zone to explore its responsive ecosystem firsthand. Browse through the comprehensive collection of 175 field stations at the central hub, and immerse yourself in a tactile digital representation of coastal science—built entirely through AI-driven design.
Visit the live room → · Browse all 175 rooms
Previously in Wing III
- Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
- Room 58: The Atlantic Cable Company — Race the Signal
- Room 59: The Meridian Carousel — After Dusk, Since 1908
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.
As an affiliate, we earn on qualifying purchases.
