Get art and craft supplies delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A mountain course built for the browser
Thirtyseven is an AI-built exhibition piece: a fictional mountain time-trial presented as a one-page editorial journey. It is not a real racing organization or a real course. Instead, it invents a place with its own route, weather, timing marks and rituals, then gives that imagined world the texture of a well-worn race programme.
Its central design move is to make speed something a visitor performs, remembers and eventually sets aside. Hold the control at the opening scene to tuck into the ride. The page records your personal peak speed, keeps time as you travel, and returns that effort as a seal on your finish ticket. There are no rankings. The reward is a small piece of private course lore, not a competition.
That structure gives the site its emotional shape. The opening asks for participation; the intervening chapters fill in the mountain’s conditions and character; a memorial bench interrupts the rush; and the finish turns elapsed browsing time into a keepsake. The exhibition’s subject is speed, but its argument is that speed should never erase risk or remembrance.
interactive racing simulation game
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Heritage atmosphere, instrument-panel precision
The visual language balances the patina of old timing cards and course programmes against the clarity of a vehicle’s instruments. A restrained palette does most of the work: near-black, hedge green and road grey establish the landscape, while safety orange marks important information. That orange reads as practical paint before it reads as decoration, keeping the route and its signals legible.
Typography reinforces the contrast. Instrument Serif lends the large titles a loose, literary quality; Space Mono makes times, labels and course details feel measured. Both typefaces are self-hosted. Together, they give the fictional event a plausible printed history without making the interface difficult to scan.
The road is drawn, then put in motion
Rather than rely on fetched imagery, the hero landscape is constructed as inline SVG. Its scenery is arranged in separate depth groups, from far-off mountains to roadside details. CSS animation moves those layers at different rates; directional blur is reserved for nearby scenery, so the horizon stays readable. A JavaScript animation loop adds subtle pointer-driven lean and road vibration, and stops when the document is hidden.
The held tuck control is the signature interaction because it joins mechanics to narrative. Pressing it narrows the view and records the visitor’s top speed. Keyboard as well as pointer input is supported. The same animation loop updates the course clock, while reaching the finish captures the final time. The resulting ticket turns a fleeting session into a designed memento.
Weather that changes more than its dial
A mountain-weather control affects both appearance and information. Moving its range input adjusts a shared storm value: the sky darkens, rain intensifies and the sun recedes, while the displayed temperature, visibility, wind and road condition change too. The map follows the same code-made approach, with an island outline, dotted orange route, braking points and invented sector times.
The quiet chapter is Keeper’s Bench. When it enters view, an observer changes the shared speed setting so roadside motion eases toward a walking pace. This is more than a pause in animation: it gives the memorial a distinct visual tempo. Reduced-motion settings remove camera compression while preserving the tuck’s numerical result, keeping the interaction’s outcome available without its movement.
As an affiliate, we earn on qualifying purchases.
From prompt to exhibition
The project follows a three-pass pipeline: build the code-only course journey, critique it mercilessly for clarity, feeling and behavior, then certify the finished piece through an art-director review. The accompanying field guide explains the implementation, from layered SVG and timing logic to the weather control and motion safeguards. Its brief is specific: make one measurable action carry the story from first frame to final stamp.
The full build notes live in the room’s design guide.
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 144 of 175, “thirtyseven”):
THIRTYSEVEN — THE MOUNTAIN COURSE: 37.73 miles of a fictional island time-trial (historic road-racing register, sober about risk). Aesthetic: stone walls and hedges at 290 km/h; leather-era heritage. Palette: hedge green (motion-blurred), road grey, leather black, safety orange. Fonts: instrument-serif (display), space-mono (sector times). SIGNATURE: ONBOARD — the hero is an onboard run: roadside detail (stone walls, cottages, phone box, church) streaks past as parallax SVG layers with motion blur; invented corner names are the nav (Ballagarraghyn, Windy Rise, The Verandah…), each with its braking marker. A lap timer runs top-right for your ENTIRE visit — your lap of the site, stamped at the end. The memorial-bench section slows everything to walking pace (the course remembers — quiet register). Course-knowledge lore (10 years to learn), sidecar chapter, the “over the mountain” weather gamble. Unforgettable: your own lap time on the way out.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/thirtyseven/
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.
mountain course SVG animation tools
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Take the course
Visit the live Thirtyseven exhibition piece at Thirtyseven — The Mountain Course. It is an AI-built work about an invented course, not a real company or racing event. To explore the wider collection, browse all 175 rooms through the Fable hub.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 138: APEXWERK — The Grip Curriculum
- Room 127: Meridian 843 | The Measured Mile
- Room 136: Courier — Spoke & Signal
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.
Evergreen bestsellers Picks
bestsellers
As an affiliate, we earn on qualifying purchases.
