Timing Calibration

When animations feel off and you're getting "too fast" or "too slow" feedback, this gives you Disney-inspired timing principles translated into code. It breaks down duration by element size (micro-interactions at 100-150ms, transitions at 200-400ms), provides a timing scale you can drop into CSS custom properties, and explains why easing matters more than you think. The troubleshooting checklist is actually useful: test at 2x speed, check if similar elements have similar timing, make sure nothing exceeds 400ms for UI. It won't teach you animation theory, but if you need to fix sluggish modals or twitchy buttons right now, the quick reference table and code patterns get you there.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill timing-calibration --agent claude-code