Motion for React

Core Philosophy

1. Springs over tweens — Spring physics feel natural because they incorporate velocity. Default to springs for movement (x, y, scale), tweens for visual properties (opacity, color).
2. Motion values over React state — Motion values update the DOM directly without re-renders. Use them for anything that changes rapidly (scroll, mouse, continuous animation).
3. Declarative first, imperative when needed — Use animate, whileHover, variants for 90% of work. Reach for useAnimate only for sequences, timeline scrubbing, or event-driven triggers.
4. Layout animations are magic — The layout prop and layoutId handle FLIP animations with scale-distortion correction. Use them for any position/size change.
5. Respect the user — Always check useReducedMotion(). Replace movement with opacity-only transitions when reduced motion is preferred.