Anatomie

La section comporte trois zones empilées. En haut, un header centré avec un badge optionnel, un titre h2 et un sous-titre, révélés par un seul fade-up whileInView. En dessous, la barre d'onglets pill : un conteneur arrondi avec une bordure contient les boutons côte à côte ; chaque bouton est positionné en relative pour que le div indicateur puisse s'y positionner en absolu inset. L'indicateur actif est rendu uniquement dans le bouton actif, ce qui permet au système de layout de Framer Motion de l'animer entre les siblings. La zone de contenu est une grille deux colonnes sur desktop : texte (titre, description, stats optionnelles) à gauche, placeholder visuel à droite.

Comment ça marche

L'indicateur pill utilise layoutId='pill-indicator' sur une motion.div rendue conditionnellement dans chaque bouton. Quand l'onglet actif change, l'ancien indicateur se démonte et le nouveau se monte, Framer Motion détecte le layoutId partagé et anime la transition entre les deux positions via un spring (stiffness 400, damping 30). L'indicateur passe derrière le label via z-index et porte 12% d'opacité sur la couleur accent, pour garder le texte lisible. Les permutations de contenu utilisent AnimatePresence mode='wait' : le panneau sortant monte et disparaît avant que le panneau entrant glisse depuis le bas, tous deux pilotés par une constante EASE [0.16, 1, 0.3, 1] pour une sensation vive et naturelle.

Comment le coder en React

1. Mettre en place l'état et les données

   Stocke l'identifiant de l'onglet actif avec useState, initialisé sur le premier onglet. Garde la liste des onglets en prop pour que le composant reste purement présentationnel. Chaque onglet porte un id, un label, un nom d'icône Lucide optionnel, un titre, une description et un tableau de stats optionnel.

   const [activeTab, setActiveTab] = useState(tabs[0]?.id ?? "");
   const current = tabs.find((t) => t.id === activeTab);

2. Construire la barre pill glissante

   Rends chaque onglet comme un bouton natif dans un conteneur flex arrondi. Dans le bouton actif, rends une motion.div avec layoutId='pill-indicator' positionnée en absolu avec inset:0. Framer Motion l'animera entre les boutons qui deviennent actifs, donnant l'effet de glissement sans aucun calcul manuel.

   {isActive && (
     <motion.div
       layoutId="pill-indicator"
       style={{ position: "absolute", inset: 0, borderRadius: "var(--radius-full)", background: "var(--color-accent)", opacity: 0.12 }}
       transition={{ type: "spring", stiffness: 400, damping: 30 }}
     />
   )}

3. Animer le panneau de contenu

   Enveloppe le bloc de contenu dans AnimatePresence avec mode='wait' et donne-lui current.id comme key. Cela garantit que le contenu sortant part complètement avant que le contenu entrant n'apparaisse, sans chevauchement. Utilise un fade avec décalage y : initial y:16, animate y:0, exit y:-10 avec ton cubic-bezier EASE pour une sensation directionnelle soignée.

   const EASE = [0.16, 1, 0.3, 1] as const;
   
   <AnimatePresence mode="wait">
     {current && (
       <motion.div
         key={current.id}
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -10 }}
         transition={{ duration: 0.35, ease: EASE }}
       >
         {/* content */}
       </motion.div>
     )}
   </AnimatePresence>

4. Ajouter les icônes et les stats optionnelles

   Résous les icônes Lucide dynamiquement à partir du nom d'icône stocké dans chaque onglet. Rends les stats en flex row sous la description quand elles sont présentes. Les stats utilisent la couleur accent pour la valeur et une couleur atténuée pour le label, créant un ancrage visuel rapide sans librairie de graphiques.

   function getIcon(name?: string) {
     if (!name) return null;
     return (LucideIcons as unknown as Record<string, React.ElementType>)[name] ?? null;
   }

Quand l'utiliser

Ce pattern convient aux sections d'aperçu de fonctionnalités, aux pages de solutions ou aux niveaux tarifaires où tu as trois à cinq options distinctes à présenter tout en gardant un espace vertical compact. Il fonctionne bien juste après un hero ou une ligne de stats. À éviter si tu as plus de six onglets, la barre pill passe mal à la ligne sur petits écrans, et à proscrire quand le contenu de chaque panneau est trop similaire ; les utilisateurs cessent de naviguer s'ils ne perçoivent pas de vraie différence entre les panneaux.

Utilisé par

• Stripe, Utilise des onglets pill segmentés pour basculer entre les catégories de produits sur ses pages marketing principales.
• Notion, Des barres d'onglets style pill apparaissent dans les sections de comparaison de fonctionnalités et de solutions par équipe sur le site marketing.
• Linear, Des sélecteurs d'onglets animés avec indicateurs glissants présentent les fonctionnalités de workflow sur la landing page produit.
• Loom, Des contrôles segmentés font basculer entre les panneaux de cas d'usage sur les pages de solutions et de tarification.

FAQ