Framer Motion, but restrained
Three motion patterns I reuse, and the ones I removed after watching people use the site.
Motion is the easiest thing to add to a React site and the hardest to justify. After a year of adding it everywhere, I sat behind three people using a site I had built and watched them wait for things to finish animating. Most of it came out.
What stayed
A short rise-and-fade on sections as they enter the viewport, a layout animation when a list reorders, and a shared-element transition from a card to its detail page. Each one answers a question the user has - where did this come from, what changed, what is next.
What went
Staggered hero text, hover tilts on every card, and a page transition that made the site feel slower than it was. None of them answered a question. All of them added time.
If an animation does not explain something, it is a delay with good taste.
The rule I use now
Under 300ms for anything the user triggered, under 600ms for anything the page does on its own, and prefers-reduced-motion respected everywhere without exception.