La 00 (mêmes textes, même design system, même ordre) avec toutes les corrections du Loom d’Arthur appliquées section par section, et un site qui bouge au scroll : rapide, net, sans rien cacher en mouvement réduit.
Hero : compact (≈ 610 px au lieu de 740, la section suivante apparaît en bas de l’écran à 1440×900), image fixe (aucune vidéo), titre + chapô + pastilles + CTA « Envoyer une carte » + carte visibles d’un coup d’œil ; entrée rapide (texte en cascade, carte qui se pose en tournant).
Hero mobile conforme au Figma T3 : plus de gros bouton vert (il est dans le header), pastilles empilées, carte en main inclinée en bas.
Comment ça marche (desktop) : comme la v/19, la section se fige et les 3 étapes défilent une à une ; à gauche le titre, le rail Étape 1 → 2 → 3 qui se remplit avec le scroll (cliquable) ; à droite la carte de l’étape active passe devant, la précédente recule.
Comment ça marche (mobile) : empilage — chaque carte étape est collante (sticky) et vient se poser par-dessus la précédente, qui recule légèrement.
Étape 2 enfin différente de l’étape 1 : la vidéo du canapé est remplacée par une maquette WhatsApp en CSS (« Voici l’aperçu de ta carte », recto/verso de la carte, boutons Modifier / Valider ✓ bien lisibles) qui se joue : le mot se dessine, Valider est pressé, « ✓ rien ne part sans ton OK ». L’étape 1 garde sa vidéo, l’étape 3 sa photo.
4000 photos : le paragraphe s’écrit mot à mot avec un curseur (≈ 1,2 s, une seule fois) ; les bulles WhatsApp popent une à une puis flottent.
Pensé pour durer : les 4 annotations ne sont plus figées dans l’image — les flèches vertes se dessinent une à une, les légendes apparaissent, et le mot manuscrit au dos de la carte s’écrit ligne par ligne (≈ 1,7 s). Mobile dans l’ordre du Figma : titre, texte, carte, bouton.
Hector n’oublie personne : vrai téléphone (bord noir, 316 × 690 px max, tient dans 1440×900), conversation ancrée en bas comme WhatsApp ; au scroll, les messages arrivent un par un avec « écrit… » et les trois points (≈ 0,5 s entre deux messages). Même chose en mobile.
Témoignages vidéo : 3 cartes de même hauteur (vignette 4:3 fixe, citation + badge alignés), apparition en cascade.
Réserve façon naali.fr : galerie seule à gauche (grande image qui se swipe + 5 miniatures), à droite un bloc d’achat collant : note, nom de l’offre, 6 bénéfices courts, les 3 offres en radios (L’Escapade, Le Voyage — le plus recommandé, L’Odyssée, prix de c.pricing), prix par envoi + total qui se mettent à jour avec une petite bascule, bouton « Faire plaisir maintenant » vers le tunnel avec l’offre choisie, paiement sécurisé. Plus de liste d’offres sous la galerie ; « Tu n’as rien à perdre » passe en bandeau dessous.
Preuve sociale : la photo d’équipe (probablement Fizzer) est retirée ; à la place, des visages de clients + 4,8/5 + mascotte ; « +50 000 » compte jusqu’à 50 000 ; les avis défilent en continu (marquee infini sans saut, pause au survol).
Comparatif : la colonne de libellés est supprimée ; deux grandes colonnes centrées Hector / Les autres, lignes alignées (sous-grille), Hector reprend le libellé court + l’explication ; les lignes arrivent une à une et les ✓ se cochent.
Bento « de loin » : gardé en desktop ; en mobile les 3 cartes s’empilent en sticky au scroll (même mécanique que les étapes).
Tailles revues partout pour 1440×900 et 390×844 (titres 44–54 px au lieu de 46–59, sections à 96 px au lieu de 120, téléphone et étapes qui tiennent dans l’écran) ; FAQ, collage et CTA final animés (le champ WhatsApp s’écrit tout seul).
Animations en vanilla JS (IntersectionObserver, scroll + requestAnimationFrame, CSS sticky), aucune librairie ; prefers-reduced-motion (ou sans JS) : tout est visible et statique (étapes listées, conversation complète, avis en défilement manuel).
Inspiration et sources
La 00 « Fidèle » + le Loom d’Arthur (2e passe) ; naali.fr pour la fiche produit ; la v/19 pour la section collante.
En 5 secondes : le hero compact montre titre, promesse WhatsApp, 3 garanties, le CTA et la carte en même temps, et « Comment ça marche » pointe déjà en bas de l’écran.
Premier CTA évident (header + hero desktop) ; en mobile, conforme au Figma, il reste dans le header — à surveiller en test utilisateur.
Les animations sont courtes (0,3–1,7 s) et ne bloquent jamais la lecture ; la section collante des étapes demande ~1,7 écran de scroll, c’est le seul endroit où l’on « paie » l’animation.
La maquette WhatsApp de l’étape 2 est dessinée en CSS : plus claire que la vidéo, mais ce n’est pas une capture réelle de la conversation Hector.
« Pensé pour durer » reste la même carte (animée) : la recherche d’une idée radicalement différente se fait dans le labo.
La réserve reste en milieu de page (comme la 00) mais se lit enfin comme une vraie fiche produit (bloc d’achat collant à droite) ; le prix barré de référence reste 6,50 €/envoi.
