Anatomie

Le composant est une structure en deux parties. Un bloc d'en-tête centré (badge, h2, sous-titre) s'anime en premier comme une seule unité via whileInView. En dessous, une grille CSS avec gridTemplateAreas définit trois lignes : la première divise en 4+2 colonnes, la deuxième en 2+2+2, la troisième en 3+3, donnant à chacune des six zones nommées (a à f) une empreinte distincte. Chaque cellule est une motion.div qui correspond à une zone. Le contenu interne est délégué à BentoCells.tsx, qui rend le sous-composant approprié selon le type de cellule.

Comment ça marche

Un tableau statique CELL_ANIMATIONS contient six paires initial/animate prédéfinies, une par position dans la grille : la cellule 0 scale depuis 0.92, les cellules 1 et 5 glissent depuis x: 30, la cellule 2 depuis x: -30, et les cellules 3 et 4 depuis y: 30. Chaque motion.div lit dans ce tableau par index et passe les deux états directement à whileInView. La prop viewport utilise once: true pour que les animations se déclenchent une seule fois. Le délai est calculé à i * 0.07s, les six cartes s'étalant sur environ 420ms au total. La courbe d'easing [0.16, 1, 0.3, 1] est un cubic-bezier custom qui accélère vite et décélère nettement, donnant à chaque entrée un snap physique. Dans les cellules chart, les barres MiniChart ont leur propre whileInView imbriqué avec un stagger supplémentaire (delay: 0.4 + i * 0.06), pour qu'elles poussent après que la carte elle-même se soit stabilisée.

Comment le coder en React

1. Définir la grille asymétrique avec gridTemplateAreas

   Utilise une grille CSS à 6 colonnes et assigne des zones nommées. Trois lignes donnent un découpage 4-2, 2-2-2 et 3-3. Chaque motion.div reçoit un style={{ gridArea: area }} où area est une des lettres a à f.

   gridTemplateColumns: "repeat(6, 1fr)",
   gridTemplateAreas: `
     "a a a a b b"
     "c c d d b b"
     "e e e f f f"
   `,

2. Construire le tableau CELL_ANIMATIONS

   Déclare le tableau en dehors du composant pour éviter qu'il soit recréé à chaque rendu. Chaque entrée contient des objets initial et animate indexés par position. La variété des directions (scale, x, y) est ce qui donne à la grille son rythme visuel lors de l'assemblage.

   const CELL_ANIMATIONS = [
     { initial: { opacity: 0, scale: 0.92 }, animate: { opacity: 1, scale: 1 } },
     { initial: { opacity: 0, x: 30 },       animate: { opacity: 1, x: 0 } },
     { initial: { opacity: 0, x: -30 },      animate: { opacity: 1, x: 0 } },
     { initial: { opacity: 0, y: 30 },       animate: { opacity: 1, y: 0 } },
   ];

3. Brancher whileInView avec des délais échelonnés

   Itère sur les cellules, lis la config d'animation par index, et calcule le délai à i * 0.07. Passe viewport={{ once: true, margin: '-50px' }} pour que chaque carte se déclenche légèrement avant d'être entièrement visible, ce qui rend la révélation vive plutôt que tardive.

   <motion.div
     key={cell.id}
     initial={anim.initial}
     whileInView={anim.animate}
     viewport={{ once: true, margin: "-50px" }}
     transition={{ delay: i * 0.07, duration: 0.65, ease: [0.16, 1, 0.3, 1] }}
     whileHover={{ y: -4, borderColor: "var(--color-accent)",
       transition: { duration: 0.2, ease: "easeOut" } }}
     style={{ gridArea: area }}
   >

4. Utiliser les tokens CSS pour le thème, jamais de couleurs en dur

   Chaque référence de couleur utilise var(--color-background-card), var(--color-accent), var(--color-border) et var(--color-foreground-muted). Le composant fonctionne ainsi sur les 7 presets de thème sans changer une seule prop. MiniChart teinte les barres avec color-mix(in srgb, var(--color-accent) N%, transparent) pour dériver des teintes plus légères depuis le même token.

Quand l'utiliser

Utilise ce composant au milieu d'une landing page, après le hero et avant le CTA, quand tu dois afficher un mix de chiffres, de preuve sociale et de texte features dans une section lisible d'un coup d'oeil. Il convient aux dashboards SaaS, portfolios d'agences et pages de marketing produit. À éviter quand les cellules partagent des types de contenu trop similaires (six cartes de features identiques, par exemple), car la mise en page asymétrique a besoin de contraste visuel entre les cellules pour se justifier. Passe également outre si tu as besoin de plus de six cellules ; au-delà de ce nombre, le stagger perd son rythme.

Utilisé par

• Stripe, Utilise des grilles bento à contenu mixte sur ses pages produit pour présenter métriques, extraits de code et highlights features côte à côte.
• Vercel, Des grilles de features asymétriques avec reveals décalés apparaissent tout au long des pages marketing de la plateforme.
• Linear, Layouts de type bento combinant cartes de stats, aperçus de features et courtes testimonials dans une seule section grille.
• Loom, Des cartes de tailles variées sur la homepage présentent chiffres d'usage, features équipe et preuve sociale dans un seul bloc lisible d'un coup d'oeil.

FAQ