Anatomie

Le composant parent rend un header (badge optionnel, h2, sous-titre) animé avec un simple fade-up au montage, suivi d'une colonne flex verticale de composants StoryCard. Chaque StoryCard est une grille CSS trois colonnes : la colonne gauche contient le texte logo de l'entreprise et une pill industrie ; la colonne centrale affiche la stat animée ; la colonne droite contient le blockquote, l'attribution auteur et un lien optionnel vers l'étude. Une teinte de fond pilotée au hover et une bordure accent gauche en scaleY se superposent à la carte sans décaler son layout.

Comment ça marche

Chaque StoryCard se clippe de droite à gauche avec `clipPath: 'inset(0 100% 0 0)'` au repos, puis anime vers `inset(0 0% 0 0)` quand useInView se déclenche. Les cartes décalent de 120ms par index. Le count-up de stat vit dans un composant AnimatedStat séparé : useInView déclenche un appel Framer Motion animate() qui incrémente un useMotionValue de 0 jusqu'à la valeur cible ; useTransform arrondit en entier ou en une décimale. Les effets hover utilisent des variants Framer Motion sur la motion.div parente, la bordure accent pilote scaleY depuis son origine haute, la teinte s'estompe indépendamment.

Comment le coder en React

1. Mettre en place le reveal au scroll sur chaque carte

   Attache un ref au wrapper de chaque carte et passe-le à useInView avec once:true. Utilise le booléen inView pour basculer entre l'état clipé initial et l'état entièrement révélé. Décale le délai en multipliant l'index de la carte par 0,12.

   const ref = useRef<HTMLDivElement>(null);
   const inView = useInView(ref, { once: true, margin: "-80px" });
   
   <motion.div
     ref={ref}
     initial={{ clipPath: "inset(0 100% 0 0)", opacity: 0.6 }}
     animate={inView ? { clipPath: "inset(0 0% 0 0)", opacity: 1 } : {}}
     transition={{
       clipPath: { duration: 0.75, delay: index * 0.12, ease: [0.22, 1, 0.36, 1] },
       opacity: { duration: 0.3, delay: index * 0.12 },
     }}
   />

2. Construire la stat count-up

   Crée un composant AnimatedStat dédié. Utilise useMotionValue démarrant à 0, puis appelle animate() dans un useEffect quand inView passe à true. useTransform gère l'arrondi, Math.round pour les entiers, toFixed(1) pour les décimales. Stocke le contrôleur d'animation pour pouvoir l'arrêter au cleanup.

   const count = useMotionValue(0);
   const rounded = useTransform(count, (v) =>
     isFloat ? v.toFixed(1) : Math.round(v).toString()
   );
   
   useEffect(() => {
     if (!inView) return;
     const ctrl = animate(count, numericValue, { duration: 1.6, ease: "easeOut" });
     return () => ctrl.stop();
   }, [inView]);

3. Ajouter la bordure accent au hover

   Enveloppe le contenu de la carte dans une motion.div avec initial='rest' et whileHover='hover'. Définis des variants pour l'overlay de bordure gauche : scaleY passe de 0 à 1 avec transformOrigin fixé à 'top'. Un second variant contrôle l'opacité de la teinte de fond indépendamment avec sa propre durée de transition.

   <motion.div initial="rest" whileHover="hover">
     {/* Accent border */}
     <motion.div
       variants={{ rest: { scaleY: 0 }, hover: { scaleY: 1 } }}
       transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
       style={{ position: "absolute", left: 0, top: 0, bottom: 0,
         width: 3, background: "var(--color-accent)", transformOrigin: "top" }}
     />
   </motion.div>

4. Brancher la structure de données

   Chaque story a besoin d'un id, d'un texte logo, d'un label industrie, d'une chaîne stat numérique (entier ou flottant à une décimale), d'un suffixe optionnel comme '%' ou 'M€', d'un label de stat, d'une citation, auteur, rôle et d'un href optionnel. Garde la stat en string pour qu'AnimatedStat détecte si toFixed(1) s'applique.

   interface Story {
     id: string;
     logo: string;
     industry: string;
     stat: string;        // "340", "2.4", "98"
     statSuffix?: string; // "%", "M€"
     statLabel: string;
     quote: string;
     author: string;
     role: string;
     href?: string;
   }

Quand l'utiliser

Place cette section en milieu ou fin de funnel, après les features ou le pricing, là où des résultats concrets renforcent la décision. Elle fonctionne mieux avec 3 à 5 stories ; en dessous ça paraît mince, au-dessus le rythme du reveal se casse. À éviter sur les pages marketing qui ont déjà une grille de témoignages au-dessus de la ligne de flottaison : deux sections de preuve sociale dos à dos diluent les deux. Sur mobile, la grille trois colonnes par carte devient une colonne unique, ce qui fonctionne mais perd la comparaison rapide entre logo, stat et citation.

Utilisé par

• Linear, Utilise des cartes études de cas en disposition horizontale avec une métrique proéminente, une courte citation et une attribution auteur sur son site marketing.
• Vercel, Les pages clients combinent une stat de performance clé, une citation en une phrase et un logo d'entreprise dans un format de carte scannable.
• Stripe, Entrées études de cas empilées avec tags industrie, résultats numériques et extraits en blockquote, la même hiérarchie d'information qu'utilise ce composant.
• Notion, Les cartes témoignages clients associent une stat titre à un court témoignage et un tag rôle/entreprise, révélés progressivement à mesure que l'utilisateur défile.

FAQ