Get sports gear delivered free — and shop member deals
- Fast, free delivery on millions of items
- Access to Prime Big Deal Days deals on October 6–7
- Prime Video, Amazon Music and more included
A yacht-club ceremony, built to catch the wind
“Auric Cup XXXVII — Regatta Control” is an AI-built exhibition piece for a fictional elite regatta—not a real company or sporting event. Its design stages a clash between polished race-day tradition and the force of high-speed foiling. The signature move is a code-made wind field that streams across the whole page, tying its editorial layouts and race instruments into one shifting atmosphere.
Instead of relying on sailing photographs, the room constructs its visual world from HTML, CSS, SVG, and Canvas. The result feels less like a static event brochure and more like a control room where the weather is always present.
interactive wind simulation web app
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
From brief to race-day system
The room’s guide describes a three-pass pipeline: build the experience, critique it mercilessly, then certify it through an art-director pass. That guide documents the visual system and interaction logic, including the code-only artwork and accessibility considerations; the finished site was built by AI, which is central to this exhibition’s story.
The full build notes live in the room’s design guide.
Reading the room: restraint under pressure
A deep navy background supplies the uninterrupted sea. Foam white gives sails and text a crisp, almost ceremonial finish; gold suggests both polished hardware and the cup itself. Protest red is held back for moments when the interface signals a breach. That restrained palette helps the page distinguish sporting ritual from race-control urgency.
Typography reinforces the split. Italiana supplies an elegant, club-house voice for the display headlines, while Archivo handles the compact labels, controls, and telemetry. Large editorial type sits alongside tightly organized data, and the yacht graphic pushes beyond the grid as if it were accelerating past the page’s edge.
The signature technique: a shared flow field
The moving wind is drawn in Canvas as streaks whose paths respond to a lightweight flow calculation. A WebGL path batches their geometry into a dynamic buffer; the visual effect is a layer of airflow that crosses sections without getting in the way of page interaction. Pointer movement shifts the wind, adjusts the SVG sail trim, and gives the yacht a slight heel. Scrolling also changes the apparent wind, while some sail elements luff when the visitor moves against its direction.
That motif is more than decoration: it gives the different sections a common physical logic. The layline map, meanwhile, is an interactive SVG control. Dragging its handle changes the wind angle and velocity made good; keyboard controls offer another way to operate it. If the approach crosses the design’s penalty threshold, the interface switches to protest red and announces the state change. A separate foil control updates its readouts and reveals a vapor effect at high settings.
The room also accounts for comfort and device behavior. Reduced-motion settings suppress the wind and flutter effects, and hidden-tab changes pause and restart animation work. These implementation choices keep the spectacle connected to a functioning interface rather than a background-only flourish.
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 130 of 175, “regatta”):
REGATTA — the 37th defense of the AURIC CUP, foiling monohulls (fictional). Aesthetic: yacht-club elegance colliding with 50-knot carbon violence. Palette: regatta navy, foam white, hull gold, protest-flag red. Fonts: italiana (club elegance), archivo (race data). SIGNATURE: WIND FIELD — a live vector wind field (WebGL streaklines) flows across the entire site; the hero yacht’s sails trim in response, and content cards LUFF (flutter at the edges) when you scroll against the wind direction. A race-course map with draggable laylines (sail too deep and the header punishes you), foil cross-sections with cavitation notes, crew-position manifest (grinders’ heart rates), the nationality-clause lore and cup-hoisting protocol. Unforgettable: content that flutters when you sail it wrong.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/regatta/
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.
Take the room for a sail
Visit the live Auric Cup Regatta Control room to explore its wind field, layline, and race-day controls. Then browse all 175 rooms at the exhibition hub for more AI-built design experiments.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 127: Meridian 843 | The Measured Mile
- Room 129: KIRIN EXPRESS | 603 km/h above the guideway
- Room 126: Slipstream — Vela Corse Works Team
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.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
