Easing shapes one element’s motion; choreography arranges many. It is the difference between a room where everyone stands at once and a room where the eye is led, seat by seat. The tools are order, overlap, and delay: a stagger is its simplest sentence. Done well it goes unnoticed, felt only as composure; done badly it reads as a system that can’t decide what matters first.

In code, choreography is mostly orchestration: the parent owns the clock, the children inherit their cue from it.

import { motion } from "motion/react";

// Parent owns the timing; children inherit their cue.
const list = {
  animate: {
    transition: {
      staggerChildren: 0.06,
      delayChildren: 0.12,
    },
  },
};

const item = {
  initial: { opacity: 0, y: 8 },
  animate: { opacity: 1, y: 0 },
};

export function Cards({ cards }) {
  return (
    <motion.ul
      variants={list}
      initial="initial"
      animate="animate"
    >
      {cards.map((card) => (
        <motion.li key={card.id} variants={item}>
          {card.title}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Change one number, staggerChildren, and the page changes character: lower reads as a ripple, higher as a roll call.