Animate

This is a practical reference for animation work in Next.js and React apps, based on Emil Kowalski's course. It gives you timing recommendations (200-300ms for most things, exits 25% faster than enters), easing functions as CSS custom properties, and eight working examples ranging from simple card hovers to iOS-style card expansions. The golden rules are sensible: only animate transform and opacity, respect prefers-reduced-motion, use springs for interruptible animations. Most useful when you're past the "how do I animate this" stage and need to know the right easing curve or whether to reach for CSS transitions versus Framer Motion layoutId. The examples cover toast notifications, shared layout morphs, and multi-step flows.

Install to Claude Code

npx -y skills add delphi-ai/animate-skill --skill animate --agent claude-code