Within a digital recreation of a pre-dawn coastal forecasting room, this AI-built site offers a visceral glimpse into the meticulous art of surf prediction. Its signature feature is a dynamic, physics-based ocean simulation that responds in real-time to user controls, immersing visitors as if they were seasoned forecasters peering over the horizon at sunrise.
The development followed a straightforward three-stage pipeline: first, constructing the interactive ocean simulation by translating physical principles into a WebGL canvas, guided by a detailed manual on wave modeling; second, subjecting the output to rigorous critique focusing on realism, responsiveness, and clarity, refining controls and visual cues accordingly; finally, an art director certifies the visual coherence, ensuring the station’s elements evoke authentic coastal forecasting environments. Throughout, an AI guide provided real-time suggestions and adjustments, maintaining fidelity to the manual’s technical and aesthetic standards.
The full build notes live in the room’s design guide.
The site employs a restrained color palette of slate, teal, foam, yellow, and coral, creating a sober, maritime atmosphere that eschews tropical escapism. Its core interaction hinges on a custom WebGL-powered canvas, which visualizes Gerstner waves—mathematical sine and cosine functions—that adjust seamlessly as users tweak parameters like swell height, period, and direction. Supporting vector graphics—SVG overlays—depict tide charts, break diagrams, and field marks with precise, line-based illustration. Typography balances a technical tone with clarity, using the carefully chosen Sora and Chivo Mono fonts, with the latter handling labels and measurements to reinforce the site’s functional aesthetic. The interface integrates inline controls, real-time data plots, and animated instruments, all built without external assets, making heavy use of CSS for styling and layout. This design emphasizes direct manipulation of the wave model, ensuring the experience feels tangible and rooted in oceanic physics.
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 79 of 175, “swell”):
THE SWELL BUREAU — surf forecasting station. Aesthetic: dawn-patrol utilitarianism; tide charts on the wall. Palette: pre-dawn slate #2c3540, swell teal #3e7d8c, foam white, buoy yellow, sunrise band coral. Fonts: sora (display), chivo-mono (buoy data). SIGNATURE: GERSTNER WAVES, LIVE — a WebGL/canvas ocean built from summed trochoidal waves whose parameters are the forecast: sliders for swell height/period/direction and wind chop VISIBLY re-shape the sea (long-period groundswell organizing into corduroy lines vs. wind slop), a buoy bobbing with authentic response; a break-quality readout (“6ft @ 14s WNW — pumping”) updates with your settings. Tide curve for the day, spot cards (reef/point/beachbreak behaviors), the dawn-patrol checklist. Unforgettable: FEELING what “period” means.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/swell/
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 immersive dawn-patrol forecast station firsthand by visiting the live prototype. Explore all 175 conceptual sites in the hub to see how AI can craft compelling, educational digital environments that connect surf culture with scientific precision.
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 78: The Nib Works — Hand-ground fountain pen nibs since 1911
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.
