Code worth reading

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Two decisions here. The rule is global, so a new component cannot forget it — the default is safe and opting out is the deliberate act. And it uses 0.001ms rather than animation: none: killing the animation outright skips its end state, which is how a reduced-motion visitor ends up with an element stuck at opacity: 0. Speeding the animation to nothing keeps every frame's result and drops only the travel.

// offsetTop is used rather than getBoundingClientRect on purpose: it reports
// the layout slot and ignores the transform a glide may be mid-way through,
// so measuring during an animation does not poison the next one.
const measure = () => { ... };

A FLIP animation measures a row's slot, moves it with a transform, then measures again. If the measurement reads getBoundingClientRect() while a previous glide is still running, it reads the transformed position and the next animation starts from a lie. offsetTop ignores transforms, so the numbers stay true during motion — a one-line choice that removes an entire class of bugs.

const tick = () => {
  if (cancelled) return;             // the cleanup sets this before cancelling
  setProgress((p) => Math.min(1, p + step));
  raf = requestAnimationFrame(tick);
};

A requestAnimationFrame loop that only calls cancelAnimationFrame on cleanup has a race: the frame already queued still runs and can schedule the next one, so the loop survives unmount and keeps a dead component's state alive. The guard makes the loop check a flag it owns, which is the difference between a demo and a leak.