Le site devient une seule histoire qu’on fait défiler : une carte postale épinglée à l’écran change d’état chapitre après chapitre, de la galerie du téléphone à la boîte aux lettres, puis la réserve arrive comme « le billet pour la suite ».
Une carte postale unique (recto photo, verso dessiné en CSS/SVG : mot manuscrit, timbre, tampon, mini-carte avec cœur) reste épinglée (position: sticky) et change d’état à chaque chapitre : 1 photo parmi 4000, 2 bulle WhatsApp, 3 tampon « OK », 4 recto puis verso avec les 4 annotations de « Pensé pour durer » qui apparaissent une à une, 5 en route, 6 dans la boîte, 7 réaction ❤️, 8 prochaine date.
« Comment ça marche » est raconté par les chapitres 2, 3 et 6 avec les deux vidéos et la photo étape 3 ; « Pensé pour durer » n’est plus une image annotée mais la carte qui se construit sous les yeux (réponse au commentaire 1 d’Arthur).
Chapitre 5 : carte de France stylisée en SVG, route en pointillés tracée au scroll, petite carte qui voyage le long du trajet et compteur 0 → 72 h.
Réaction (témoignages vidéo + avis manuscrits + 4,8/5 et +50 000), puis rappels (iPhone WhatsApp) comme chapitres 7 et 8.
La réserve est placée après l’histoire, comme 9e étape : 3 billets de voyage (L’Escapade, Le Voyage, L’Odyssée) avec les prix c.pricing, liens directs vers le tunnel (commentaire 2).
Comparatif remplacé par « Le détour » : une seule ligne verte Hector (libellé + sous-texte) et, en face, le détour des autres en gris — plus de colonne répétée (commentaire 3).
Rail de stations (tampons postaux numérotés + phrase manuscrite) et barre de progression du voyage en haut de page.
Animations liées au scroll en CSS (animation-timeline: scroll()/view()) pour la barre de progression et les entrées des médias, repli IntersectionObserver/JS sinon ; prefers-reduced-motion coupe tout et pose les états finaux.
Mobile : même histoire, épinglage simplifié en bandeau (mini-carte + étape + 8 points), verso de la carte affiché en statique avec pastilles 1-4.
Inspiration et sources
Le scrollytelling éditorial (The Pudding, NYT « Snow Fall ») et les pages produit d’Apple, appliqués au trajet d’une carte postale.
Compréhension en 5 s : le hero reste classique (titre, WhatsApp, 72 h, CTA vert), puis la carte qui voyage montre le service mieux qu’un schéma en 3 étapes.
Le premier CTA est évident (header + hero) et chaque chapitre clé a son bouton ; la réserve arrive au bon moment, après la preuve, et se lit comme une suite logique de l’histoire.
Plus mémorable que Touchnote/Fizzer/Popcarte : aucun concurrent ne montre la carte physique se construire puis voyager ; le verso dessiné rend concret le timbre, le tampon et le mot.
Discutable : la page est longue (le scroll a besoin de place pour que la carte change d’état) ; dans une capture pleine page, la colonne de la carte épinglée paraît vide sous la carte (elle est occupée par les stations du trajet).
Le trajet sur la carte de France est illustratif (pas de vraie localisation d’atelier) ; le verso dessiné reprend le timbre « Moorea » et le mot de la carte de la maquette.
Les animations liées au scroll ne tournent qu’en Chromium récent ; ailleurs, le repli JS fait le même travail de façon plus simple.
