Testimonial carousels usually fake depth with a sliding track and a fixed crop. AnimatedTestimonials doesn't slide anything — every portrait is mounted in the same box for the component's whole lifetime, and "advancing" is just every plate re-targeting the same four properties on a spring.

testimonials.map renders every image up front, absolutely positioned on top of each other inside one relative box with [perspective:1000px]. isActive is the only thing that differs per render — there's no separate "current slide" node swapped in and out:

rotations is computed once with useMemo — `Math.floor(Math.random() * 16)

• 8per testimonial — and reused as both theinitialand the restingrotate` for every inactive card. That's why the fan looks organic instead of a uniform deck: each portrait has its own fixed tilt for the component's whole life, not a fresh random value every re-render.

When active changes, React re-renders every motion.img with new animate values — the previously-active plate's scale/rotate/zIndex relax back toward its rotations[i] resting state while the new active plate's animate toward 1/0/count. Framer interpolates each property on the same spring independently, which is why the stack looks like it's shuffling depth rather than crossfading a slide.

zIndex: count - Math.abs(active - i) is the detail that keeps the ordering readable: cards near the active index stay closer to the front than ones several positions away, so even mid-transition the depth order never looks scrambled.

The name/role/quote block and the individual words inside it are two separate AnimatePresence layers with two separate transitions.

mode="wait" on the outer AnimatePresence means the previous quote block fully exits (y: -12, fading out) before the next one mounts — so the per-word cascade always starts from a clean, empty frame. The words themselves don't have an exit — they're not independently removed, they just disappear with their parent block's exit animation. Only the entrance is staggered; the departure is one motion, not twenty-four unwinding in reverse.

The clock resets on every navigation, not just autoplay:

const next = React.useCallback(
  () => setActive((prev) => (prev + 1) % count),
  [count],
);

React.useEffect(() => {
  if (!autoplay || count <= 1) return;
  const id = setTimeout(next, interval);
  return () => clearTimeout(id);
}, [autoplay, interval, next, count, active]);

The effect is keyed on active, not mounted once with a setInterval. Every time active changes — autoplay or a manual arrow click — the old timeout is cleared and a fresh 5-second one starts. Click "next" right before autoplay would have fired, and you get a full 5 seconds again instead of an almost-immediate second flip.

One stack of always-mounted portraits re-targeting a shared spring, one quote block that fades as a unit while its words dissolve on their own staggered clock, one timeout that restarts on any navigation — three independent timing systems that read as a single, cohesive carousel.