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 copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 317
skills.sh installs: 24K
GitHub stars: 2.9K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Motion Design Skill

When to Apply

Use this skill when:

Creating UI animations (buttons, cards, modals, page transitions)
Designing micro-interactions and feedback animations
Building loading, success, or error states
Animating illustrations or decorative elements
Planning scroll-triggered or progress-based animations
Establishing brand motion identity
Choreographing multi-element sequences

Decision tree:

Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
Does it express brand personality? → Motion Personality archetypes
Does it tell a story or guide attention? → Disney principles + choreography
Is this a complex multi-element scene? → 1/3 Rule + stagger patterns