Framer Motion Patterns

Production-grade web UI animation for React/Next.js. Apply when adding motion to components, not just fixing existing jank.

When to Apply

• Entrance/exit animations on components
• Gesture interactions (drag, hover, tap, swipe)
• Page/route transitions
• Scroll-triggered reveals and parallax
• Layout animations (list reorder, expand/collapse)
• Loading sequences, skeleton animations, micro-interactions

Not For

• Video/programmatic animation → remotion-animation
• Fixing animation perf bugs → fixing-motion-performance
• p5.js generative art → algorithmic-art