Comment sont construits les sites de Lando Norris, Charles Leclerc et Oscar Piastri

Trois sites de pilotes de Formule 1, trois agences différentes, trois stacks différentes, et pourtant la même sensation : une page qui se regarde comme un film. On les a ouverts et inspectés un par un pour voir ce qui tourne réellement, puis on a découpé la construction en 10 étapes, chacune avec son prompt.

Copier les 3 URLshttps://landonorris.com, https://www.oscarpiastri.com, https://charlesleclerc.com/en/

landonorris.comCopier

oscarpiastri.comCopier

charlesleclerc.comCopier

Ce qui tourne réellement sous le capot

landonorris.com : du Webflow habillé sur mesure

• Base : Webflow (assets servis depuis website-files.com), donc le contenu reste éditable par le client, plus un bundle JS maison servi par l’agence OFF+BRAND depuis son propre CDN.
• Scroll : Lenis pour l’inertie.
• Animations vectorielles : Rive, pas Lottie. Les fichiers sont pilotés par machine à états (data-rive-state-machine, data-rive-artboard) et certains sont déclenchés au scroll (data-rive-scrolltrigger-start et -end). C’est ce qui donne les flèches de boutons vivantes et les transitions de page.
• Thème par section : chaque bloc porte un data-theme (lime, dark) et un data-nav-theme-target, la navigation change donc de couleur au fil du scroll.
• Micro-interactions : 31 éléments data-anim="text-hover" et une trentaine de balayages colorés data-anim-high="right, lime".
• Vidéo : 7 lecteurs Vimeo en streaming, muets, en boucle, déclenchés au survol (data-stream-hover).
• Le reste : Klaviyo pour la newsletter, iubenda pour le consentement, 71 images WebP et aucun JPEG.

oscarpiastri.com : Webflow plus la panoplie GSAP complète

• Base : Webflow également, mais toute la motion vient de GSAP 3.13 chargé depuis jsDelivr, avec quasiment tous les plugins : ScrollTrigger, SplitText, Flip, Draggable, InertiaPlugin, Observer, ScrambleTextPlugin, CustomEase.
• Scroll : Lenis 1.2.3, avec split-type en secours de SplitText.
• Titre rotatif : data-rotating-words="driven, calm, ready, sharp" combiné à ScrambleText, le mot du titre se recompose lettre par lettre.
• Deck lançable : 7 cartes data-flick-cards-item, une par jour de la semaine, que l’on fait glisser au doigt via Draggable et InertiaPlugin.
• Cartes empilées : 3 blocs data-stacking-cards-item pour les jalons de carrière, chacun venant se poser sur le précédent au scroll.
• Slider maison : data-gsap-slider-init avec ses propres contrôles prev / next et son conteneur de points, pas un plugin de carrousel.
• Entrée : un transition-mask et un mask-title révèlent le hero. Les vidéos de fond sont en webm avec repli mp4 et image poster.

charlesleclerc.com : WordPress sur mesure, découpé en chapitres

• Base : WordPress avec un thème maison (theme-custom) et WPML pour l’anglais, l’italien et le français. Aucun page builder.
• Motion : un unique bundle output.js de 263 Ko contenant GSAP avec ScrollTrigger, ScrollSmoother, SplitText, Flip et Observer, plus Lenis et Lottie.
• Structure : 13 sections numérotées (section-1 à section-13) et des variantes mobiles dédiées (section-1-mobile, -4-mobile, -8-mobile, -12-mobile). Autrement dit deux chorégraphies de scroll distinctes, pas un simple responsive.
• Récit : 5 chapitres (data-chapter) et 5 overlays plein écran (training, preparation, racing, off-season, driver) qui s’ouvrent sans quitter la page.
• Ouverture : lottie-intro et lottie-container pour l’animation d’entrée, puis des masques (mask, mask2, grid-overlay) pour les révélations.
• Navigation : burger, fake-burger, menu-container, mini-menu-left, sub-menu, avec des libellés dupliqués en data-text pour l’effet de survol.

Le dénominateur commun

Aucun des trois n’utilise de 3D ni de WebGL. Le rendu premium vient de quatre choses seulement : un scroll inertiel (Lenis partout), GSAP ScrollTrigger pour épingler et scrubber, des révélations de texte masquées ligne par ligne (SplitText), et de la vidéo plein cadre bien encodée. Le reste est de la rigueur : typographie condensée, thème qui s’inverse, et une chorégraphie mobile écrite séparément.

Pourquoi un seul prompt ne suffit pas

Demander « fais-moi un site comme celui de Lando Norris » produit toujours la même chose : une page correcte, plate, sans scroll piloté. La raison est mécanique. Ce type de site n’est pas une page, c’est une pile de systèmes qui dépendent les uns des autres. Le moteur de scroll doit exister avant la moindre animation. Le préloader doit connaître l’état de chargement réel de la vidéo du hero. Les épinglages consécutifs doivent être construits dans une même séquence, sinon ils se poussent mutuellement. Un modèle qui écrit tout d’un bloc improvise ces dépendances, et le résultat casse au premier redimensionnement.

D’où le découpage ci-dessous : un prompt d’orchestration qui pose le cadre et les 10 étapes (c’est celui du bloc Prompt en haut de page), puis un prompt par étape. On reste dans la même conversation, et on valide chaque étape dans le navigateur avant de passer à la suivante.

Étape 1 : les fondations

Objectif : poser la stack, les jetons de design et un squelette scrollable. Zéro animation à ce stade.

Étape 1 sur 10 : les fondations.

Mets en place la coquille du projet pour un one-page cinématique de pilote ou d'athlète. Pas encore de contenu de sections, pas encore d'animation.

À livrer :
- Le scaffold : Next.js App Router + TypeScript + Tailwind, ou un index.html prêt pour Webflow accompagné d'un seul main.js si on a choisi Webflow.
- Un fichier de jetons de design : deux thèmes de fond (presque noir #0B0B0B et blanc cassé #F4F2EE), une couleur d'accent tirée de la livrée de l'équipe, une rampe de 6 neutres, chacun exposé en custom property CSS pour qu'une section change de thème avec un seul attribut.
- Une échelle typographique : une display condensée en capitales pour les titres (Fjalla One, Anton ou équivalent Druk) et une grotesque neutre pour le corps. Tailles en clamp(), de 0.85rem pour le corps à 12vw pour le hero.
- Une grille 12 colonnes, largeur max 1440px, padding de section constant, exposés en classes utilitaires.
- Des jetons de motion : trois durées (0.4 / 0.8 / 1.2s), une ease custom pour les entrées, une pour les sorties, une valeur de stagger.
- Une page vide composée de 10 sections placeholder, chacune portant un attribut data-theme et un libellé visible, pour que le scroll de haut en bas montre déjà le squelette.

N'ajoute aucune librairie au-delà du framework à ce stade. Montre-moi l'arborescence de fichiers, puis le contenu complet de chaque fichier créé.

Validé quand : la page scrolle de haut en bas, les 10 sections alternent leurs fonds, et changer un seul jeton change tout le site.

Étape 2 : le moteur de scroll

Objectif : l’étape la plus importante. Tout le reste en dépend, et c’est là que 90 % des tentatives échouent.

Étape 2 sur 10 : le moteur de scroll.

Ajoute le scroll inertiel et branche-le correctement à GSAP. Toutes les animations suivantes dépendent de cette étape.

À livrer :
- Lenis installé et initialisé une seule fois, au niveau de l'app, lerp autour de 0.1, scroll natif laissé tel quel sur tactile.
- Lenis piloté par le ticker GSAP (gsap.ticker.add) avec gsap.ticker.lagSmoothing(0), et ScrollTrigger.update appelé à chaque événement de scroll Lenis. Pas deux boucles requestAnimationFrame indépendantes.
- ScrollTrigger.scrollerProxy configuré si le conteneur de scroll n'est pas la fenêtre.
- Un helper réutilisable qui enregistre un ScrollTrigger et renvoie son nettoyage, pour qu'aucun trigger ne fuite entre deux changements de route ou un hot reload.
- ScrollTrigger.refresh() appelé après le chargement des polices et après le chargement de chaque image ou vidéo.
- Un gsap.matchMedia avec trois branches : desktop (motion complète), tactile et petits écrans (simplifié, sans épinglage), et prefers-reduced-motion (pas de smooth scroll du tout, états instantanés, scroll natif).
- Un trigger de démonstration jetable, une boîte qui apparaît et se translate au scroll, pour prouver que le pipeline fonctionne.

Puis explique-moi en trois lignes comment vérifier dans les devtools que le ticker est bien unifié et pas doublé.

Validé quand : le scroll a de l’inertie sans vibrer, et la démo suit le scroll au pixel près, y compris après un redimensionnement.

Étape 3 : préloader et transition d’entrée

Objectif : l’ouverture. C’est ce qui fait basculer la perception dès la première seconde, sur les trois références.

Étape 3 sur 10 : préloader et transition d'entrée.

À livrer :
- Un préloader plein écran au-dessus de la page : un compteur de 0 à 100 branché sur la progression réelle des assets (images décodées et vidéo du hero qui atteint canplaythrough), pas un timer factice, avec un plafond dur à 3 secondes pour qu'un réseau lent ne bloque jamais l'entrée.
- Scroll verrouillé tant que le préloader est là (Lenis arrêté), rendu à l'instant où le dévoilement se termine.
- La sortie : deux à quatre panneaux qui s'effacent en clip-path ou en transform, révélant le hero en dessous. Utilise CustomEase, pas une ease standard.
- L'entrée du hero enchaînée à cette sortie sur une seule timeline GSAP : vidéo du hero de 1.12 à 1, lignes du titre qui montent hors de leurs masques, nav en fondu en dernier.
- Mémoire de session : le compteur complet ne joue qu'une fois par session, les visites suivantes n'ont qu'un fondu de 400ms.
- Reduced motion : pas de compteur, pas de balayage, contenu visible immédiatement.
- Variante Lottie optionnelle : même chorégraphie avec un JSON Lottie à la place des panneaux, librairie chargée en lazy pour ne jamais bloquer le premier rendu.

Une timeline, un point d'entrée, détruite proprement au démontage.

Validé quand : le compteur reflète un vrai chargement, la main sur le scroll est rendue pile à la fin du dévoilement, et un rechargement dans la même session ne rejoue pas le compteur.

Étape 4 : le hero cinématique

Objectif : vidéo plein cadre, titre masqué ligne par ligne, mot rotatif. Le moment signature.

Étape 4 sur 10 : le hero cinématique.

À livrer, un hero plein écran :
- Fond : une vidéo muette, en boucle, playsinline, en autoplay (webm avec repli mp4 et image poster), object-fit cover, avec un dégradé sombre derrière le texte pour le contraste. Elle ne doit jamais provoquer de décalage de mise en page.
- Le nom dans la display condensée, découpé en lignes avec SplitText ou SplitType, chaque ligne dans un masque overflow-hidden, révélée par une translation y en cascade.
- Un sous-titre d'une ligne (rôle et équipe), plus un mot rotatif qui change toutes les 2,5 secondes via ScrambleText (par exemple : driven, calm, ready, sharp). Mets la rotation en pause quand l'onglet est masqué.
- Un indice de scroll en bas qui disparaît sur les 100 premiers pixels de scroll.
- À la sortie du hero : la vidéo grossit légèrement et s'assombrit pendant que le titre monte plus vite que le fond, un scrub parallaxe piloté par ScrollTrigger.
- Mobile : repli sur l'image poster quand la connexion est contrainte (navigator.connection.saveData, ou effectiveType 2g ou 3g), et laisse le titre passer sur plus de lignes plutôt que de descendre sous 9vw.
- Reduced motion : poster statique, pas de scramble, pas de parallaxe, titre visible dès le départ.

Donne-moi le composant, le CSS, et les réglages d'encodage vidéo que tu recommandes : résolution, bitrate, poids cible.

Validé quand : aucun décalage de mise en page au chargement, le titre se révèle depuis ses masques, et le hero reste lisible sur une image claire.

Étape 5 : navigation et inversion de thème

Objectif : le menu plein écran et la nav qui change de couleur selon la section. C’est le détail que tout le monde remarque sans savoir le nommer.

Étape 5 sur 10 : navigation et inversion de thème par section.

À livrer :
- Un header fixe minimal : wordmark à gauche, trois à cinq liens à droite, burger sur mobile.
- Un menu overlay plein écran : ouverture en clip-path ou en balayage de panneau, liens révélés avec un stagger de 60ms, chaque lien au survol voyant son libellé monter pendant qu'un duplicata arrive par le bas (garde le duplicata dans un attribut data-text). Fermeture avec Échap, au clic sur un lien, et au retour navigateur. Piège le focus tant que c'est ouvert, restaure-le à la fermeture, et arrête Lenis pendant ce temps.
- Inversion de thème : chaque section porte un data-theme dark ou light. Un ScrollTrigger par section met à jour une seule custom property CSS sur le header, pour que wordmark, liens et burger changent de couleur quand la section croise la ligne du header. Anime la couleur, ne la remplace pas d'un coup.
- Un indicateur de section active dans le header, plus une fine barre de progression de scroll.
- Support clavier complet, aria-expanded, aria-controls et rôles corrects.

Ne reconstruis pas les sections de l'étape 1, contente-toi de lire leur data-theme.

Validé quand : la nav reste lisible sur chaque section, le menu se ferme au clavier, et le focus revient sur le burger.

Étape 6 : le bloc identité

Objectif : transformer une liste de faits en moment de design. C’est exactement ce que fait la fiche pilote d’oscarpiastri.com.

Étape 6 sur 10 : le bloc identité.

À livrer, une bande de stats qui transforme une liste de faits plate en moment de design :
- Six à huit paires clé-valeur : nationalité, numéro de course, débuts, taille, circuit préféré, naissance, victoires, podiums.
- Desktop : la section s'épingle sur la longueur de sa propre hauteur pendant que les paires défilent horizontalement, chacune apparaissant et montant en place quand elle atteint le centre. Les chiffres s'incrémentent de 0 à leur valeur via un tween GSAP sur un objet proxy, formatés avec toLocaleString.
- C'est le contraste typographique qui porte le design : libellé en petites capitales très espacées, valeur dans la display à une taille bien plus grande.
- Mobile : pas d'épinglage, une simple liste sur deux colonnes avec une apparition par ligne.
- Reduced motion : valeurs finales rendues directement, pas d'incrémentation, pas d'épinglage.

L'épinglage ne doit provoquer aucun saut : règle pinSpacing correctement et appelle ScrollTrigger.refresh après le chargement des polices.

Validé quand : l’épinglage ne provoque aucun saut, les chiffres s’incrémentent une seule fois, et le mobile reste une liste simple.

Étape 7 : le récit chapitré

Objectif : la colonne vertébrale. C’est ce qui distingue un documentaire d’une landing page, et c’est tout le principe de charlesleclerc.com.

Étape 7 sur 10 : le récit chapitré.

C'est la colonne vertébrale de la page, ce qui la fait ressembler à un documentaire plutôt qu'à une landing page.

À livrer :
- Cinq chapitres, chacun avec un numéro, un titre, un paragraphe et une image plein cadre ou une vidéo courte.
- Chaque chapitre s'épingle pendant que son texte se fond et que son média passe lentement de 1 à 1.08, puis se désépingle vers le suivant. Les épinglages consécutifs ne doivent pas se battre : construis-les en une seule séquence ScrollTrigger, pas en cinq triggers indépendants.
- Un indicateur de chapitre fixe au format 01 / 05 qui se met à jour au changement de chapitre, plus une fine ligne de progression verticale.
- Une citation entre deux chapitres, révélée mot par mot au scroll avec SplitText, en grande taille sur fond uni.
- Des overlays de détail : quatre chapitres exposent un « lire la suite » qui ouvre un panneau plein écran (préparation physique, préparation de course, course, intersaison). L'overlay s'anime depuis le point de clic, verrouille le scroll derrière lui, se ferme avec Échap et au clic sur le fond, et rend le focus à son déclencheur.
- Mobile : les chapitres s'empilent normalement avec une apparition en fondu et montée, les overlays deviennent des pages plein écran.

Le contenu peut rester du placeholder, c'est la structure qui compte ici.

Validé quand : on traverse les 5 chapitres sans à-coup, l’indicateur suit, et les overlays s’ouvrent et se ferment sans casser la position de scroll.

Étape 8 : les modules interactifs

Objectif : les trois modules signature d’oscarpiastri.com. Ce sont eux qui donnent l’impression d’un site qu’on manipule.

Étape 8 sur 10 : les trois modules interactifs.

Construis les trois, chacun autonome, chacun avec son parcours mobile et son parcours reduced-motion.

1. Deck de cartes lançable, une routine de sept jours avec une carte par jour. Un deck horizontal que l'utilisateur fait glisser et lance, via Draggable et InertiaPlugin, avec aimantation sur les bords de carte. Les flèches du clavier avancent d'une carte. La carte active grossit pendant que les autres s'assombrissent. Une rangée de points reflète la position et est cliquable.

2. Cartes empilées, trois à cinq jalons de carrière. Les cartes partagent la même position sticky, et au scroll chaque nouvelle carte glisse par-dessus la précédente, qui rétrécit légèrement et perd du contraste. Utilise position sticky avec un seul scrub ScrollTrigger pour l'échelle, pas un épinglage par carte.

3. Slider maison pour les actualités ou les partenaires. Une piste pilotée par GSAP avec contrôles précédent et suivant, points, support molette et tactile via Observer, et un état de survol où le curseur devient un libellé « glisser ». En boucle, avec les clones gérés pour qu'il n'y ait aucun saut visible à la jointure.

Pour chacun : accessible au clavier, aria-roledescription renseigné, et aucun décalage de mise en page à l'hydratation du module.

Validé quand : le deck se lance au doigt et s’aimante, les cartes s’empilent sans clignoter, et le slider boucle sans saut visible.

Étape 9 : galerie, partenaires, socials, newsletter, footer

Objectif : le bas de page. C’est là que landonorris.com place sa galerie de casques et son mur social.

Étape 9 sur 10 : galerie, partenaires, mur social, newsletter et footer.

À livrer :
- Une grille galerie (casques, équipement, moments) : chaque élément a une image de base et une image de survol qui arrive en balayage depuis un côté derrière un masque, avec le titre révélé en même temps. Les éléments apparaissent avec une échelle et un fondu en cascade liés à leur rangée. Le clic ouvre une lightbox navigable au clavier.
- Une section partenaires : grille de logos responsive, monochrome par défaut, couleur au survol, chaque logo étant un lien avec un nom accessible correct. En option, une rangée en marquee dont la vitesse suit la vélocité du scroll et dont le sens s'inverse avec la direction du scroll.
- Un mur social : six images en grille décalée, chacune sortant vers la plateforme, plus un bloc « suivre » avec les icônes.
- Un bloc newsletter : un champ email, un bouton, validation en ligne, états de chargement et de succès, un honeypot plus une limitation de débit simple, et une ligne de consentement claire. Mets le prestataire (Klaviyo, Resend, Mailchimp) derrière une seule fonction pour pouvoir en changer.
- Le footer : nav répétée, réseaux, liens légaux, et une signature surdimensionnée dans la display qui se révèle au scroll.

Chaque effet de survol a besoin de son équivalent tactile, parce que le survol n'existe pas sur mobile.

Validé quand : chaque effet de survol a son équivalent tactile, et la newsletter renvoie un état d’erreur lisible sans rechargement.

Étape 10 : performance, accessibilité, i18n, SEO et QA

Objectif : la passe qui sépare la démo du site livrable. Sur ce type de projet, c’est presque autant de travail que les 9 étapes précédentes.

Étape 10 sur 10 : performance, accessibilité, i18n, SEO et QA.

Parcours tout le projet et corrige, ne te contente pas de signaler.

Performance :
- Vidéo du hero sous 3 Mo, webm plus mp4, poster préchargé, preload none pour tout ce qui est sous la ligne de flottaison, lazy loading pour chaque image hors du premier écran.
- Chaque image en AVIF ou WebP avec width et height explicites, un attribut sizes correct, et priority uniquement sur le hero.
- Plugins GSAP importés un par un plutôt qu'en bundle. Lottie et tout module lourd importés dynamiquement.
- N'anime que transform et opacity. Audite chaque propriété animée et liste celles qui forcent un layout.
- Polices auto-hébergées, woff2, font-display swap, preload uniquement de la display utilisée au-dessus de la ligne de flottaison.
- Cibles : LCP sous 2,5s, CLS sous 0,05, INP sous 200ms sur un mobile milieu de gamme.

Accessibilité :
- Chaque animation respecte prefers-reduced-motion, vérifié section par section.
- Un parcours clavier complet à travers menu, overlays, slider, deck et lightbox, avec un focus visible partout.
- Contraste mesuré contre le dégradé posé sur la vidéo, pas contre une couleur pleine.
- Titres dans l'ordre, un seul h1, alt sur chaque image porteuse de sens, décoratives en aria-hidden.
- Vidéo muette et playsinline, aucun autoplay avec son nulle part.

i18n et SEO :
- Chaque chaîne dans un fichier de messages, aucun texte en dur, routes préfixées par la locale, hreflang avec x-default.
- Title, meta description, canonical et Open Graph par locale, plus un JSON-LD Person et BreadcrumbList.
- Sitemap et robots.

Puis donne-moi une checklist de QA sous forme de tableau : quoi tester, sur quel appareil, et la condition de validation.

Validé quand : Lighthouse mobile passe les seuils, et le site reste utilisable clavier seul avec les animations désactivées.

Les pièges qui reviennent à chaque build

• Deux boucles d’animation. Lenis et GSAP qui tournent chacun sur leur propre requestAnimationFrame donnent un scroll qui vibre légèrement. Un seul ticker, toujours.
• Les épinglages consécutifs. Cinq ScrollTrigger épinglés indépendants se poussent mutuellement. Il faut une séquence unique, ou du position sticky.
• Le refresh manquant. Sans ScrollTrigger.refresh() après le chargement des polices et de la vidéo, tous les points de départ sont faux au premier chargement à froid.
• La vidéo du hero. C’est presque toujours elle qui tue le LCP. Poster préchargé, vidéo en preload none, webm en premier.
• Le mobile traité comme du responsive. Les trois références écrivent une chorégraphie mobile séparée, charlesleclerc.com va jusqu’à dupliquer des sections entières. Réduire la version desktop ne marche pas.
• prefers-reduced-motion oublié. À traiter dans l’étape qui crée l’effet, jamais en fin de projet.

Combien de temps

Avec ce découpage et un assistant de code, comptez 3 à 5 jours pour une version desktop convaincante, puis autant pour le mobile, la performance et l’accessibilité. Le vrai poste de coût reste le contenu : les trois références s’appuient sur des vidéos étalonnées et des photos professionnelles, et c’est la moitié de l’effet.