The page is the parcours
La Grande Boucle Fantôme treats a web page as a road rather than a brochure. The fictional race borrows the recognisable grammar of a July grand tour—yellow leader’s jersey, hot tarmac, roadside paint, feed bags and newspaper analysis—without borrowing a real team, rider or competition. Its argument is physical: spectators consume suffering as spectacle, while every worker in the peloton keeps a private account of energy, loyalty and time.
The route refuses a tidy feature-card layout. Twenty-one stages form the long middle spine; musette inventory, autobus arithmetic, named hairpins and the domestique’s ledger interrupt it like newspaper supplements. The Velocity Wing supplies no generated assets, so every wheel, sunflower, rider dot, profile and grain field is proudly made from HTML, CSS, SVG or JavaScript.
The road, drawn
The stages array in main.js stores distance, elevation gain, dominant colour, scroll coefficient and 21 profile samples for every stage. makeProfile() turns those samples into an open SVG line and a closed translucent area, finds the summit, and labels the decisive climb. A viewBox and vector-effect strokes keep the drawing sharp from a 390-pixel phone to a wide desktop.
The hairpins are deliberately less scientific. Two wide stroked Bézier paths build a black road bed and yellow surface; positioned nameplates and painted slogans make it feel inhabited. The hero peloton uses 21 CSS circles—one rider per stage—moving through a skewed field.
Feeling gradient
updateRace() finds the stage nearest the viewport centre, illuminates its profile and updates the ROAD PRESSURE HUD. On fine-pointer devices, the wheel handler reads data-resistance. Hors-catégorie climbs multiply wheel delta by roughly 0.4–0.5; descents use as much as 1.72 and feed a decaying value into coastStep(), letting the page freewheel after the gesture.
updateRider() samples the active SVG path with getPointAtLength(), turns a tiny code-drawn bicycle to match the road and counts down stage kilometres. On the queen stage, the red kite drops over the profile as the summit approaches. updateTicker() drains the breakaway’s time and kilometres across the whole tour. Animation frames stop when the document is hidden, audio is opt-in, and reduced-motion users get normal scrolling with profiles already drawn.
Ink, sunlight, type
The palette is intentionally unequal. Leader yellow #f2d21b and tarmac #2c302f dominate; sunflower gold, signal red, bottle-blue and breakaway green punctuate. A fixed SVG turbulence layer gives every field a cheap-newsprint tooth. Gloock supplies high-contrast, compressed headlines; Archivo handles roadbook labels, figures and body copy. Huge serif type, fine rules, clipped musette bags and slightly rotated paper objects keep the composition editorial rather than dashboard-like.
Reproduce this
“Build a code-only editorial experience around one physical metaphor. Use a dominant print tradition, two self-hosted typefaces, an unequal palette and a long-form data spine. Generate real SVG data visualisation from JavaScript, then map one input gesture to the subject’s physics. Verify 390, 834 and 1440 pixels; include keyboard focus, reduced motion, visibility-paused loops and opt-in audio. Write invented reporting with the same care as the interface—atmosphere collapses when the nouns are placeholders.”