Anatomie

La section est une grille CSS à deux colonnes égales. La colonne gauche contient un badge optionnel, un titre h2 et un sous-titre, qui apparaissent ensemble au scroll. La colonne droite contient la liste de barres : chaque élément est un sous-composant MetricBar avec une rangée label (texte, description optionnelle, valeur animée) au-dessus d'un track de 6px de haut renfermant la couche de remplissage animée.

Comment ça marche

Un seul hook useInView surveille le conteneur de la colonne droite avec une marge de -80px, déclenchement unique. Quand inView passe à true, chaque MetricBar lance un setTimeout décalé de index * 100ms, puis appelle motionVal.set(metric.value). Ce motionVal alimente un useSpring (damping 20, stiffness 60) qui s'approche de la valeur cible avec un léger rebond élastique. useTransform mappe la sortie du spring sur scaleX entre 0 et 1, ce qui pilote la mise à l'échelle du div de remplissage via transformOrigin:'left'. Un second useTransform convertit le même spring en chaîne de pourcentage pour le compteur, abonné via displayVal.on('change') pour rester synchronisé avec la barre.

Comment le coder en React

1. Initialise le motion value et le spring

   Dans MetricBar, crée un useMotionValue à 0 et fais-le passer dans useSpring. Le damping et le stiffness du spring contrôlent l'élasticité du remplissage. Un stiffness plus élevé donne une barre plus vive ; un damping plus faible prolonge le rebond.

   const motionVal = useMotionValue(0);
   const spring = useSpring(motionVal, { damping: 20, stiffness: 60 });

2. Pilote le remplissage et le compteur depuis le même spring

   Utilise deux appels useTransform sur le spring : un qui mappe [0, 100] vers [0, 1] pour scaleX du div de remplissage, et un autre qui formate la valeur en chaîne de pourcentage pour le compteur. Abonne-toi à la transformation de chaîne avec .on('change') pour maintenir un état React synchronisé.

   const scaleX = useTransform(spring, [0, 100], [0, 1]);
   const displayVal = useTransform(spring, (v) => `${Math.round(v)}%`);
   
   useEffect(() => {
     const unsub = displayVal.on("change", (v) => setDisplayText(v));
     return unsub;
   }, [displayVal]);

3. Déclenche au scroll avec un décalage par barre

   Pose une ref sur le div conteneur et passe-la à useInView avec once:true et une marge de -80px pour que l'animation se déclenche avant que la section soit entièrement visible. Quand inView passe à true, utilise un setTimeout avec index * 100ms avant de définir la motion value, pour que chaque barre se remplisse en séquence plutôt que simultanément.

   const containerRef = useRef<HTMLDivElement>(null);
   const inView = useInView(containerRef, { once: true, margin: "-80px" });
   
   useEffect(() => {
     if (inView) {
       const timer = setTimeout(() => {
         motionVal.set(metric.value);
       }, index * 100);
       return () => clearTimeout(timer);
     }
   }, [inView, metric.value, motionVal, index]);

4. Applique scaleX au remplissage avec transformOrigin à gauche

   Rends une motion.div dans le track en position:absolute et inset:0, mets transformOrigin à 'left', et lie la motion value scaleX directement à la prop style. La barre grandit alors de gauche à droite au fur et à mesure que la valeur du spring monte.

   <motion.div
     style={{
       position: "absolute",
       inset: 0,
       backgroundColor: "var(--color-accent)",
       transformOrigin: "left",
       scaleX,
     }}
   />

Quand l'utiliser

Utilise ce composant sur les pages À propos, Services ou Études de cas où tu veux présenter des données d'expertise ou de performance de façon lisible et visuelle. Il fonctionne mieux avec 4 à 8 métriques qui se prêtent naturellement à une représentation en pourcentage : niveaux de compétence, scores de satisfaction client, taux d'atteinte d'objectifs. À éviter quand les données ne sont pas naturellement des pourcentages, quand les métriques nécessitent des valeurs décimales précises, ou quand l'utilisateur doit comparer plusieurs jeux de données côte à côte, une bibliothèque de graphiques gère mieux ces cas.

Utilisé par

• Stripe, Utilise des indicateurs de progression animés dans l'onboarding de son dashboard pour afficher les taux de complétion.
• Webflow, Emploie des barres animées horizontales sur ses pages de tarifs et comparaisons de fonctionnalités pour mettre en avant les capacités des plans.
• Figma, Affiche des barres de remplissage animées dans ses sections de statistiques communautaires et d'utilisation des plugins.

FAQ