What is the LottieFiles motion design skill?
The LottieFiles motion-design skill is a SKILL.md that teaches an AI coding agent to choose emotional intent, timing, easing and choreography before writing animation code. It offers four personalities, a duration table by element type and quality rules, and works with CSS, Framer Motion, GSAP, Lottie or Spring.
A tooltip should animate in 80 to 120 milliseconds. A page transition should take 400 to 600. This skill puts numbers like these in front of your agent so it stops guessing at durations and picks them by element type.
It is published by LottieFiles as version 1.0.0 and describes itself as philosophy first and implementation agnostic. The agent decides on emotion and timing, then writes code for whichever animation library your project uses.
How it changes animation work
- An eight step checklist runs before any animation: emotional target, personality, primary property, duration, easing family, hero element, secondary layers and the one third rules.
- Every animation must satisfy three pillars: emotional intent, visual narrative and motion craft.
- Flat motion is treated as a missing layer, so the agent adds primary, secondary and ambient motion.
- Troubleshooting is a lookup: if it looks robotic, add easing curves and arc paths.
Personalities, durations and easing
- Four archetypes: Playful at 150 to 300ms, Premium at 350 to 600ms, Corporate at 200 to 400ms and Energetic at 100 to 250ms.
- Corporate is the default for UI, and Playful is the default for illustrations.
- Entrances run 30 to 50 percent longer than exits, because users care more about what appears.
- Entrances decelerate and exits accelerate, with reference curves from Material Design 3 and Apple HIG.
- Stagger totals must stay under 500ms, and no motion travels more than one third of the screen without a keyframe change.
Who the LottieFiles motion design skill is for
Best for
- Teams that ask an agent for hover, press, loading, success and error states and want consistent timing across them. motion-system is a neighbor for token style motion rules.
- Choreographing a dashboard or landing page entrance, where order and stagger decide how the page feels.
- Reviewing existing animation code against a written set of rules.
Not for
- Library specific API help. The skill does not teach syntax, so pair it with gsap-core or motion-framer-motion when you need that.
- Producing finished Lottie files. Its description lists Lottie as a target system, but it supplies principles and not assets.
- Web specific motion code. For that side of the work, see web-motion-design.
Use it with UiChemy
The skill advises on motion and publishes nothing. Use it to set timing for a page built in Figma or with an AI tool, bring that page into WordPress through UiChemy, then click Get Started.
How to install LottieFiles Motion Design Skill: Timing and Easing
git clone https://github.com/LottieFiles/motion-design-skill.gitClone the repository
Run
git clone https://github.com/LottieFiles/motion-design-skill.git. The README's own command uses a different installer, so this page uses the manual route.Copy the skill folder
Copy
skills/motion-designfrom the clone into the folder where your agent loads skills. Keep the director, patterns and reference subfolders with SKILL.md, because it links to them.Check agent support
The README says the skill supports more than 40 agents, including Claude Code, Cursor, Codex and GitHub Copilot.
Check that it loaded
Ask your agent to add a playful entrance animation to a row of cards. With the skill loaded it should name a personality, choose durations from the table, stagger under 500ms and add secondary motion.
Key features
- Eight step checklistBefore any animation the agent settles emotional target, motion personality, primary property, duration, easing family, hero element, extra layers and the one third rules.
- Three pillarsEmotional intent drives easing, timing and amplitude. Visual narrative frames a micro story from setup to resolution. Motion craft covers physics, secondary motion and paths.
- Four motion personalitiesPlayful, Premium, Corporate and Energetic each carry a duration range, an easing and an overshoot amount. The agent selects one per project and applies it consistently.
- Duration table by elementTooltips 80 to 120ms, buttons 120 to 180ms, icons 150 to 250ms, cards 200 to 350ms, modals 300 to 400ms, page transitions 400 to 600ms and dramatic reveals 600 to 1200ms.
- Directional easingEntrances use the ease-out family, exits use ease-in, and looping ambient motion uses sine-based ease-in-out. A table lists curves from Material Design 3 and Apple HIG.
- Brand motion identityDefine three constants: one signature easing used for most animations, a palette of three durations, and one consistent entrance pattern.
- Ready patternsStep by step recipes for Button Press, Card Entrance, Success State and Error Shake, each with anticipation, follow through and secondary motion spelled out.
- Choreography and staggerLead with the hero element, keep entry direction consistent, and use stagger budgets from micro cascade to dramatic, with total stagger kept under 500ms.
- Quality rulesNever use linear easing for spatial movement, never rely on opacity alone for important state changes, never exceed one third of the screen without a keyframe, and always use three motion layers.
- 16 supporting filesEight philosophy files in director, four lookup files in reference and four recipe files in patterns sit beside SKILL.md.
Frequently asked questions
What is the LottieFiles motion design skill?
It is a SKILL.md from LottieFiles, licensed MIT, that applies motion design principles to UI work. It covers timing, easing, choreography and Disney animation principles adapted for interfaces, and it works with any animation system your project uses.
How do I install the motion design skill?
Clone the LottieFiles motion-design-skill repository with git and copy the skills/motion-design folder to where your agent loads skills. The README's one line installer is not used here. Keep the subfolders together, since SKILL.md points to them.
Which animation libraries does it support?
The description lists CSS, Framer Motion, GSAP, Lottie and Spring, and says it works with any animation system. It teaches principles and numbers rather than library syntax, so your agent still writes the code in your chosen library.
What are the four motion personalities?
Playful uses 150 to 300ms with ease-out-back. Premium uses 350 to 600ms with no overshoot. Corporate uses 200 to 400ms and is the UI default. Energetic uses 100 to 250ms with ease-out-expo. Choose one per project and apply it everywhere.
Does it work with Claude Code, Cursor or Codex?
The README says it supports more than 40 agents, naming Claude Code, Cursor, Codex and GitHub Copilot. It is a plain SKILL.md with supporting files, so any agent that loads skills in that format should be able to read it.
What is the one third rule?
It has two parts. No motion should travel more than one third of the screen without a keyframe change. And with three or more elements, no more than one third should be in active motion at once. Both keep scenes readable.
What example prompts does the README suggest?
It suggests adding a playful entrance animation to card components, building loading, success and error transitions for a submit button, choreographing a dashboard entrance with the hero chart first, and reviewing animation code against the motion principles.