#16 Charles Leclerc

Highlights

• The real Monaco, surveyed from OpenStreetMap

  Relation 148194: 413 nodes, 3,329 m measured against 3,337 official, projected and rotated by 35° onto a 1440 x 800 board. The corners are placed by street name and curvature, the tunnel by the segments tagged as such.

• A lap driven by scroll

  The section stays pinned for 320 lvh while the car completes the lap, its position computed along the cumulative length of the track. A grid of squares laid on dry land only, computed beyond the frame to reach the edges, lights up around it on four levels. 90 sparks fly when it crosses the line.

• Cards that place themselves

  When a corner is hovered, its card searches a grid of positions for the nearest one that covers neither the track, nor the other corners, nor the labels, nor the text. A line then draws itself from its corner to the turn.

• A header read frame by frame

  79 alpha-channel WebP frames at 1200 x 1200, taken from a 158-frame ProRes 4444, read by scroll on a 240 lvh sticky layer. Progressive loading, one frame in eight, then in four, then all of them, over three parallel downloads: the veil lifts on the first one.

• A home-made engine, a single loop

  One requestAnimationFrame for the whole site, in which every subscriber declares its own frame rate. Springs with react-spring's physics, rewritten with no dependency, and animated backgrounds that run at 24 frames per second, only while visible. Only Lenis comes from outside, for smooth scrolling, and it is switched off under reduced motion.

• Cut out by code

  A Node and ffmpeg script fills the background in from the image edges, softens a one-pixel fringe and decontaminates the colour left in it. The portrait and the helmet are cut out this way, with no paid tool.