Get sports gear delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A race you can feel in the scroll
La Grande Boucle Fantôme is an AI-built exhibition piece: a fictional 21-stage cycling tour presented as an editorial roadbook, not a real race or company. Its central idea is simple and unusually physical. Instead of letting the scroll wheel behave the same way everywhere, the page makes climbing feel resistant and descending feel fast. The interface turns a familiar browser gesture into an echo of the effort and release of a grand tour.
That metaphor shapes the whole experience. Stage profiles, hairpins, race notes and a moving peloton make the page feel like a route unfolding beneath the reader, rather than a collection of standard feature cards. The fiction gives the design room to explore the labor behind the spectacle: the domestique’s energy, the breakaway’s dwindling advantage and the arithmetic of getting through another stage.
Products Worth Considering
Coleman SaluSpa Miami Energy-Efficient AirJet Inflatable Hot Tub, 2–4 Person
GoPro Hero12 Black Waterproof Action Camera with 5.3K60 Video and 27MP Photos
Coleman Heritage Big & Tall 10°F Flannel Sleeping Bag
As an affiliate, we earn on qualifying purchases.
From prompt to roadbook
The project’s process follows three passes: build the experience, critique it mercilessly, then certify it through art direction. The accompanying guide documents the code-only illustrations, stage data, scroll physics and accessibility considerations behind the result. That sequence helps turn an evocative premise into an interface with a clear visual system and a working interaction.
The full build notes live in the room’s design guide.
How the road is made
The visual language borrows from cycling reportage without claiming to document an actual event. Leader’s-jersey yellow and dark tarmac form the dominant pairing; sunflower gold, signal red, bottle blue and breakaway green add selective accents. Oversized, high-contrast Gloock headlines meet the more utilitarian Archivo labels and body text. Fine rules, clipped musette shapes and slightly askew paper-like elements give the page the character of a printed roadbook. A subtle turbulence texture adds a newsprint grain across the surface.
Profiles with a pulse
The 21 stage records supply distance, climbing, colour, scroll resistance and elevation samples. JavaScript turns those samples into SVG elevation profiles, including a highlighted summit and a filled area beneath the route. Because the profiles are vectors, they stay crisp at different screen sizes. The hairpins are drawn from broad Bézier strokes: a dark road bed beneath a yellow road surface, with labels and painted messages to suggest a lived-in course.
The signature interaction connects these illustrations to the reader’s input. As a stage approaches the centre of the viewport, the road-pressure display and active profile update. On fine-pointer devices, the wheel handler adjusts scrolling according to the terrain: ascents damp the wheel delta, while descents amplify it and carry momentum forward through a decaying coast. A small bicycle is positioned along the active SVG path and rotated to match its direction; on the queen stage, a red race marker signals the approaching summit. The result is not just a chart describing a climb. It is a page that asks the reader to feel a version of one.
Designed to keep its footing
The spectacle is supported by practical choices. The visuals are built from HTML, CSS, SVG and JavaScript rather than image assets. Animation pauses when the document is hidden, audio is opt-in, and reduced-motion preferences restore ordinary scrolling while leaving the profiles visible. Those details matter: physicality works best when it remains an invitation, not an obstacle.
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 142 of 175, “peloton”):
PELOTON — LA GRANDE BOUCLE FANTÔME: a 21-stage grand tour (fictional race, real physics). Aesthetic: July tarmac, sunflowers, newsprint; suffering as spectacle. Palette: leader-jersey yellow, peloton polychrome dots, tarmac grey, sunflower gold. Fonts: gloock (display), archivo (body). SIGNATURE: 21 STAGES — the page IS the tour: 21 sections, each with its real elevation profile (SVG mountains you literally ride over — scroll pace maps to gradient: hors-catégorie cols scroll slow and heavy, descents freewheel with easing that runs away from you). A breakaway-gap ticker haunts the top edge (the bunch always coming). Musette content-cards at feed zones, the autobus cutoff calculator (sprinters doing arithmetic on a col), hairpin nameplates with fan graffiti, domestique economics essay. Unforgettable: feeling gradient in your scroll wheel.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/peloton/
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 route
Visit the live La Grande Boucle Fantôme room to experience its terrain-shaped scrolling and explore the full fictional tour. Then browse the hub for all 175 exhibition rooms, each offering a different experiment in design and technology.
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.
