APEX is the fictional Scuderia Valcourt, racing since 1957. The centrepiece is one full lap of their circuit — drawn, driven, and instrumented — scrubbed entirely by scroll.
Motorsport heritage sites drown in sepia. This one keeps the archive in the copy and spends the technology on the thing fans actually love: the lap. Every number in the telemetry column is derived, not decorated — speed comes from a corner-keyed profile, gear from speed, lateral g from the actual curvature of the SVG path under the car.
Livery logic: one racing scarlet, one champagne metallic for records and kerbs, on asphalt. The hero's skewed stripes are the car's flank at speed.
Barlow Condensed Italic 800 — display. Condensed, canted 12°, permanently in a hurry; the outlined second line is the ghost of the car ahead.
Red Hat Mono — pit-wall voice: telemetry, lap boards, section labels. Barlow regular carries the prose.
| Element | How it works |
|---|---|
| The circuit | A single closed SVG path drawn three times: wide tarmac stroke, dashed champagne kerbs, and the scarlet race line revealed by scrubbing stroke-dashoffset against the path's measured length. |
| The car | getPointAtLength positions the marker; a 520vh pinned ScrollTrigger maps scroll progress to lap distance, so you drive the lap at your own pace — including backwards. |
| Telemetry | Speed interpolates a piecewise corner-keyed profile with smoothstep easing between braking and acceleration zones; gear is a speed bucket; lateral g is computed from the heading delta of two successive path samples times speed — the corners genuinely pull more g. |
| Corner callouts | Six corners carry names, notes, and apex speeds; the callout card slides in whenever the car is within ±4.5% of a corner's lap position. |
| Accessibility | Reduced motion disables entrances; the lap remains scroll-driven (position, not animation). Telemetry is aria-hidden; the corner notes read as text. |
| You do | The page does |
|---|---|
| Scroll the lap | The car takes Curva del Ponte, Le Crochet, the Raidillon — race line drawing behind it |
| Watch the numbers | Speed falls into hairpins, gears drop, lateral g spikes mid-corner |
| Scroll back up | The lap reverses — telemetry and all |