Course inspection / room 134 of 175
BUILT ON THE EDGE.
A technical walk through La Flèche: how a browser becomes a floodlit piste, a timing instrument and fifty-two changes of direction.
The page is the piste.
SLALOM maps vertical scrolling to a downhill run. The opening frame is the start house; every later screen is a direction change. Red and blue gates alternate across the viewport while the story occupies the space the racer has just released.
The emotional apex is not the finish but timing wire two, where Léonie Marat moves 0.14 seconds ahead. Night ultramarine holds the course together; piste white supplies the dominant light; gate color is reserved for hard directional beats. Every mountain, ski, gate, contour and snow fragment is code-made. There are no generated or stock assets—a constraint the Velocity Wing treats as part of the exhibit.
Timing has impact.
updateScroll() selects the last chapter to cross a high viewport timing wire, keeping the readout with visible copy. At split two, #split-impact briefly takes the frame. The new toggleGhostLine() comparison then draws Marat’s SVG trace against Nord’s, translating 0.14 seconds into a physical 2.40-metre lead.
Scroll leaves a force.
updateScroll() measures distance over elapsed time, smooths it into the --velocity custom property and uses that value to lengthen gate throws and shift diagonal piste texture. The gate itself rotates in perspective as it passes. Speed changes the picture without triggering layout.
Each direction switch calls burst(). The viewport-sized Canvas emits a capped mix of flakes and short streaks from the new outside ski. drawSnow() applies drag and gravity, removes expired particles, and only requests another frame while debris remains.
Gradient becomes geography.
The hand-authored profile SVG uses a broad snow under-stroke and a narrow gradient stroke that changes from shelf-blue to wall-red. During course scroll, getPointAtLength() moves the red locator over that exact path. The graphic therefore reports progress instead of acting as a static illustration.
Thirty-five degrees, operated.
The range control calls updateAngle(), rotating the ski and knee line while recalculating turn radius, grip and sector delta. The working window is 34–37°. Below it, the line drifts; above it, grip becomes drag. The explanation changes with the result so the interaction teaches the edge-angle tradeoff rather than merely animating it.
The quiet machinery matters.
Cabinet buttons expose one wax drawer at a time with synchronized aria-expanded state. The seeded bib machine performs a reduced-motion-safe card turn. Gate-judge choices maintain aria-pressed and rewrite the fictional protocol. All animation loops stop when the document is hidden; reduced-motion removes gate throws, impact overlays and particle emission.
Ice, poles, shadow.
Unbounded carries display type, telemetry and equipment labels; aggressive negative tracking makes large words feel compressed by speed. Archivo handles body copy and controls with open counters at small sizes. Timing green, #7DFF9A, appears only when the racer gains time.
Prompt for a physical rule, not a skin.
Ask an AI agent to connect the subject to scroll mechanics, then specify which moments deserve interruption and which measurements must remain live.
Build a responsive editorial experience where scrolling performs a fictional sporting course. Alternate full-scale course objects left and right; make scroll velocity influence their perspective and texture; update a sticky split-time instrument only when each timing wire is crossed. Give one exceptional split a full-frame impact. Add a code-made SVG map, a lightweight Canvas debris system, an interactive physics explainer and accessible race-night controls. Use self-hosted characterful type, no external media, and fully simplify motion when reduced motion is requested.