Anatomie

La section enveloppe un header centré (badge, h2, sous-titre) et une grille CSS 3×3. Six composants MagneticCell occupent les zones de grille a à f, deux cellules s'étendent sur deux colonnes chacune, créant l'asymétrie. Chaque cellule porte une des cinq variantes de contenu (stat, feature, quote, visual, cta) rendu par un composant CellContent sans état. Un seul state hoveredId au niveau de la section pilote l'estompage des cartes inactives.

Comment ça marche

Dans chaque MagneticCell, deux motion values suivent le décalage normalisé du curseur dans la carte : mx et my varient de -0.5 à 0.5. useTransform les mappe vers rotateX/rotateY (±8 degrés), et useSpring lisse les deux avec la même config (stiffness 220, damping 28, mass 0.6). Un spring séparé sur scale passe de 1 à 1.025 à l'entrée. Au mouseleave, toutes les valeurs reviennent à 0 et la carte se redresse via le même spring. La cellule visual ajoute une animation secondaire : son blob dégradé monte à scale 1.15 et tourne de 15 degrés au survol, via la prop animate de Framer Motion avec la courbe EASE custom.

Comment le coder en React

1. Prépare la grille asymétrique

   Définis la mise en page avec grid-template-areas pour que les tailles de cellules varient sans media queries. Assigne à chaque BentoCell un string area qui correspond au template. Trois rangées et trois colonnes suffisent pour six cellules dont deux s'étendent sur deux colonnes.

   style={{
     display: "grid",
     gridTemplateColumns: "repeat(3, 1fr)",
     gridTemplateAreas: `"a a b" "c d d" "e e f"`,
     gap: "0.875rem",
   }}

2. Suis la position normalisée du curseur dans chaque carte

   Au mousemove, calcule le décalage X et Y du curseur par rapport à la carte via getBoundingClientRect, puis divise par width/height pour obtenir une valeur entre 0 et 1. Soustrais 0.5 pour que le centre mappe à 0 et les bords à ±0.5. Écris ces valeurs dans deux instances useMotionValue.

   const mx = useMotionValue(0);
   const my = useMotionValue(0);
   
   function handleMove(e: React.MouseEvent) {
     const r = ref.current?.getBoundingClientRect();
     if (!r) return;
     mx.set((e.clientX - r.left) / r.width - 0.5);
     my.set((e.clientY - r.top) / r.height - 0.5);
   }

3. Convertis le décalage en rotateX/Y via des springs

   Passe mx et my dans useTransform pour produire les angles de rotation, puis enveloppe chacun dans un useSpring pour l'inertie. Applique rotateX et rotateY sur le motion.div avec perspective:'900px' et transformStyle:'preserve-3d' pour que le rendu 3D soit correct.

   const SPRING = { stiffness: 220, damping: 28, mass: 0.6 };
   const rotateX = useSpring(useTransform(my, [-0.5, 0.5], [8, -8]), SPRING);
   const rotateY = useSpring(useTransform(mx, [-0.5, 0.5], [-8, 8]), SPRING);
   const scale   = useSpring(1, SPRING);
   
   // on enter
   scale.set(1.025);
   // on leave
   mx.set(0); my.set(0); scale.set(1);

4. Ajoute le spotlight de survol au niveau de la grille

   Remonte un state hoveredId de type string au composant section parent. Chaque MagneticCell appelle onHover(cell.id) à l'entrée et onHover(null) à la sortie. Les cartes dont hoveredId est défini mais ne correspond pas à leur propre id s'animent vers opacity 0.6 via la prop animate de Framer Motion, créant un effet de focus sur toute la grille sans manipulation de classes CSS.

Quand l'utiliser

Utilise cette section quand tu veux présenter les points forts d'un produit (une métrique, une feature, un témoignage, un CTA) en une seule déclaration visuelle, landings SaaS, vitrines d'agences, lancements d'outils IA. La diversité des cellules maintient l'intérêt du scan. Évite-la sur les pages éditoriales denses ou les dashboards où la densité d'information prime sur le soin visuel. Comme le tilt est piloté par le pointeur, prévois un fallback statique propre pour les visiteurs sur mobile.

Utilisé par

• Vercel, Utilise des mises en page grille bento asymétriques pour présenter les capacités produit, métriques et preuves sociales sur sa homepage.
• Linear, Combine des cartes feature de tailles variées avec de subtils effets de profondeur au survol pour mettre en valeur les capacités produit sur ses pages marketing.
• Stripe, Utilise des mises en page grille multi-cellules mixant stats, mises en avant de features et CTA dans une seule section sur ses pages produit et feature.
• Loom, Emploie des grilles feature de style bento avec des tailles de carte variées et des états de survol interactifs pour communiquer la valeur produit sur les landing pages.

FAQ