Anatomie

La section extérieure est une grille CSS avec `repeat(auto-fit, minmax(300px, 1fr))`, aucune media query de breakpoint n'est nécessaire, les colonnes reflotent naturellement. La colonne image (order 1) est un conteneur positionné avec sept éléments décoratifs flottants : cinq points et deux lignes horizontales, tous animés indépendamment en boucle infinie. À l'intérieur se trouve un div arrondi avec overflow:hidden qui sert de cadre de découpe ; la motion.div intérieure reçoit le translateY parallax. La colonne texte (order 2) contient quatre éléments motion échelonnés : label, h2, paragraphe et la rangée flex de stats optionnelle.

Comment ça marche

Deux refs pilotent l'effet. `sectionRef` est passé à `useScroll` avec `offset: ['start end', 'end start']`, cela mappe la plage de scroll de l'entrée du haut de la section dans le viewport jusqu'à la sortie de son bas. `useTransform` convertit cette progression 0 à 1 en une valeur Y de `-6%` à `+6%` sur la div image intérieure. Comme le conteneur image masque l'overflow et que la div intérieure est dimensionnée à `inset: -8%`, il y a toujours assez d'image pour remplir le cadre aux deux extrêmes. Les points et lignes flottants tournent en boucles `animate` Framer Motion indépendantes avec des délais échelonnés ; les éléments texte utilisent `whileInView` avec `once: true` pour s'animer une fois et rester visibles.

Comment le coder en React

1. Mettre en place le ref de suivi du scroll

   Attache un ref à l'élément section extérieur et passe-le à useScroll. Le tableau offset indique à Framer Motion de commencer le tracking quand le haut de la section entre par le bas du viewport et de s'arrêter quand le bas sort par le haut.

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

2. Mapper la progression du scroll sur une translation Y

   useTransform convertit la valeur de progression 0-1 en une chaîne de pourcentage que le navigateur peut appliquer directement comme transform CSS. Garde la plage petite, ±6% suffit pour un rendu premium subtil sans ressembler à un bug.

   const imageY = useTransform(scrollYProgress, [0, 1], ["-6%", "6%"]);

3. Clipper le cadre et appliquer la motion value

   Enveloppe l'image dans un div avec overflow:hidden et border-radius. À l'intérieur, rends une motion.div avec la valeur imageY et règle inset à -8% pour que le remplissage surdimensionné ne laisse jamais de vide aux extrêmes de la plage parallax.

   <div style={{ overflow: "hidden", borderRadius: "var(--radius-xl)" }}>
     <motion.div style={{ y: imageY, position: "absolute", inset: "-8%" }}>
       {/* image or gradient fill */}
     </motion.div>
   </div>

4. Échelonner le reveal du texte avec whileInView

   Chaque élément texte part de x:20/opacity:0 et s'anime vers x:0/opacity:1 à l'entrée dans le viewport. Incrémente le délai d'environ 80ms par élément pour que label, titre, corps et stats apparaissent en séquence plutôt que tous en même temps.

   <motion.h2
     initial={{ opacity: 0, x: 24 }}
     whileInView={{ opacity: 1, x: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.55, delay: 0.12, ease: [0.16, 1, 0.3, 1] }}
   >

Quand l'utiliser

Cette section convient sur les pages agence, portfolio et marketing SaaS où la marque ou la mission a besoin d'un ancrage visuel fort. L'image parallax donne une qualité premium et éditoriale sans surcharge 3D. À éviter sur les pages de documentation denses ou là où le taux de rebond est critique, l'animation ajoute du poids et de la distraction. Remplace le dégradé placeholder par une vraie photo d'équipe ou une capture produit pour un résultat plein effet.

Utilisé par

• Stripe, Utilise des mises en page à colonnes divisées avec une profondeur d'image légère pilotée au scroll sur ses pages produit et entreprise.
• Notion, Les pages about et équipe combinent typographie éditoriale, éléments décoratifs flottants et visuels superposés au scroll.
• Loom, Les sections entreprise et mission utilisent des splits deux colonnes avec rangées de stats et profondeur d'image à effet parallax.
• Pitch, Les pages marketing et about intègrent des mots accent en serif italique dans les titres, aux côtés de panneaux image animés au scroll.

FAQ