Web Motion Design

This translates Disney's 12 animation principles into practical web patterns, which is exactly the framing frontend motion needs. You get a reference table mapping squash and stretch to CSS scale transforms, anticipation to reverse movements, and timing guidelines (micro interactions at 100-200ms, standard at 200-400ms). The easing curve recommendations are specific enough to copy paste: cubic-bezier(0.4, 0, 0.2, 1) for standard, different values for enter and exit states. What makes this useful is it treats animation as a design system with principles, not just random effects. The performance rules are brief but correct: transform and opacity only, will-change sparingly, test on low-powered devices. Solid reference if you're building component libraries or design systems where motion needs to feel consistent and intentional.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill web-motion-design --agent claude-code