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

npm install motion

---

Version

• motion/react - default for current Motion for React projects (packag…