Stagger

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Markup: <ul class="stagger"><li style="--n: 0">…</li><li style="--n: 1">…
   </li>…</ul>. --n is the item's step: its index. */
.stagger > * {
  /* A one-shot entrance, so keyframes. `both` holds the hidden frame through
     the delay; the item keeps its space and takes clicks the whole time. */
  animation: rise-in 300ms var(--ease-out) both;
  /* Capped at 6 steps: a long list never waits more than 360ms for its last item. */
  animation-delay: calc(min(var(--n, 0), 6) * 60ms);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
}

/* Leaving: the list as one, never per item, or an item still waiting to enter
   would flash in. Set data-leaving on the list; remove it on transitionend. */
.stagger {
  transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out);
}
.stagger[data-leaving] {
  opacity: 0;
  translate: 0 -4px;
  pointer-events: none;
}
/* Leaving mid-cascade, every item stays where it got to. */
.stagger[data-leaving] > * {
  animation-play-state: paused;
}

/* Reduced motion: everything fades in together; the exit only fades. */
@media (prefers-reduced-motion: reduce) {
  .stagger > * {
    animation-name: fade-in;
    animation-duration: 150ms;
    animation-delay: 0s;
  }
  .stagger[data-leaving] {
    translate: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches

export function staggerIn(list) {
  const items = [...list.children]
  items.forEach((el, i) => {
    // Reduced motion: every item fades in at once.
    if (reduced) {
      el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, fill: 'backwards' })
      return
    }
    const n = Math.min(i, 6)
    el.animate(
      [
        { opacity: 0, transform: 'translateY(8px)', filter: 'blur(2px)' },
        { opacity: 1, transform: 'none', filter: 'none' },
      ],
      // backwards: hidden through the delay, then the item's own styles.
      { duration: 300, delay: n * 60, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', fill: 'backwards' },
    )
  })
}

import { AnimatePresence, motion, useReducedMotion, type Variants } from 'motion/react'
import type { ReactNode } from 'react'

// A delayChildren function gets each child's (index, total); capped at 6 steps.
// Shorthand: stagger(0.06), uncapped; it replaces staggerChildren.
const delayChildren = (i: number) => Math.min(i, 6) * 0.06

const enter: Variants = {
  hidden: { opacity: 0, y: 8, filter: 'blur(2px)' },
  show: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] } },
}
// Reduced motion: all items fade in together.
const fade: Variants = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { duration: 0.15 } },
}

type Item = { id: string; content: ReactNode }

export function StaggerList({ items, open }: { items: Item[]; open: boolean }) {
  const reduced = useReducedMotion()
  const list: Variants = { hidden: {}, show: { transition: reduced ? {} : { delayChildren } } }
  return (
    <AnimatePresence>
      {open && (
        // Plays when it mounts (open turns true); a remount replays, a re-render
        // does not. Items stay in the DOM, clickable and focusable, throughout.
        <motion.ul
          variants={list}
          initial="hidden"
          animate="show"
          // Leaving: the whole list as one, never per item. Reduced motion: fade only.
          exit={{ opacity: 0, y: reduced ? 0 : -4, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] } }}
        >
          {items.map((item) => (
            <motion.li key={item.id} variants={reduced ? fade : enter}>
              {item.content}
            </motion.li>
          ))}
        </motion.ul>
      )}
    </AnimatePresence>
  )
}