animate
Installation
SKILL.md
Next.js Animations
Overview
This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.
Quick Reference
Easing Cheat Sheet
| Animation Type | Easing | Duration |
|---|---|---|
| Element entering | ease-out |
200-300ms |
| Element moving on screen | ease-in-out |
200-300ms |
| Element exiting | ease-in |
150-200ms |
| Hover effects | ease |
150ms |
| Opacity only | linear |
varies |