animate

UI animations maintain 60fps by using GPU-accelerated transforms and opacity changes instead of layout-affecting properties. This Skill provides patterns for leveraging CSS transforms, Framer Motion, and performance guidelines to keep animations fluid while reducing motion sickness through prefers-reduced-motion support.

Yes. This Skill integrates Framer Motion animations with Tailwind CSS, enabling entrance, exit, hover, and gesture-driven microinteractions. It covers timing, easing curves, and accessibility compliance so animations enhance UX without breaking responsive design.

CSS-based transitions handle lightweight hover effects instantly, while Framer Motion sequences handle complex entrances and exits. This Skill combines both: short durations (150–600ms), appropriate easing, transform-only changes, and opacity adjustments ensure 60fps motion across browsers.

Animations must respect the prefers-reduced-motion CSS media query to disable or simplify motion for users who need it. This Skill provides patterns to detect this preference and scale animation intensity, ensuring compliance while maintaining UX for all users.

Microinteractions typically use 150–600ms durations with specific easing curves tailored to the motion type—ease-out for exits, ease-in-out for transitions. This Skill documents proven timing and easing patterns for hover, loading, and gesture interactions that feel natural and responsive.

Native CSS handles simple hover and transition effects efficiently. For complex staggered sequences, gesture-driven animations, or dynamic timing, Framer Motion provides declarative control. This Skill combines both approaches depending on interaction complexity and performance needs.