Motion Design

This is a comprehensive framework for animation that actually teaches you motion design principles, not just code snippets. It walks you through emotion-driven timing decisions using Disney animation principles adapted for UI work, complete with duration tables, easing curves, and motion personality archetypes (Playful, Premium, Corporate, Energetic). The 8-step checklist and three-layer approach (primary, secondary, ambient) will change how you think about animations. Works with any animation system from CSS to Framer Motion to GSAP. LottieFiles clearly put production experience into this. If you've been eyeballing animation durations or copying easing curves without understanding why, this will fix that.

Install to Claude Code

npx -y skills add lottiefiles/motion-design-skill --skill motion-design --agent claude-code