Motion Design Patterns

Framer Motion (Motion) patterns for React — springs, staggers, layout animations, micro-interactions, scroll-triggered effects, and exit animations. The #1 differentiator between generic and polished UI.

When to Use

• Building or improving UI animations in a React project
• User asks for "polish", "delight", "micro-interactions", or "make it feel good"
• Adding entrance/exit animations, hover effects, or page transitions
• Making lists, cards, modals, or navigation feel premium
• User references Magic UI, Motion Primitives, or Framer Motion

Core Philosophy

• Motion should be purposeful. Every animation should communicate something — state change, hierarchy, spatial relationship, or feedback.
• Less is more. One well-tuned spring beats five competing animations.
• Performance first. Animate transform and opacity only. Never animate width, height, top, left, or margin.
• Consistency matters. Use the same spring configs throughout a project.