Motion Design Skill

Motion Design Skill is LottieFiles' Agent Skill of universal motion design principles. It teaches your agent to think like a motion director, choosing the right timing, easing, choreography and emotional intent before writing a line of animation code. It's philosophy-first and works with any animation system: CSS, Framer Motion, GSAP, Lottie, springs and more. What's in it - Core: an 8-step checklist, motion personality archetypes, duration and easing tables, a property selection guide, common patterns and quality rules - Philosophy: the three pillars, Disney's 12 principles adapted for UI, mapping emotion to motion, choreography, narrative structure and adapting to platform, accessibility and performance - Patterns: recipes for entrances and exits, success, error, loading and hover feedback, ambient and looping motion, and staggered multi-element sequences - Reference: timing and easing lookups, a quality checklist and fixes for common animation problems When it helps - UI animations for buttons, cards, modals and page transitions - Micro-interactions and feedback, including loading, success and error states - Scroll-triggered and progress-based animation - Setting a brand's motion identity and sequencing several elements How to install it Run npx skills add LottieFiles/motion-design-skill. It works in Claude, ChatGPT, Gemini and more agents that support Agent Skills. Good to know - No sign-in: the skill runs inside your agent and doesn't need a LottieFiles account. - MIT licensed.