motion-uilisted

# Motion System v4.2 Production-ready UI motion system for React / Next.js. Focused on **performance, accessibility, and usability** — not decoration. ## When to Use Use this motion system when motion: * Guides attention (e.g., onboarding, key actions) * Communicates state (loading, success, error, transitions) * Preserves spatial continuity (layout changes, navigation) ### Appropriate Scenarios * Interactive components (buttons, modals, menus) * State transitions (loading → loaded, open → closed) * Navigation and layout continuity (shared elements, crossfade) ### Considerations * **Accessibility**: Always support reduced motion * **Device adaptation**: Adjust for low-end devices * **Performance trade-offs**: Prefer responsiveness over visual smoothness ### Avoid Using Motion When * It is purely decorative * It reduces usability or clarity * It impacts performance negatively --- ## How It Works ### Core Principle Motion must: * Guide attention * Communicate state * Preserve spatial continuity If it does none → remove it. --- ### Installation ```bash npm install motion ``` --- ### Version * `motion/react` - default for current Motion for React projects (package: `motion`) * `framer-motion` - legacy import path for projects that still depend on Framer Motion **Do not mix.** Mixing causes conflicting internal schedulers and broken `AnimatePresence` contexts — components from one package will not coordinate exit animations with components from the other.