Framer Motion patterns I reuse on every project

Animation libraries make it easy to do too much. The discipline that stuck for me is a small set of patterns, reused until they feel like the product's accent rather than a demo reel.

Pattern one: the staggered entrance. A parent variant with staggerChildren and a single fade-up child variant covers 90% of page loads. The trick is restraint — 60 to 90 milliseconds between siblings, one ease curve, and never more than ~6 items staggering at once.

Pattern two: the scroll reveal. whileInView with viewport={{ once: true }} and a negative margin so elements start animating just before they're fully visible. 'Once' matters: content that re-animates every time you scroll past it stops feeling alive and starts feeling broken.

Pattern three: the layout-aware expand. Animating height to 'auto' inside AnimatePresence is the cleanest way to open cards, accordions, and read-in-place articles. Wrap the inner content in a div with overflow hidden and let Motion measure it — no hard-coded max-heights that break the moment copy changes.

Pattern four: the cursor spring. useMotionValue for the raw pointer position, useSpring to smooth it, and a fixed element that trails the mouse. It's the cheapest way to make a page feel physical — and it degrades to nothing on touch screens, which is exactly what it should do.