Anatomía

La sección se organiza en tres bloques verticales dentro de un contenedor centrado: un pequeño badge pill con una etiqueta en mayúsculas, un h2 que sube una vez al entrar, y un párrafo grande donde cada palabra se envuelve en su propio motion.span. El párrafo usa display:flex + flex-wrap para mantener los spans de palabras inline con saltos de línea naturales. La ref del contenedor se asocia al wrapper del párrafo de palabras para que el offset de scroll siga ese nodo DOM concreto.

Cómo funciona

La animación está enteramente controlada por el hook useScroll de Framer Motion, que devuelve un valor scrollYProgress de 0 a 1 mientras el elemento objetivo atraviesa el viewport. El offset `['start 0.8', 'end 0.3']` significa que el progreso empieza cuando la parte superior de la sección llega al 80% hacia abajo de la pantalla y termina cuando la parte inferior alcanza el 30%. Las palabras se dividen con text.split(' '), y cada una recibe un intervalo proporcional: la palabra i obtiene [i / totalWords, (i+1) / totalWords]. useTransform mapea entonces ese intervalo a una opacidad de [0.15, 1], de modo que las palabras se iluminan en secuencia en lugar de todas a la vez.

Cómo crearlo en React

1. Configurar el contexto de scroll con una ref de contenedor

   Crea una ref y pásala como target a useScroll. Ajusta el offset para que la animación abarque una ventana cómoda mientras la sección entra en vista. Los valores del offset siguen el formato [puntoDeInicio, puntoDeFin] donde '0.8' significa 80% hacia abajo del viewport.

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

2. Dividir el párrafo en palabras y asignar los intervalos

   Divide la cadena de texto por los espacios para obtener un array de palabras. Para cada palabra en el índice i dentro de un array de totalWords elementos, calcula start = i / totalWords y end = (i + 1) / totalWords. Estos dos números se convierten en el intervalo de entrada para useTransform.

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

3. Animar la opacidad de cada palabra con useTransform

   En un subcomponente RevealWord, llama a useTransform para mapear el intervalo [start, end] de scrollYProgress a una opacidad de [0.15, 1]. Aplica el valor motion resultante a un motion.span. Añade willChange:'opacity' para indicar al navegador la composición por 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. Envolver las palabras en un contenedor flex

   Renderiza las palabras dentro de una etiqueta p con display:flex y flex-wrap:wrap. Cada motion.span necesita un marginRight para añadir espaciado entre palabras, ya que los spans inline-block no heredan los espacios normales. Define un tamaño de fuente grande con clamp() para que el texto se lea como una declaración, no como cuerpo de texto.

   <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>

Cuándo usarlo

Este patrón es pertinente cuando tienes una declaración de misión o un manifiesto de 20 a 40 palabras que merece más que un simple bloque de texto estático. Funciona bien en páginas de agencia, portfolio y landing de marca, colocado en la parte alta o media de la página. Evítalo en dashboards densos, páginas de producto de e-commerce o cualquier contexto donde los usuarios buscan una respuesta concreta en lugar de leer. La sección también necesita suficiente altura vertical para que la animación de scroll tenga espacio; en páginas muy cortas el efecto se dispara demasiado rápido.

Usado por

• Dior, Fue pionera en la revelación palabra a palabra en sus páginas de storytelling de marca como interacción editorial distintiva.
• Stripe, Usa animaciones de texto guiadas por el scroll en sus páginas de campaña y about para marcar el ritmo de lectura de los relatos de producto.
• Lusion, Sitio de estudio portfolio que usa la revelación progresiva de texto como recurso narrativo principal a lo largo de toda la página.
• Awwwards, Este patrón aparece de forma constante en los sitios de agencia premiados catalogados en la plataforma, lo que lo convierte en un gesto de UI premium reconocido.

FAQ