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.

skills.sh installs: 3.9K
GitHub stars: 161
last updated: Jul 14, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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

CSS Custom Properties (Recommended)

:root {
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
}

Common Animation Patterns

1. Hover Lift Effect

.card {
  transition: transform 200ms var(--ease-out-quint),
              box-shadow 200ms var(--ease-out-quint);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

2. Button Press

SKILL.md on GitHub

Details

Repository: github.com/delphi-ai/animate-skill
First seen: Jun 3, 2026