Anatomy

A centered header (badge, h2, description) fades in on first viewport entry via a whileInView motion.div. Below it sits a 500px container with perspective:1200px set directly in the style prop. Each layer is an absolutely positioned motion.div (the first layer is relative to establish container height) holding a 5:3 aspect-ratio card with a semi-transparent background, a border, and a centered label. A faint scroll hint paragraph appears below the stack.

How it works

The section element is passed as target to useScroll with offset ["start 0.7", "end 0.3"], so the animation runs while the section occupies the middle 60% of the viewport. For each layer, the code computes an offset value: the layer's index minus the center index of the array. That offset is then used to scale useTransform outputs, layers above center travel upward and to the left, layers below center travel downward and to the right. rotateX animates from 0 to -8 degrees in the first half of the scroll, giving the whole stack a subtle forward lean. Opacity starts at 0.6 before the scroll window, rises to 1 during, and settles back to 0.8 at the end.

How to build it in React

1. Set up the scroll watcher on the section

   Attach a ref to your section element and pass it to useScroll. The offset array controls when the animation window opens and closes, "start 0.7" means the animation begins when the top of the section reaches 70% from the top of the viewport.

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

2. Compute per-layer motion values from the center index

   Inside the map, derive an offset from the layer's distance to the center of the array. Multiply that offset by your desired spread distance to get translateY and translateX ranges. Each call to useTransform produces an independent motion value that Framer Motion subscribes to directly, no re-renders on 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. Add a 3D tilt with rotateX and perspective

   Set perspective:1200px on the container div (not the motion.divs themselves) so all layers share the same 3D space. Map scrollYProgress from 0 to 0.5 onto rotateX values of 0 to -8 degrees. The negative direction tilts the top of the stack toward the viewer.

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

4. Position layers absolutely, first one relative

   Set position:'relative' on the first layer so the container takes its height, and position:'absolute', top:0, left:0, right:0 on every subsequent layer. This way all layers start stacked flush and the container does not collapse. Assign zIndex as totalLayers - i so the first layer renders on top.

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

When to use it

Reach for this pattern when a product has clearly distinct technical layers worth naming: SaaS platforms (UI, API, infra), hardware products (casing, PCB, sensor array), or design tools (renderer, plugin layer, canvas). It works best in a "how it works" or "technology" section placed early to middle in the page. Skip it on simple marketing pages where complexity is a liability, and avoid it directly before or after a footer or auth form, the effect needs breathing room and a reader already engaged with the product.

Used by

• Stripe, Uses layered, stacked card illustrations that separate to reveal payment flow architecture across its product pages.
• Linear, Employs scroll-driven layer reveals to showcase the structure of its project management engine.
• Apple, Mac Pro and iPhone product pages use exploded hardware layer animations to communicate engineering depth.
• Vercel, Infrastructure diagrams on the platform page separate into distinct layers (Edge Network, Functions, Build) as the user scrolls.

FAQ