Anatomie

Le composant s'articule en trois couches. Une balise section extérieure gère le padding pleine largeur et les tokens de fond. À l'intérieur, un conteneur contraint contient un header centré (sous-titre en capitales, grand h2). En dessous, une div désignée comme conteneur de perspective accueille une motion.div qui joue le rôle du plan 3D ; cette motion.div affiche la grille CSS en colonnes auto-fill (minWidth 240px). Chaque cellule est une autre motion.div avec sa propre entrée whileInView, qui enveloppe une carte à ratio fixe (4/3) avec couleur de fond, border-radius, ombre portée et icône placeholder centrée.

Comment ça marche

Au mousemove sur le conteneur de perspective, le handler normalise la position du curseur dans une plage -0,5/+0,5 relative aux dimensions du conteneur via getBoundingClientRect. Il multiplie ensuite le décalage horizontal par 8 pour l'angle de rotation Y et le décalage vertical par -6 pour l'angle X. Les deux valeurs alimentent des springs Framer Motion (stiffness 120, damping 20, mass 0,8) afin que la grille suive le curseur avec un retard et un rebond naturels. Au mouseleave, les deux springs reviennent à zéro. Le CSS perspective: 1200px sur le wrapper et transformStyle: preserve-3d sur la grille rendent le tilt visible ; sans preserve-3d la rotation n'a aucune profondeur visuelle.

Comment le coder en React

1. Mettre en place le wrapper de perspective et les motion values

   Crée une div conteneur avec perspective: 1200px. À l'intérieur, affiche une motion.div avec style={{ rotateX, rotateY, transformStyle: 'preserve-3d' }}. Connecte rotateX et rotateY à des instances useSpring pour que chaque changement s'anime en douceur.

   const SPRING = { stiffness: 120, damping: 20, mass: 0.8 };
   const rotateX = useSpring(useMotionValue(0), SPRING);
   const rotateY = useSpring(useMotionValue(0), SPRING);

2. Lire et normaliser la position de la souris

   Attache onMouseMove au conteneur de perspective. Soustrait le bounding rect du conteneur pour obtenir une position locale, puis divise par width/height pour obtenir des valeurs entre 0 et 1. Décale de -0,5 pour que le centre soit 0,0. Multiplie par ton échelle de rotation et pousse dans les springs.

   function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     const cx = (e.clientX - rect.left) / rect.width - 0.5;
     const cy = (e.clientY - rect.top) / rect.height - 0.5;
     rotateY.set(cx * 8);
     rotateX.set(cy * -6);
   }

3. Réinitialiser au départ de la souris

   Ajoute un handler onMouseLeave qui remet les deux springs à 0. Le spring de Framer Motion animera le retour afin que la grille revienne en douceur plutôt que de claquer, préservant le ressenti physique.

   function handleMouseLeave() {
     rotateX.set(0);
     rotateY.set(0);
   }

4. Échelonner les entrées de cartes avec whileInView

   Enveloppe chaque cellule de la grille dans une motion.div avec initial={{ opacity: 0, z: -60, scale: 0.9 }} et whileInView={{ opacity: 1, z: 0, scale: 1 }}. Passe delay: index * 0.05 dans la transition pour que les cartes apparaissent en cascade plutôt que toutes en même temps.

   <motion.div
     initial={{ opacity: 0, z: -60, scale: 0.9 }}
     whileInView={{ opacity: 1, z: 0, scale: 1 }}
     viewport={{ once: true, margin: "-40px" }}
     transition={{ duration: 0.65, delay: i * 0.05, ease: EASE }}
     style={{ transformStyle: "preserve-3d" }}
   >

Quand l'utiliser

Ce pattern est à son avantage sur les homepages de portfolio, les showcases d'agence et les galeries produit où tu veux que la grille elle-même paraisse vivante. Utilise-le quand la collection compte 6 à 12 éléments, moins paraît creux sous l'effet de tilt, plus rend la profondeur moins lisible. Évite-le sur les pages catégorie e-commerce où les utilisateurs parcourent des dizaines d'articles rapidement ; une grille statique est plus rapide à analyser. Sur mobile le tilt ne fait rien, donc assure-toi que le layout statique soit solide seul.

Utilisé par

• Awwwards, Présente des portfolios d'agences qui utilisent couramment les grilles en perspective 3D comme interactions signatures sur les sites primés.
• Dribbble, Les pages portfolio de designers utilisent fréquemment des grilles à tilt au survol pour afficher leurs collections avec de la profondeur.
• Resend, Utilise de subtils décalages de perspective 3D sur les grilles de cartes de son site marketing pour ajouter un caractère tactile.
• Basement Studio, Site d'agence construit autour de grilles 3D réactives à la souris comme signature visuelle centrale.

FAQ