#16 Charles Leclerc
Un tour de Monaco, piloté au défilement.
Le site, en direct
Le vrai site, dans le cadre : faites-le défiler pour le visiter. Sortez du cadre pour reprendre la lecture de cette page.
Points forts
Le vrai Monaco, relevé sur OpenStreetMap
Relation 148194 : 413 nœuds, 3 329 m mesurés pour 3 337 officiels, projetés et tournés de 35° sur une planche de 1440 x 800. Les virages sont placés par nom de rue et par courbure, le tunnel par les tronçons marqués comme tel.
Un tour piloté au défilement
La section reste collée sur 320 lvh le temps que la voiture boucle le tour, sa position calculée sur la longueur cumulée du tracé. Une matrice de carrés posée sur la seule terre ferme, calculée au-delà du cadre pour atteindre les bords, s'allume autour d'elle en quatre niveaux. 90 étincelles partent quand elle franchit la ligne.
Des cartes qui se placent seules
Au survol d'un virage, sa carte cherche sur une grille de positions la plus proche qui ne recouvre ni le tracé, ni les autres virages, ni les légendes, ni les textes. Un fil se dessine ensuite de son coin jusqu'au virage.
Un header lu image par image
79 images WebP à canal alpha en 1200 x 1200, tirées d'un ProRes 4444 de 158 images, lues au défilement sur une couche collante de 240 lvh. Chargement progressif, une image sur huit, puis sur quatre, puis toutes, par trois téléchargements en parallèle : le voile se lève dès la première.
Un moteur maison, une seule boucle
Un seul requestAnimationFrame pour tout le site, où chaque abonné déclare sa propre cadence. Des ressorts à la physique de react-spring réécrits sans dépendance, et des fonds animés qui tournent à 24 images par seconde, seulement quand ils sont visibles. Seul Lenis vient de l'extérieur, pour le défilement doux, et il est coupé en mouvement réduit.
Détourage par code
Un script Node et ffmpeg remplit le fond depuis les bords de l'image, adoucit une frange d'un pixel et décontamine la couleur qui y reste. Le portrait et le casque sont détourés ainsi, sans outil payant.
Questions
- L'aperçu de cette page est-il le vrai site ?
- Oui, c'est le site lui-même, rendu dans le cadre : on le visite dedans, on en sort pour reprendre la lecture de cette page.
- Est-ce un site officiel ?
- Non. C'est une page pilote réalisée au studio, sans lien avec le pilote ni avec la Scuderia Ferrari.
- D'où viennent le tracé et les photos des virages ?
- Le tracé vient d'OpenStreetMap, sous licence ODbL, © contributeurs OpenStreetMap. Les photos des virages viennent de Wikimedia Commons, avec leur crédit et leur licence affichés dans chaque carte.
- En quelle langue est le site ?
- En anglais.
Stack technique
- HTML
- CSS
- JavaScript
- SVG
- Canvas
- OpenStreetMap
- Vercel