Comment raconter un match qui n'a pas encore eu lieu ?
Projet de démonstration Peechy : une expérience éditoriale en scroll, chapitrée comme un documentaire, sur le parcours de l'Équipe de France à la Coupe du Monde 2026.
Une démonstration, pas une commande client.
France 2026 est un projet que Peechy a conçu pour lui-même, mis en ligne et publiquement accessible. L'objectif : montrer ce qu'un site peut faire quand le sujet est purement émotionnel et qu'il n'y a rien à vendre. Pas de formulaire, pas de tunnel, pas de conversion à optimiser. Juste une histoire à faire ressentir en descendant la page.
Le sport en ligne se raconte presque toujours mal.
Les sites d'événement sportif partagent les mêmes défauts, et chacun d'eux était une contrainte à lever :
- Le score remplace le récit : des chiffres alignés en tableau ne produisent aucune émotion, alors que c'est exactement ce qu'on vient chercher.
- Le contenu périme en direct : un match se joue, un résultat tombe, et la page devient fausse en quatre-vingt-dix minutes.
- Le poids visuel écrase les performances : une expérience immersive veut de grandes images, et les grandes images tuent le chargement.
- L'animation gratuite fatigue : tout faire bouger revient à ne rien mettre en avant, et le visiteur décroche avant le milieu de page.
Construire un documentaire qui se regarde au scroll.
- Chapitrage narratif : l'héritage, le parcours, le match à venir, le casting, le point de penalty. Chaque section est une séquence, avec sa propre respiration.
- Ouverture cinématique : un tunnel de stade, trois phrases, et un bouton pour passer. Celui qui est pressé n'est jamais retenu de force.
- Typographie comme décor : des titres en très grande taille qui occupent l'écran entier, traités comme des cartons de film plutôt que comme des titres de page.
- Défilement lissé : l'inertie du scroll est adoucie pour que chaque transition se déroule au rythme voulu, jamais par à-coups.
- Fiches joueurs manipulables : le chapitre casting se parcourt au doigt, une carte après l'autre, comme un paquet qu'on feuillette.
Chaque choix technique sert le récit, pas l'inverse.
- Site statique pré-généré : construit en Astro et servi depuis le réseau de diffusion, le document complet arrive en 0,26 s, mesuré sur le site live.
- Zéro dépendance externe : polices, images et scripts sont tous auto-hébergés. Aucune requête ne sort vers un tiers, donc aucun point de panne et aucun traceur.
- Chargement progressif : l'expérience est volontairement riche en visuels, ils sont donc appelés au fil de la descente et non au premier écran.
- Animations pilotées par la position : rien ne se déclenche sur minuterie, tout est indexé sur l'avancée du scroll. Le visiteur reste maître du rythme.
- Données isolées du design : scores et statistiques vivent séparément des composants, ce qui permet d'actualiser un résultat sans retoucher la mise en page.
La preuve qu'un site peut produire une émotion.
France 2026 ne vend rien et ne mesure aucune conversion. Il sert à démontrer une chose précise : la même exigence de rythme, de typographie et de performance appliquée à un site de restaurant ou de cabinet produit un sentiment que le visiteur ne sait pas nommer, mais qui décide de sa confiance. Un site n'est pas un catalogue de fonctionnalités, c'est une mise en scène.
Document servi et complet, malgré une page très dense
Mesuré sur le site live, moyenne de 3 passesAucune dépendance externe : ni police distante, ni tracker, ni CDN tiers
Mesuré sur le site liveDOM prêt à l'interaction, sur 250 ressources chargées
Mesuré sur le site liveCe qu'on nous demande souvent.
Pourquoi une agence web publie-t-elle un site qui ne vend rien ?
Parce qu'une démonstration prouve mieux qu'un argumentaire. Sur un projet client, les contraintes de budget, de délai et de validation limitent toujours l'ambition visuelle. Un projet libre montre le plafond réel du savoir-faire, et sert ensuite de référence commune quand un client demande « quelque chose qui en jette ».
Un site aussi animé peut-il rester rapide ?
Oui, à condition que la structure soit statique. Ici le document est pré-généré et servi depuis un réseau de diffusion, ce qui donne 0,26 s pour la page complète, mesuré sur le site live. Les visuels lourds sont appelés au fil du défilement plutôt qu'au premier écran, donc ils n'entrent jamais en concurrence avec l'affichage initial.
Le scrollytelling convient-il à un site d'entreprise ?
Par séquences, oui. Utilisé sur toute une page vitrine, il ralentit l'accès à l'information et dessert un visiteur venu chercher un tarif ou un numéro. Utilisé sur un chapitre précis, une démonstration de produit ou une histoire de marque, il capte l'attention là où un simple paragraphe serait sauté.
Que devient un site événementiel une fois l'événement passé ?
Il se périme si le contenu est figé dans le design. C'est pourquoi les données de match sont séparées des composants d'affichage : un score se met à jour sans toucher à la mise en page. La structure narrative, elle, reste réutilisable pour l'édition suivante.