motion-design
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
npx skills add LottieFiles/motion-design-skill --skill motion-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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:** 1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness 2. Does it express brand personality? → Motion Personality archetypes 3. Does it tell a story or guide attention? → Disney principles + choreography 4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns --- ## Quick Reference: 8-Step Checklist Before creating any animation: 1. **Emotional target?** — joy, calm, urgency, elegance 2. **Motion Personality?** — Playful, Premium, Corporate, Energetic 3. **Primary property?** — position, scale, rotation, opacity 4. **Duration?** — see duration table below 5. **Easing family?** — entrance=decelerate, exit=accelerate 6. **Hero element?** — apply staging principles 7. **Secondary + ambient layers?** — add ri
- When to Apply
- Quick Reference: 8-Step Checklist
- Three Pillars (CRITICAL)
- Motion Personality
- Property Selection
- Duration Table
- Easing Selection
- Common Patterns
- Button Press (Playful)
- Card Entrance (Premium)
- Success State (Playful)
- Error Shake (Corporate)
- Choreography Essentials
- Emotion-to-Motion Map
What does the motion-design skill do?
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
How do I install it?
Run `npx skills add LottieFiles/motion-design-skill --skill motion-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From LottieFiles/motion-design-skill, a repository with 872 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.