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 downhill run made of scroll
SLALOM — La Flèche Night Race is an AI-built exhibition piece: a fictional race experience, not a real ski event or company. Its central idea is simple and unusually effective: the page behaves like a course. Scrolling carries you downhill through a sequence of turns, with alternating red and blue gates marking the route and each new screen revealing the story left behind.
The signature move is to make scroll speed part of the visual language. Move quickly and gates stretch, perspective shifts, and the piste’s diagonal texture seems to rush past. The page doesn’t just describe a race; it borrows a physical sensation from one. Its most dramatic interruption arrives at the second timing split, when fictional racer Léonie Marat takes a 0.14-second lead. That tiny margin becomes an unmistakable visual event rather than a number buried in copy.
scroll-based interactive display device
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Course notes: how the illusion works
Night colors, sharp typography
A deep ultramarine background gives the page its night-race atmosphere, while near-white carries most of the light. Blue and red are saved for the gates and other moments that need to read as directional signals. A bright green accent appears only when the fictional racer gains time, so the color itself communicates a change in the race.
Unbounded gives headlines, telemetry, and equipment labels a compressed, forceful character. Archivo provides a calmer counterpoint for paragraphs and controls, remaining legible at smaller sizes. Together, the typefaces balance spectacle with the practical business of explaining what’s happening.
Scroll as instrument
A sticky split-time display tracks which chapter has crossed a designated point in the viewport. That keeps the timing readout connected to the section the reader is actually seeing. At split two, the interface gives the result extra weight and reveals a comparison between Marat’s course trace and her rival Nord’s. The SVG paths turn the 0.14-second advantage into a stated 2.40-metre lead: time translated into distance you can picture.
Velocity is measured from scroll distance over elapsed time, then smoothed into a CSS custom property. That value changes the gates’ apparent throw and the piste texture’s movement without forcing layout changes. When a direction switch occurs, a canvas releases a limited burst of snow flecks and short streaks from the outside ski. The particles are removed as they expire, and animation work stops when there’s nothing left to draw.
Geography and grip, not decoration
The course map is a hand-authored SVG profile, built with layered strokes that distinguish snow from the changing terrain. As the page advances, a locator moves along the actual path, making the diagram a progress indicator rather than a static flourish. Elsewhere, an angle control lets readers explore a fictional equipment explanation: adjust the ski’s edge angle and the ski and knee lines turn as the display recalculates radius, grip, and sector difference. The response explains the tradeoff, so the control teaches instead of merely entertaining.
The visual world is code-made: the mountains, skis, gates, contours, and snow don’t rely on stock or generated imagery. Small interactions support the same considered approach. Wax drawers expose their expanded state to assistive technology, race-judge choices announce their selected state, and motion-heavy effects are reduced when a visitor requests reduced motion. Animation also pauses when the document is out of view.
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 134 of 175, “slalom”):
SLALOM — LA FLÈCHE, a world-cup night slalom (fictional venue). Aesthetic: floodlit piste; gates snapping past. Palette: piste white under floodlight, gate red/blue, speed-suit ultramarine, shadow violet. Fonts: unbounded (display), archivo (body). SIGNATURE: GATE SPLITS — scrolling runs the course: red and blue gates sweep past alternately left/right (content alternates sides with them), a live split-time readout ticks green/red against the leader at every timing wire; direction changes throw snow-spray particles. The course-profile SVG shows gradient percent per section (the steep pitch scrolls heavier). Edge-angle physics (why 35° of knee wins races), the wax room’s secret cabinet, bib-draw drama, gate-judge flag protocol. Unforgettable: being 0.14 up at split 2.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/slalom/
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.
From prompt to piste
The three-pass pipeline starts with a build: an AI agent turns the sporting premise into a working, scroll-led course. Next comes merciless critique, checking whether the interactions clarify the race or merely add noise, and whether accessibility holds up alongside the spectacle. Finally, an art director certifies the result as an exhibition experience; the accompanying guide records the concept, mechanics, tokens, and reproduction approach. The site was built by AI, and that process is part of the work—not a claim that SLALOM is a real sports brand.
The full build notes live in the room’s design guide.
Take the course
Visit the live SLALOM room to experience its gates, split times, course map, and angle control in motion. Then browse all 175 rooms at the hub for more AI-built exhibition experiments.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 127: Meridian 843 | The Measured Mile
- Room 133: Hydroplane — Gold Cup River Thunder
- Room 131: Project Icarus | The Ardent Line
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.
NFL season / tailgating Picks
team gear
As an affiliate, we earn on qualifying purchases.
