Anatomía

Un header centrado (badge, h2, descripción) aparece en fundido al entrar por primera vez en el viewport mediante una motion.div whileInView. Debajo se sitúa un contenedor de 500px con perspective:1200px definida directamente en el prop style. Cada capa es una motion.div posicionada en absoluto (la primera en relative para establecer la altura del contenedor) que contiene una tarjeta con ratio 5:3 con fondo semitransparente, borde y etiqueta centrada. Un breve párrafo indicando el scroll aparece bajo la pila.

Cómo funciona

El elemento section se pasa como target a useScroll con el offset ["start 0.7", "end 0.3"], de modo que la animación se ejecuta mientras la sección ocupa el 60% central del viewport. Para cada capa, el código calcula un offset: el índice de la capa menos el índice central del array. Ese offset se usa luego para escalar las salidas de useTransform: las capas por encima del centro se desplazan hacia arriba y a la izquierda, las que están por debajo se desplazan hacia abajo y a la derecha. rotateX pasa de 0 a -8 grados en la primera mitad del scroll, dando a toda la pila una sutil inclinación hacia delante. La opacidad empieza en 0.6 antes de la ventana de scroll, sube a 1 durante, y vuelve a 0.8 al final.

Cómo crearlo en React

1. Configura el observador de scroll en la sección

   Asocia un ref a tu elemento section y pásalo a useScroll. El array offset controla cuándo se abre y se cierra la ventana de animación: "start 0.7" significa que la animación empieza cuando la parte superior de la sección alcanza el 70% desde el borde superior del viewport.

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

2. Calcula los motion values por capa a partir del índice central

   Dentro del map, deriva un offset a partir de la distancia de la capa respecto al centro del array. Multiplica ese offset por la distancia de separación deseada para obtener los rangos de translateY y translateX. Cada llamada a useTransform produce un motion value independiente al que Framer Motion se suscribe directamente, sin re-renders al hacer 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. Añade una inclinación 3D con rotateX y perspective

   Define perspective:1200px en el div contenedor (no en las propias motion.div) para que todas las capas compartan el mismo espacio 3D. Proyecta scrollYProgress de 0 a 0.5 sobre valores de rotateX de 0 a -8 grados. La dirección negativa inclina la parte superior de la pila hacia el espectador.

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

4. Posiciona las capas en absoluto, la primera en relative

   Define position:'relative' en la primera capa para que el contenedor tome su altura, y position:'absolute', top:0, left:0, right:0 en todas las capas siguientes. Así todas las capas empiezan apiladas al ras y el contenedor no colapsa. Asigna zIndex como totalLayers - i para que la primera capa quede por encima.

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

Cuándo usarlo

Recurre a este patrón cuando un producto tiene capas técnicas claramente diferenciadas que merece la pena nombrar: plataformas SaaS (UI, API, infra), productos hardware (carcasa, PCB, matriz de sensores) u herramientas de diseño (motor de render, capa de plugins, canvas). Funciona mejor en una sección de "cómo funciona" o "tecnología" situada de la parte inicial a la media de la página. Evítalo en páginas de marketing sencillas donde la complejidad es un lastre, y no lo coloques nunca justo antes o después de un footer o un formulario de auth: el efecto necesita espacio y un lector ya involucrado con el producto.

Usado por

• Stripe, Usa ilustraciones de tarjetas apiladas por capas que se separan para revelar la arquitectura del flujo de pago en sus páginas de producto.
• Linear, Emplea revelaciones de capas guiadas por scroll para mostrar la estructura de su motor de gestión de proyectos.
• Apple, Las páginas de producto de Mac Pro y iPhone usan animaciones de capas de hardware explosionadas para comunicar la profundidad de su ingeniería.
• Vercel, Los diagramas de infraestructura de la página de plataforma se separan en capas distintas (Edge Network, Functions, Build) a medida que el usuario hace scroll.

FAQ