Get movie-night favorites 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 river-racing room built to move
Hydroplane — Gold Cup River Thunder is an AI-built exhibition piece: a fictional 1977 Gold Cup archive imagined through race posters, river diagrams and the tense pause before a hydroplane rises onto its sponsons. It is not a real racing company, manufacturer or championship archive. Its central trick is to make the page itself throw water. Scroll with force and a drawn rooster tail bursts behind the boat; slow down and the spray settles. No photographs or generated images are required—the spectacle is assembled from code.
The room’s rhythm travels from racing theater into the mechanics of flight, then through race arithmetic and print ephemera to a sober chapter on safety. That change of mood matters: the exhibition treats protective canopies, restraint cells, inspection and a driver’s ability to refuse unsafe water as part of racing culture, not as decorative fine print.
From brief to exhibition
The build followed a three-pass pipeline: first, construct the room and its code-drawn effects; next, critique it mercilessly for pacing, clarity, responsiveness and motion behavior; finally, send it through art-director certification. The accompanying guide explains the velocity-reactive wake, procedural river, three-point-flight control and print system, as well as the reproduction prompt behind the work.
The full build notes live in the room’s design guide.
How the room makes motion visible
The visual language is built from four inks: hull yellow, river teal, nearly black checker ink and warm paper, with coral acting like a slight printing misregistration. Anton supplies the oversized, compressed display voice; Outfit carries the supporting copy and race information. Together they suggest deadline-driven event graphics without pretending to reproduce a real historical archive.
The signature interaction links scroll velocity to a canvas wake. A tracker compares distance moved with elapsed time, then applies different easing to the wake’s rise and decay. A quick gesture opens the spray sharply; easing off lets it fade. Two broad Bézier jets, a low veil of mist and a capped field of ballistic droplets form the rooster tail. The same motion value rocks consoles, maps and posters, while a fixed gauge gives visitors a visual readout of the force they supplied.
Water is procedural, too: twenty-two differently phased wave bands, broader swells and a moving vertical highlight create the river beneath the hero. The boat and print pieces are drawn rather than supplied as image assets. Four poster compositions use inline SVG shapes and type, with uneven sizes, hard shadows and imperfect rotations to break up a tidy card-grid feel.
Further down, a throttle control turns one input into a small lesson in three-point flight. Adjusting it changes speed, wetted area, ride angle, propeller RPM and the SVG hull’s lift. At full flight, the illustration leaves only the sponson tips and a partly submerged propeller in contact with the river. A photo-finish replay sends three hulls toward the line; reduced-motion settings skip the animated run and show the result directly.
The implementation also accounts for how and where motion plays. Canvas density is capped, the animation loop pauses when the browser tab is hidden, and reduced-motion visitors receive a still river rather than a continuously moving scene. Those decisions keep the visual signature from becoming an obligation.
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 133 of 175, “hydroplane”):
HYDROPLANE — the GOLD CUP unlimiteds, thunderboats on a river course (historical-generic). Aesthetic: 1970s hull liveries; water torn into fog. Palette: hull yellow #ffd400, water teal, rooster-tail white, checker black. Fonts: anton (display), outfit (body). SIGNATURE: ROOSTER TAIL — a canvas particle plume follows scroll velocity: cruise gently and the water lies glassy; scroll hard and a 60-foot rooster tail erupts behind the content, wake rocking the cards below. The hull rides a live water shader (prop-riding explained: 3 points touch the water at 320 km/h). Heat-race brackets, the deadline-era safety reckoning (canopies arrive — told soberly), vintage race-poster gallery generated in SVG. Unforgettable: making the page throw water.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/hydroplane/
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.
Visit the river
Explore the live Hydroplane room to feel how a scroll gesture changes the wake, then browse all 175 exhibition rooms at the hub. The spectacle is fictional; the interaction is real.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 127: Meridian 843 | The Measured Mile
- Room 131: Project Icarus | The Ardent Line
- Room 129: KIRIN EXPRESS | 603 km/h above the guideway
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.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
