Responsive Adaptive

This one's about making animation durations actually respond to context instead of hardcoding 300ms everywhere. It covers the practical stuff: scaling duration based on travel distance (with a square root formula), cutting 25% off for mobile devices, respecting prefers-reduced-motion, and adjusting for repeat interactions versus first views. The Disney principles section is a nice touch, showing how squash and stretch or anticipation need different timing on touch versus desktop. The real value is the implementation pattern with CSS custom properties that cascade through media queries. If you're building anything with motion that needs to work across devices and respect user preferences, this gives you a system instead of magic numbers.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill responsive-adaptive --agent claude-code