Anatomie

La section enveloppe un header centré (badge optionnel, titre h2, sous-titre) et un conteneur CSS Grid. Chaque BentoItem a un id, un titre, une description, un indicateur de type ('text' ou 'visual'), une classe Tailwind de span optionnelle (ex. 'col-span-2') et un nom d'icône Lucide optionnel. Les cartes de type visual affichent l'icône en 64px à 20% d'opacité comme fond décoratif avant le bloc texte. Les cartes text affichent seulement le titre et la description alignés en bas de la carte.

Comment ça marche

Chaque carte est une motion.div avec initial={{ opacity: 0, y: 24 }} et whileInView={{ opacity: 1, y: 0 }}. L'option viewport { once: true, margin: '-40px' } déclenche l'animation 40px avant que la carte soit entièrement visible, évitant un apparition brusque. Un délai de i * 0.1 secondes égrène les cartes séquentiellement sans surcharge d'orchestration. La résolution d'icône utilise une clé dynamique dans l'espace de noms Lucide (LucideIcons[name]) pour que n'importe laquelle des 1400+ icônes soit référençable par chaîne depuis la couche de données.

Comment le coder en React

1. Définir l'interface BentoItem et le conteneur de grille

   Crée un type BentoItem avec id, title, description, type ('text' | 'visual'), une chaîne span optionnelle et un nom d'icône optionnel. Rends un CSS Grid à 3 colonnes sur écrans medium et des lignes automatiques de 180px. La prop span se mappe directement en classe Tailwind sur chaque carte.

   // types
   interface BentoItem {
     id: string;
     title: string;
     description: string;
     type: "text" | "visual";
     span?: string;   // e.g. "col-span-2 row-span-2"
     icon?: string;   // Lucide icon name
   }
   
   // grid container
   <div className="grid grid-cols-1 md:grid-cols-3 auto-rows-[180px] gap-5">
     {items.map((item, i) => (
       <BentoCard key={item.id} item={item} index={i} />
     ))}
   </div>

2. Résoudre les icônes Lucide par clé string

   Importe l'espace de noms Lucide en entier et résous le composant icône par nom au moment du rendu. Cela maintient la couche de données libre de tout import React et permet de piloter les icônes depuis un CMS ou un fichier JSON.

   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;
   }
   
   // inside the card
   const Icon = getIcon(item.icon);
   {Icon && <Icon className="h-16 w-16" style={{ color: "var(--color-foreground)" }} />}

3. Ajouter des scroll reveals en stagger avec Framer Motion

   Enveloppe chaque carte dans une motion.div. Règle le délai sur i * 0.1 pour que les cartes se cascadent de gauche à droite. Le margin: '-40px' sur viewport fait démarrer l'animation légèrement avant que la carte soit complètement visible, pour un rendu fluide plutôt qu'une apparition brusque.

   <motion.div
     initial={{ opacity: 0, y: 24 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: "-40px" }}
     transition={{ delay: i * 0.1, duration: 0.5 }}
     className={`rounded-2xl border p-6 flex flex-col justify-end ${item.span || "col-span-1"}`}
   >

4. Utiliser les CSS tokens pour le thème

   Applique les couleurs exclusivement via des propriétés CSS custom pour que la grille respecte n'importe quel preset de thème sans modifier le code. Les cartes visuelles utilisent --color-background-alt pour une teinte subtile ; les cartes texte utilisent --color-background-card. Le badge et les bordures suivent --color-accent et --color-border.

   // visual card
   style={{
     backgroundColor: "var(--color-background-alt, var(--color-background-card))",
     borderColor: "var(--color-border)",
   }}
   
   // text card
   style={{
     backgroundColor: "var(--color-background-card)",
     borderColor: "var(--color-border)",
   }}

Quand l'utiliser

Utilise cette grille quand tu dois présenter 3 à 6 fonctionnalités avec des poids visuels variables, certaines nécessitent une longue description, d'autres juste un titre et une indication graphique. Elle convient bien comme bloc 'Ce que nous faisons' pour les agences, une section 'Capacités clés' pour le SaaS, ou un temps fort dans un portfolio. À éviter quand tous les éléments ont une importance égale (préfère une grille de cartes uniforme) et quand les cartes portent des contrôles interactifs nécessitant un dimensionnement homogène.

Utilisé par

• Linear, Utilise des grilles de fonctionnalités asymétriques avec des tailles de cartes mixtes pour présenter les capacités du produit sur ses pages marketing.
• Vercel, Déploie des blocs éditoriaux style bento pour mettre en avant des fonctionnalités d'infrastructure avec des densités de cartes texte et visuelles variées.
• Stripe, Combine des cartes visuelles accentuées d'icônes avec des cartes plein texte dans ses sections de fonctionnalités produit pour équilibrer lisibilité et profondeur.
• Loom, Utilise des grilles de fonctionnalités à colonnes variées sur sa page d'accueil pour donner plus de place visuelle aux différenciateurs clés qu'aux points secondaires.

FAQ