Anatomie

La section contient deux couches décoratives (une fine ligne d'accent en haut et un halo flou sous le mockup), puis un seul wrapper perspective à 1200px. À l'intérieur, une motion.div porte le bloc texte et une motion.div imbriquée pour le mockup, chacune avec ses propres springs rotateX et scale. Le bloc texte se centre à 700px max-width ; le mockup se place en dessous à 900px max-width avec un ratio 16:9, affichant une fausse barre de chrome et un dashboard deux colonnes (nav latérale + cartes de stats + graphique barres).

Comment ça marche

Le hook scroll s'attache à l'élément section via useRef et lit scrollYProgress entre les offsets ["start start", "end start"]. Deux transformations brutes convertissent cette progression : rotateX passe de 15° à 0° sur la première moitié du scroll, et scale de 0.9 à 1.0 sur la même plage. L'opacité monte de 0.7 à 1.0 sur le premier quart. Chaque valeur brute traverse un useSpring (stiffness 60, damping 20) pour que l'animation traîne légèrement et semble physique. Le mockup utilise des springs séparés avec un angle de départ plus grand (22° à 2°) et une scale plus petite (0.88), créant une profondeur de type parallaxe entre les deux couches malgré une source de scroll commune.

Comment le coder en React

1. Brancher la source de scroll et les transformations brutes

   Attache un ref à la section, puis appelle useScroll avec cette cible et la paire d'offsets. Passe scrollYProgress dans des appels useTransform pour dériver les plages rotateX, scale et opacity. Garde la plage d'entrée étroite (0 à 0.5) pour que l'effet se résorbe avant que la section quitte le viewport.

   const sectionRef = useRef<HTMLElement>(null);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ["start start", "end start"],
   });
   const rawRotateX = useTransform(scrollYProgress, [0, 0.5], [15, 0]);
   const rawScale   = useTransform(scrollYProgress, [0, 0.5], [0.9, 1]);
   const rawOpacity = useTransform(scrollYProgress, [0, 0.25], [0.7, 1]);

2. Lisser les valeurs brutes avec des springs

   Enveloppe chaque motion value brute dans useSpring avec une config cohérente. Une stiffness faible (60) et un damping modéré (20) produisent l'effet de traîne sans oscillation. C'est le spring qui distingue un tilt cinématique d'une transition CSS rigide.

   const SPRING = { stiffness: 60, damping: 20, mass: 1 };
   const rotateX = useSpring(rawRotateX, SPRING);
   const scale   = useSpring(rawScale,   SPRING);
   const opacity = useSpring(rawOpacity, SPRING);

3. Appliquer le conteneur perspective et la couche motion

   Enveloppe le tout dans un div ordinaire avec `perspective: 1200px` et `perspectiveOrigin: "50% 30%"`. La motion.div intérieure reçoit les valeurs spring et doit avoir `transformStyle: "preserve-3d"` et `transformOrigin: "50% 0%"` pour que le tilt pivote depuis le bord supérieur, pas depuis le centre.

   <div style={{ perspective: "1200px", perspectiveOrigin: "50% 30%" }}>
     <motion.div
       style={{ rotateX, scale, opacity,
                transformStyle: "preserve-3d",
                transformOrigin: "50% 0%" }}
     >
       {/* text + mockup */}
     </motion.div>
   </div>

4. Donner au mockup son propre tilt plus prononcé

   Imbrique une deuxième motion.div pour le mockup avec sa propre paire useTransform + useSpring. Démarre-la à 22° au lieu de 15° et ne la ramène qu'à 2° (pas à 0°) pour conserver une légère profondeur une fois le hero entièrement affiché. Cet écart entre les deux couches se lit comme du parallaxe.

   const rawMockupRotateX = useTransform(scrollYProgress, [0, 0.5], [22, 2]);
   const rawMockupScale   = useTransform(scrollYProgress, [0, 0.5], [0.88, 1]);
   const mockupRotateX = useSpring(rawMockupRotateX, SPRING);
   const mockupScale   = useSpring(rawMockupScale,   SPRING);

Quand l'utiliser

Ce pattern fonctionne mieux sur une landing SaaS ou produit où tu as une vraie capture d'écran ou un mockup à montrer. L'inclinaison attire l'attention sur l'image produit et cadre la page comme une révélation. À éviter si la section above-the-fold porte déjà des animations lourdes, ou si l'action de conversion principale doit être immédiatement visible sans distraction visuelle. Comme l'effet est déclenché au scroll, il perd aussi son sens sur les pages courtes où le hero occupe l'essentiel de la hauteur du viewport.

Utilisé par

• Linear, Utilise une perspective 3D pilotée au scroll sur son hero produit pour faire apparaître le mockup depuis un angle incliné.
• Vercel, Applique des transformations de scale et de profondeur aux captures produit dans les heros, donnant l'impression que l'interface émerge vers le visiteur.
• Loom, Utilise une entrée perspective cinématique pour son mockup d'app sur la homepage marketing, passant d'un angle 3D compressé à une vue plate.

FAQ