Anatomie

Un header centré (badge, h2, description) apparaît en fondu au premier passage dans le viewport via une motion.div whileInView. En dessous se trouve un conteneur de 500px avec perspective:1200px définie directement dans le style prop. Chaque couche est une motion.div positionnée en absolu (la première en relative pour établir la hauteur du conteneur) contenant une carte au ratio 5:3 avec fond semi-transparent, bordure et label centré. Un court texte d'indication de scroll apparaît sous la pile.

Comment ça marche

L'élément section est passé comme target à useScroll avec l'offset ["start 0.7", "end 0.3"], de sorte que l'animation tourne pendant que la section occupe les 60% centraux du viewport. Pour chaque couche, le code calcule un offset : l'index de la couche moins l'index central du tableau. Cet offset est ensuite utilisé pour dimensionner les sorties de useTransform, les couches au-dessus du centre montent et partent à gauche, celles en dessous descendent et partent à droite. rotateX passe de 0 à -8 degrés dans la première moitié du scroll, donnant à toute la pile une légère inclinaison vers l'avant. L'opacité commence à 0.6 avant la fenêtre de scroll, monte à 1 pendant, et redescend à 0.8 à la fin.

Comment le coder en React

1. Initialise l'observateur de scroll sur la section

   Attache un ref à ton élément section et passe-le à useScroll. Le tableau offset contrôle l'ouverture et la fermeture de la fenêtre d'animation, "start 0.7" signifie que l'animation démarre quand le haut de la section atteint 70% depuis le haut du viewport.

   const sectionRef = useRef<HTMLElement>(null);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ["start 0.7", "end 0.3"],
   });

2. Calcule les motion values par couche depuis l'index central

   Dans le map, calcule un offset à partir de la distance de la couche par rapport au centre du tableau. Multiplie cet offset par la distance d'écartement voulue pour obtenir les plages de translateY et translateX. Chaque appel à useTransform produit une motion value indépendante à laquelle Framer Motion s'abonne directement, sans re-render au scroll.

   const centerIndex = (totalLayers - 1) / 2;
   const offset = i - centerIndex;
   
   const translateY = useTransform(
     scrollYProgress,
     [0, 0.5, 1],
     [0, offset * 80, offset * 120],
   );
   const translateX = useTransform(
     scrollYProgress,
     [0, 0.5, 1],
     [0, offset * 15, offset * 25],
   );

3. Ajoute l'inclinaison 3D avec rotateX et perspective

   Définis perspective:1200px sur le div conteneur (pas sur les motion.div elles-mêmes) pour que toutes les couches partagent le même espace 3D. Projette scrollYProgress de 0 à 0.5 sur des valeurs rotateX de 0 à -8 degrés. La direction négative incline le haut de la pile vers le spectateur.

   const rotateX = useTransform(
     scrollYProgress,
     [0, 0.5],
     [0, -8],
   );
   
   // On the container:
   <div style={{ perspective: "1200px" }}>

4. Positionne les couches en absolu, la première en relative

   Définis position:'relative' sur la première couche pour que le conteneur prenne sa hauteur, et position:'absolute', top:0, left:0, right:0 sur toutes les suivantes. Ainsi toutes les couches démarrent superposées et le conteneur ne s'effondre pas. Assigne zIndex à totalLayers - i pour que la première couche soit au-dessus.

   position: i === 0 ? "relative" : "absolute",
   top: 0,
   left: 0,
   right: 0,
   zIndex: totalLayers - i,

Quand l'utiliser

Utilise ce pattern quand un produit a des couches techniques clairement distinctes qui valent la peine d'être nommées : plateformes SaaS (UI, API, infra), produits hardware (boîtier, PCB, capteurs), ou outils de design (moteur de rendu, couche plugin, canvas). Il fonctionne mieux dans une section "comment ça marche" ou "technologie" placée tôt à mi-page. Évite-le sur des pages marketing simples où la complexité est un frein, et ne le positionne jamais juste avant ou après un footer ou un formulaire d'auth, l'effet a besoin d'espace et d'un lecteur déjà engagé avec le produit.

Utilisé par

• Stripe, Utilise des illustrations de cartes empilées qui se séparent pour révéler l'architecture du flux de paiement sur ses pages produit.
• Linear, Emploie des révélations de couches pilotées au scroll pour présenter la structure de son moteur de gestion de projets.
• Apple, Les pages produit Mac Pro et iPhone utilisent des animations de couches hardware éclatées pour communiquer la profondeur de l'ingénierie.
• Vercel, Les schémas d'infrastructure sur la page plateforme se séparent en couches distinctes (Edge Network, Functions, Build) à mesure que l'utilisateur scrolle.

FAQ