Anatomía

La sección tiene dos capas decorativas (una fina línea de acento en el borde superior y un halo ambiental difuminado bajo el mockup) y luego un único wrapper perspective fijado en 1200px. Dentro de ese wrapper, una motion.div lleva el bloque de texto y una motion.div anidada lleva el mockup, cada una con sus propios springs de rotateX y scale. El bloque de texto se centra a 700px de max-width; el mockup se sitúa debajo a 900px de max-width con una relación 16:9, mostrando una barra de chrome y un dashboard falso a dos columnas (nav lateral + tarjetas de estadísticas + gráfico de barras).

Cómo funciona

El hook de scroll se engancha al elemento section mediante useRef y lee scrollYProgress entre los offsets ["start start", "end start"]. Dos transformaciones brutas convierten ese progreso en los valores de tilt: rotateX pasa de 15° a 0° durante la primera mitad del recorrido de scroll, y scale de 0.9 a 1.0 en el mismo rango. La opacity sube de 0.7 a 1.0 durante el primer cuarto. Cada valor bruto pasa por un useSpring (stiffness 60, damping 20) para que la animación se retrase un poco y resulte física. El mockup usa springs separados con un ángulo de inicio mayor (22° a 2°) y una scale de inicio menor (0.88), creando una profundidad tipo parallax entre las dos capas pese a compartir la misma fuente de scroll.

Cómo crearlo en React

1. Configurar la fuente de scroll y las transformaciones brutas

   Asocia un ref a la section y luego llama a useScroll con ese target y el par de offsets. Pasa scrollYProgress a las llamadas de useTransform para derivar los rangos de rotateX, scale y opacity. Mantén el rango de entrada estrecho (0 a 0.5) para que el efecto se resuelva antes de que la section salga del 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. Suavizar los valores brutos con springs

   Envuelve cada motion value bruto en useSpring con una config coherente. Una stiffness baja (60) y un damping moderado (20) producen el efecto de arrastre sin oscilación. Es el spring lo que distingue un tilt cinematográfico de una transición CSS rígida.

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

3. Aplicar el contenedor perspective y la capa motion

   Envuelve todo en un div normal con `perspective: 1200px` y `perspectiveOrigin: "50% 30%"`. La motion.div interior recibe los valores del spring y debe tener `transformStyle: "preserve-3d"` y `transformOrigin: "50% 0%"` para que el tilt gire desde el borde superior, no desde el centro.

   <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. Dar al mockup su propio tilt más pronunciado

   Anida una segunda motion.div para el mockup con su propia pareja useTransform + useSpring. Arráncala a 22° en lugar de 15° y devuélvela solo hasta 2° (no a 0°) para conservar una profundidad sutil cuando el hero queda completamente desplegado. Esa diferencia entre las dos capas se percibe como parallax.

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

Cuándo usarlo

Este patrón funciona mejor en una landing de SaaS o de producto donde tienes una captura de UI real o un mockup que mostrar. La inclinación atrae la atención hacia la imagen del producto y enmarca la página como una revelación. Evítalo si la sección above-the-fold ya carga animaciones pesadas, o si la acción de conversión principal debe verse de inmediato sin distracciones de movimiento. Como el efecto se dispara con el scroll, también tiene menos sentido en páginas cortas donde el hero ocupa la mayor parte de la altura del viewport.

Usado por

• Linear, Usa una perspectiva 3D controlada por el scroll en su hero de producto para hacer aparecer el mockup del dashboard desde un ángulo inclinado.
• Vercel, Aplica transformaciones de scale y profundidad a las capturas de producto en las secciones hero, creando la sensación de que la interfaz emerge hacia el visitante.
• Loom, Usa una entrada en perspectiva cinematográfica para el mockup de su app en la homepage de marketing, pasando de un ángulo 3D escorzado a una vista plana.

FAQ