Universal Patterns

This is the animation foundation you copy into every project. It gives you Disney's 12 principles distilled into a timing scale (100ms for hovers up to 1000ms for celebrations), a set of easing curves that actually work, and base classes for entrances, exits, and state changes. The decision tree at the end is gold: it tells you exactly which easing and duration to pick based on what's happening. Includes proper prefers-reduced-motion handling and the GPU-only rule. Start with their 250ms ease-in-out default when you're unsure, then tune from there. Beats reinventing timing curves every time you animate something.

skills.sh installs: 539
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill universal-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Universal Animation Patterns

Apply Disney's 12 principles as baseline defaults for any animation.

Core Timing Scale

Category	Duration	Use For
Instant	100-150ms	Hovers, toggles, micro-states
Fast	150-250ms	Feedback, small transitions
Standard	250-400ms	Modals, reveals, state changes
Slow	400-600ms	Page transitions, sequences
Deliberate	600-1000ms	Dramatic reveals, celebrations

Universal Easing Library

:root {
  /* Standard easings */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* Entrances */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* Exits */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* State changes */

  /* Spring easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Overshoot */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
}