---

name: animations-motion description: Add smooth animations to buttons, page transitions, tasks, modals, and interactive elements.

Animations & Motion

Instructions

1. Buttons

   • Hover scale/glow
   • Click ripple effect

2. Page transitions

   • Fade and slide effects
   • Shared layout transitions for smooth navigation

3. Tasks & Modals

   • Animate add, delete, complete
   • Input focus and validation animations

Best Practices

• Keep animations subtle and purposeful
• Optimize performance for all devices
• Use Framer Motion or GSAP where appropriate