01
Name the motion's job
Motion earns its place when it explains continuity, hierarchy, or cause and effect.
Write one sentence describing what the movement teaches. If the same transition only adds atmosphere, remove it or reserve it for one signature moment instead of repeating it across the page.
02
Start from visible content
Server-rendered content should not disappear while JavaScript or an observer catches up.
Component
const reducedMotion = useReducedMotion();
<motion.div
initial={false}
animate={{ y: 0, opacity: 1 }}
transition={reducedMotion ? { duration: 0 } : spring}
/>03
Preserve the signal
Reduced motion removes travel, not meaning.
Guide complete
Keep the proof with the change.
Record the commands you ran, the states you checked, and the evidence that remains outside this guide.
Put it into practice