ui-animation

Tasteful UI animation with proper timing, accessibility, and performance.

Default: Start with Easing Decision Tree → Duration Guidelines → Implement → Add a11y → Verify

| Micro-interaction | Button press, toggle, checkbox | CSS/Tailwind | | Enter/Exit | Modal, toast, dropdown | Motion + AnimatePresence | | Layout change | Accordion, reorder, expand | Motion layout prop | | Shared element | Tab indicator, card expand | Motion layoutId | | Gesture | Drag, swipe, pull-to-refresh | Motion springs |

قم بتوجيه الرسوم المتحركة الرائعة لواجهة المستخدم من خلال التخفيف والينابيع والرسوم المتحركة للتخطيط والإيماءات وإمكانية الوصول. يغطي أنماط الرياح الخلفية والحركة. يُستخدم عندما: (1) تنفيذ الرسوم المتحركة للدخول/الخروج، (2) اختيار منحنيات التخفيف، (3) تكوين النوابض، (4) الرسوم المتحركة للتخطيط والعناصر المشتركة، (5) إيماءات السحب/التمرير، (6) التفاعلات الدقيقة، (7) ضمان إمكانية الوصول إلى الحركة المنخفضة المفضلة. المشغلات: الرسوم المتحركة، الرسوم المتحركة، التخفيف، الربيع، الانتقال، الحركة، التخطيط، الإيماءة، السحب، التمرير السريع، الحركة المنخفضة، حركة الإطار. المصدر: lukasstrickler/ai-dev-atelier.