Anatomie

La section comporte trois zones empilées : un header centré (eyebrow, h2, sous-titre) qui entre en fondu au scroll ; une ligne de toggle de facturation avec une pill SpringToggle et un badge de réduction sous AnimatePresence ; une grille CSS de cartes de formule. Chaque carte contient un nom, une description, un bloc AnimatedPrice, un label de facturation, une liste de features avec icônes Check, et un bouton CTA. La formule mise en avant s'affiche avec un schéma de couleurs inversé (fond = foreground) et un léger scale(1.02).

Comment ça marche

Le composant SpringToggle crée un spring Framer Motion (stiffness 500, damping 35) qui mappe 0/1 en offset pixel x pour le thumb via useTransform. L'appel spring.set(yearly ? 1 : 0) à chaque rendu pilote la position du thumb sans useEffect. Le bloc AnimatedPrice enveloppe le prix dans AnimatePresence en mode 'popLayout' : chaque valeur unique obtient son motion.span clé par prix, entrant depuis y:24 et sortant vers y:-24 avec un easing spring de 300ms. Le badge de remise utilise un spring de scale qui rebondit en [0, 1.15, 1] à l'entrée. Les cartes s'animent en decalé via whileInView (délai i * 0.08s).

Comment le coder en React

1. Construire le toggle spring

   Crée un composant SpringToggle qui reçoit un booléen et un callback. Instancie un spring Framer Motion et mappe sa plage 0/1 vers l'offset pixel où le thumb doit se positionner. Appelle spring.set() directement dans le corps du rendu pour que le thumb suive toujours la prop.

   const spring = useSpring(yearly ? 1 : 0, { stiffness: 500, damping: 35 });
   const x = useTransform(spring, [0, 1], [3, 27]);
   spring.set(yearly ? 1 : 0); // drives the thumb on every render

2. Animer le prix avec AnimatePresence popLayout

   Enveloppe le span du prix dans AnimatePresence avec mode='popLayout' pour que les éléments sortants soient retirés du flux avant le positionnement des entrants. Clé chaque motion.span par la valeur du prix pour que React traite mensuel et annuel comme des éléments distincts et déclenche les animations d'entrée/sortie.

   <AnimatePresence mode="popLayout">
     <motion.span
       key={price}
       initial={{ y: 24, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       exit={{ y: -24, opacity: 0 }}
       transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
       style={{ display: "block", fontSize: "3rem", fontWeight: 800 }}
     >
       {price}
     </motion.span>
   </AnimatePresence>

3. Faire apparaître le badge de réduction en rebond scale

   Affiche le label de remise dans AnimatePresence pour qu'il monte et démonte avec l'état yearly. Utilise un tableau animate pour scale, [0, 1.15, 1], pour produire un dépassement naturel sans config spring supplémentaire.

   <AnimatePresence>
     {yearly && (
       <motion.span
         key="badge"
         initial={{ scale: 0, opacity: 0 }}
         animate={{ scale: [0, 1.15, 1], opacity: 1 }}
         exit={{ scale: 0, opacity: 0 }}
         transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
       >
         Save 20%
       </motion.span>
     )}
   </AnimatePresence>

4. Construire les cartes avec entrée décalée

   Itère sur le tableau tiers et rends chaque carte comme un motion.div avec whileInView. Multiplie l'index par 0.08 pour le délai afin que les cartes cascadent de gauche à droite. Ajoute la prop layout pour que Framer Motion gère les décalages de layout pendant l'animation du prix.

   <motion.div
     key={tier.name}
     layout
     initial={{ opacity: 0, y: 32 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.55, ease: E, delay: i * 0.08 }}
   >

Quand l'utiliser

Ce pattern est le bon choix pour les produits SaaS qui proposent une facturation mensuelle et annuelle et veulent rendre l'économie tangible sans rechargement de page. Le prix animé attire l'oeil sur la différence de valeur ; le toggle spring paraît premium sans être distrayant. À éviter sur les pages produit e-commerce ou les services à formule unique où un toggle de facturation n'aurait pas de sens. Sur mobile, le thumb spring et l'animation du prix tiennent bien, mais teste l'effondrement de la grille sur viewports étroits pour vérifier la lisibilité.

Utilisé par

• Linear, Utilise un toggle mensuel/annuel avec mise à jour instantanée du prix et un label d'économie visible sur le plan annuel.
• Vercel, Basculement de période de facturation qui met les prix à jour en ligne, avec un label de réduction annuelle clair sur chaque formule.
• Lemon Squeezy, Toggle animé entre mensuel et annuel, badge de remise sur le label annuel, correspondant exactement à ce pattern.
• Supabase, Bascule mensuel/annuel qui met les prix à jour par formule et met en avant les économies sur le plan annuel.

FAQ