A stack that fans out and cycles through itself looks like it needs one timeline per card. It doesn't. CardSwap keeps a single order array; every card reads its own position out of it and springs there.

Nothing about a card's depth lives on the card. CardSwap keeps one order array — order[r] is the item index currently at rank r, 0 being the front — and derives each card's rank by inverting it:

const rankOf = React.useMemo(() => {
  const m = new Array<number>(n);
  order.forEach((itemIndex, rank) => {
    m[itemIndex] = rank;
  });
  return m;
}, [order, n]);

That one number then drives four transforms at once — x, y, scale, rotateZ all step together as rank increases, so the whole fan reads as one consistent recession into the stack.

Advancing doesn't tween anyone's position directly — it rewrites order so the front item's index moves to the back, and lets every card's rank (and therefore its animate target) fall out of that new array on the next render:

Because every card's animate prop is just "whatever rankOf[i] says right now," Framer's own diffing handles the transition — there's no manual tween between old and new slot, just a spring (stiffness 320 / damping 32 / mass 0.9) chasing a new target.

The pointer parallax lives one level up from the cards — on the [transform-style:preserve-3d] wrapper that holds all of them, not on any individual card:

One spring, applied once, tilts the entire fan together — cards don't fight each other for depth because their individual rotateZ offsets and the group's rotateX/rotateY compose on the same 3D stage.

One array, one lookup from index to rank, two springs (fast for the tilt, smooth for the re-flow) — that's the entire stack, cycling itself forever.