Anatomy

The section has a centered header (badge, H2, subtitle) then a stacked card area. The stack is a 560px-wide, 300px-tall relative container. Inside it, three motion.div elements are positioned absolutely at top:0 and animated to their Y offset and scale via the STACK_OFFSETS table. Cards are rendered back-to-front (reversed z-index) so the top card paints last. Below the stack, prev/next chevron buttons flank an animated dot strip, active dot widens to 24px, inactive dots stay at 8px.

How it works

State tracks a single activeIndex integer and a direction (1 or -1). The three visible indices are computed as `[0, 1, 2].map(offset => (activeIndex + offset) % n)`, so the deck always shows the current card plus the next two. Each motion.div receives a key of `testimonialIndex-activeIndex`; when it changes, AnimatePresence in popLayout mode removes the old element and inserts the new one. The entering top card (pos === 0) starts at y:-120 with a slight rotation so it appears to fly in from above. The exit animation sends it upward (-160px) with an outward rotation. Background cards just slide up to their new depth position via the layout prop, with staggered delays (pos * 0.06s) so the cascade reads as physical.

How to build it in React

1. Define the depth table

   Create a STACK_OFFSETS array with three entries, one per visible layer. Each entry holds a Y pixel offset, a scale factor, an opacity value, and a box-shadow string. Layer 0 is front, layer 2 is furthest back. These are the only values you need to tune to change the depth feel.

   const STACK_OFFSETS = [
     { y: 0,  scale: 1,    opacity: 1,    shadow: "0 24px 80px ..." },
     { y: 14, scale: 0.96, opacity: 0.85, shadow: "0 12px 40px ..." },
     { y: 26, scale: 0.92, opacity: 0.6,  shadow: "0 6px 20px ..."  },
   ];

2. Compute the three visible indices

   From a single activeIndex state value, derive which testimonials fill the three stack positions. Map offsets 0-2 modulo the total count. This means you never need to store the full visible set, just the active cursor.

   const stackIndices = [0, 1, 2].map(
     (offset) => (activeIndex + offset) % n
   );

3. Animate with AnimatePresence + layout

   Wrap each card in AnimatePresence (mode='popLayout') and give the motion.div the layout prop so React re-orders depth positions smoothly. Key the motion.div on both testimonialIndex and activeIndex so a card re-entering after a full loop triggers the entrance animation again. The staggered transition delay (`pos * 0.06`) makes each background card wait slightly so the cascade feels sequential.

   <AnimatePresence key={testimonialIndex} mode="popLayout">
     <motion.div
       key={`${testimonialIndex}-${activeIndex}`}
       layout
       initial={pos === 0 ? { y: -120, rotate: -6, scale: 0.9 } : false}
       animate={{ y: offset.y, scale: offset.scale, opacity: offset.opacity }}
       exit={{ y: -160, rotate: -8, scale: 0.88 }}
       transition={{ ...SPRING, delay: pos * 0.06 }}
     />
   </AnimatePresence>

4. Wire auto-play and controls

   A useEffect with setInterval calls the advance function every autoPlayInterval milliseconds. The advance function sets direction then increments activeIndex modulo n. Both prev/next buttons call advance with -1 or 1, and dot buttons jump directly by computing the sign of (target - current) to set direction correctly before updating activeIndex.

When to use it

Use this pattern on landing pages where social proof is a primary conversion driver: SaaS pricing sections, agency portfolio pages, or any product that benefits from premium visual treatment. The physical depth metaphor works especially well with luxury, bold, or elegant brand identities. Skip it when testimonials are secondary content, a simpler grid or single-quote layout loads faster and competes less with surrounding information. Also skip it if you have fewer than three testimonials; the stack illusion breaks with only one or two cards.

Used by

• Stripe, Uses layered card motifs in marketing to convey depth and premium quality across its product pages.
• Loom, Rotates stacked testimonial cards in its homepage hero to showcase customer impact with visual interest.
• Framer, Employs card-stack and physics-driven carousel patterns throughout its site to demonstrate its own animation tooling.
• Webflow, Features stacked card testimonials with depth transitions on its customer showcase pages.

FAQ