Anatomie

La section contient deux régions principales. En haut, un bloc d'en-tête centré regroupe un badge optionnel en majuscules, un titre h2 avec taille de police fluid via clamp, et un paragraphe de sous-titre ; tout le bloc s'anime en une seule unité. En dessous, une grille CSS en `auto-fit, minmax(280px, 1fr)` affiche les cartes de features. Chaque carte est une colonne flex centrée : un conteneur d'icône carré de 48px avec une teinte accent à 10%, un h3 et une description limitée à 280px de large pour un confort de lecture optimal.

Comment ça marche

L'animation utilise `whileInView` de Framer Motion avec `viewport={{ once: true, margin: '-40px' }}` pour que chaque carte ne s'anime qu'une seule fois quand elle entre dans la zone visible. L'en-tête monte en fondu en une seule unité (opacity 0 → 1, y 16 → 0). Les cartes de features partagent le même keyframe mais reçoivent chacune un délai de `i * 0.06s`, créant un décalage de gauche à droite sur la rangée. Toutes les transitions utilisent la courbe cubique `[0.16, 1, 0.3, 1]`, une courbe fast-out-slow-in qui semble vive sans rebond. Les composants d'icônes sont résolus au rendu : la prop est une chaîne comme `'Zap'` et le composant fait une recherche dans l'objet namespace Lucide.

Comment le coder en React

1. Définir la structure des données et les props

   Crée une interface `FeatureItem` avec `id`, `title`, `description` et un champ `icon` string optionnel. Passe un tableau de ces items au composant avec un `badge`, `title` et `subtitle` optionnels pour l'en-tête de section. Garde le champ icon comme une simple chaîne, la résolution se fait dans le composant.

   interface FeatureItem {
     id: string;
     title: string;
     description: string;
     icon?: string;
   }

2. Résoudre les icônes Lucide depuis une prop string

   Importe tout le namespace Lucide avec `* as LucideIcons`, puis écris un petit helper qui fait une recherche par clé. Caste le namespace en `Record<string, React.ElementType>` pour éviter les erreurs TypeScript. Si le nom est absent ou inconnu, le helper retourne `null` et l'emplacement d'icône reste vide.

   import * as LucideIcons from "lucide-react";
   
   function getIcon(name?: string) {
     if (!name) return null;
     return (LucideIcons as unknown as Record<string, React.ElementType>)[name] || null;
   }

3. Construire la grille responsive avec CSS auto-fit

   Utilise un simple `div` avec `display: grid` et `gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))'`. Tu obtiens trois colonnes sur desktop, deux sur tablette et une sur mobile sans media queries. Règle le `gap` à environ 3rem verticalement et 2.5rem horizontalement pour l'aspect SaaS aéré.

   <div style={{
     display: "grid",
     gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
     gap: "3rem 2.5rem",
     maxWidth: 960,
     margin: "0 auto",
   }}>

4. Ajouter les animations whileInView décalées

   Entoure chaque carte d'une `motion.div` avec `initial={{ opacity: 0, y: 16 }}` et `whileInView={{ opacity: 1, y: 0 }}`. Règle `viewport={{ once: true, margin: '-40px' }}` pour que l'animation se déclenche une fois quand 40px de la carte sont visibles. Multiplie l'index de la carte par 0.06 pour le délai afin d'obtenir un décalage naturel de gauche à droite.

   <motion.div
     key={feature.id}
     initial={{ opacity: 0, y: 16 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: "-40px" }}
     transition={{ delay: i * 0.06, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
   >

Quand l'utiliser

Place cette section juste après le hero sur une landing SaaS ou produit, elle fonctionne mieux comme première explication de ce que fait ton produit. Six features est le bon équilibre ; en dessous de quatre la grille paraît vide, et au-dessus de huit, envisage une autre mise en page comme un split alterné. À éviter sur les pages à forte charge cognitive comme la documentation ou les tableaux de tarification. Sur mobile la grille auto-fit se replie naturellement en colonne unique, aucun travail supplémentaire n'est nécessaire.

Utilisé par

• Stripe, Utilise une grille d'icônes centrée sur ses pages produit pour présenter les capacités API avec des conteneurs d'icônes teintés et des descriptions courtes et percutantes.
• Linear, Présente les fonctionnalités de workflow dans une grille multi-colonnes aérée avec des badges d'icônes et une prose minimale, même philosophie d'espacement.
• Vercel, Les grilles de features avec conteneurs d'icônes monochromes sont un pattern récurrent sur ses pages plateforme et infrastructure.
• Notion, Déploie une grille icône + texte centrée sur ses pages équipes pour présenter les fonctionnalités de collaboration dans un format scannable.

FAQ