Anatomy

The section has two decorative layers (a thin accent line at the top edge and a blurred ambient glow beneath the mockup) then a single perspective wrapper set at 1200px. Inside that wrapper, a motion.div carries the text block and a nested motion.div for the mockup, each with its own rotateX and scale springs. The text block centers at 700px max-width; the mockup sits below it at 900px max-width with a 16:9 aspect ratio, showing a chrome toolbar and a two-column fake dashboard (sidebar nav + stats cards + bar chart).

How it works

The scroll hook attaches to the section element via useRef and reads scrollYProgress between offset ["start start", "end start"]. Two raw transforms map that progress to the tilt values: rotateX goes from 15° to 0° over the first half of the scroll range, and scale goes from 0.9 to 1.0 over the same range. opacity climbs from 0.7 to 1.0 over the first quarter. Each raw value is fed through useSpring (stiffness 60, damping 20) so the animation trails slightly and feels physical. The mockup uses separate springs with a larger starting angle (22° to 2°) and a smaller starting scale (0.88), creating a parallax-like depth between the two layers despite sharing the same scroll source.

How to build it in React

1. Set up the scroll source and raw transforms

   Attach a ref to the section, then call useScroll with that target and the offset pair. Feed scrollYProgress into useTransform calls to derive rotateX, scale and opacity ranges. Keep the input range narrow (0 to 0.5) so the effect resolves before the section leaves the 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. Smooth the raw values through springs

   Wrap each raw motion value in useSpring with a consistent config. Low stiffness (60) and moderate damping (20) produce the trailing feel without oscillation. The spring is what separates a cinematic tilt from a stiff CSS transition.

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

3. Apply the perspective container and motion layer

   Wrap everything in a plain div with `perspective: 1200px` and `perspectiveOrigin: "50% 30%"`. The inner motion.div receives the spring values and must have `transformStyle: "preserve-3d"` and `transformOrigin: "50% 0%"` so the tilt rotates from the top edge, not the center.

   <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. Give the mockup its own deeper tilt

   Nest a second motion.div for the mockup with its own useTransform + useSpring pair. Start it at 22° instead of 15° and only bring it back to 2° (not 0°) to preserve a subtle depth when the hero is fully scrolled in. This offset between the two layers reads as 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);

When to use it

This pattern works best on a SaaS or product landing page where you have a real UI screenshot or mockup to show. The tilt draws attention to the product image and frames the page as a reveal. Avoid it when the above-the-fold section already carries heavy animations, or when the primary conversion action needs to be immediately visible without any motion distraction. Because the effect is scroll-triggered, it also makes less sense on short pages where the hero fills most of the viewport height.

Used by

• Linear, Uses scroll-driven 3D perspective on its product hero to pull the dashboard mockup into view from a tilted angle.
• Vercel, Applies scale and depth transforms to product screenshots in hero sections, creating a sense of the UI emerging toward the viewer.
• Loom, Uses a cinematic perspective entry for its app mockup on the marketing homepage, transitioning from a foreshortened 3D angle to flat.

FAQ