Anatomie

La section est organisée en trois blocs verticaux dans un conteneur centré : un petit badge pill avec un label en majuscules, un h2 qui monte une fois à l'entrée, et un grand paragraphe où chaque mot est enveloppé dans son propre motion.span. Le paragraphe utilise display:flex + flex-wrap pour garder les spans de mots inline avec des retours à la ligne naturels. La ref du conteneur est attachée au wrapper du paragraphe de mots pour que l'offset scroll suive ce nœud DOM précis.

Comment ça marche

L'animation est entièrement pilotée par le hook useScroll de Framer Motion, qui retourne une valeur scrollYProgress de 0 à 1 pendant que l'élément cible traverse le viewport. L'offset `['start 0.8', 'end 0.3']` signifie que la progression commence quand le haut de la section atteint 80% vers le bas de l'écran et se termine quand le bas atteint 30%. Les mots sont découpés avec text.split(' '), et chacun reçoit un intervalle proportionnel : le mot i obtient [i / totalWords, (i+1) / totalWords]. useTransform mappe alors cet intervalle sur une opacité de [0.15, 1], les mots s'allument donc en séquence plutôt que tous en même temps.

Comment le coder en React

1. Mettre en place le contexte scroll avec une ref de conteneur

   Crée une ref et passe-la comme target à useScroll. Règle l'offset pour que l'animation s'étende sur une fenêtre confortable pendant que la section entre en vue. Les valeurs d'offset suivent le format [pointDeDépart, pointDeFin] où '0.8' signifie 80% vers le bas du viewport.

   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: containerRef,
     offset: ["start 0.8", "end 0.3"],
   });

2. Découper le paragraphe en mots et assigner les intervalles

   Découpe la chaîne de texte par les espaces pour obtenir un tableau de mots. Pour chaque mot à l'index i dans un tableau de totalWords éléments, calcule start = i / totalWords et end = (i + 1) / totalWords. Ces deux nombres deviennent l'intervalle d'entrée pour useTransform.

   const words = text.split(" ");
   const totalWords = words.length;
   // inside the map:
   const start = i / totalWords;
   const end = (i + 1) / totalWords;

3. Animer l'opacité de chaque mot avec useTransform

   Dans un sous-composant RevealWord, appelle useTransform pour mapper l'intervalle [start, end] de scrollYProgress sur une opacité de [0.15, 1]. Applique la valeur motion résultante à un motion.span. Ajoute willChange:'opacity' pour indiquer au navigateur de passer sur le GPU.

   function RevealWord({ word, range, progress }) {
     const opacity = useTransform(progress, range, [0.15, 1]);
     return (
       <motion.span style={{ opacity, willChange: "opacity" }}>
         {word}
       </motion.span>
     );
   }

4. Envelopper les mots dans un conteneur flex

   Rends les mots dans une balise p stylée avec display:flex et flex-wrap:wrap. Chaque motion.span a besoin d'un marginRight pour ajouter l'espacement entre les mots, car les spans inline-block n'héritent pas des espaces normaux. Utilise une grande taille de police avec clamp() pour que le texte se lise comme une déclaration, pas comme du corps de texte.

   <p style={{ display: "flex", flexWrap: "wrap", fontSize: "clamp(1.5rem, 3.5vw, 2.75rem)" }}>
     {words.map((word, i) => (
       <RevealWord key={i} word={word} range={[i / total, (i+1) / total]} progress={scrollYProgress} />
     ))}
   </p>

Quand l'utiliser

Ce pattern est pertinent quand tu as une déclaration de mission ou un manifeste de 20 à 40 mots qui mérite plus qu'un simple bloc de texte statique. Il fonctionne bien sur les pages d'agence, de portfolio et de landing de marque, placé tôt à mi-page. À éviter sur les dashboards denses, les pages produit e-commerce, ou tout contexte où les utilisateurs cherchent une réponse précise plutôt que de lire. La section a aussi besoin d'une hauteur verticale suffisante pour que l'animation scroll ait de l'espace ; sur des pages très courtes l'effet se déclenche trop vite.

Utilisé par

• Dior, A popularisé la révélation mot par mot sur ses pages de storytelling de marque comme signature éditoriale.
• Stripe, Utilise des animations de texte pilotées au scroll sur ses pages campagne et à propos pour rythmer la lecture des récits produit.
• Lusion, Site de studio portfolio utilisant la révélation de texte progressive comme dispositif narratif principal tout au long de la page.
• Awwwards, Ce pattern apparaît régulièrement dans les sites d'agence primés répertoriés sur la plateforme, ce qui en fait un geste UI premium reconnu.

FAQ