# Motion Design — guide skill for animation & motion graphics

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Animate with intent: timing, easing, choreography and Disney principles for UI and motion graphics.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [Animation & motion graphics](https://skills.varg.ai/browse/skills/animation.md)
- **Slug:** `lottiefiles-motion-design`
- **Status:** live
- **Publisher:** LottieFiles (vendor, verified)
- **License:** MIT
- **Source:** https://github.com/LottieFiles/motion-design-skill/tree/main/skills/motion-design
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Cost:** Free — guidance only
- **Adoption:** 20,100 installs, 2,535 GitHub stars (skills.sh, 2026-10-26)

## What it does

LottieFiles' universal motion design principles for agents: an 8-step checklist, motion personality, property selection, duration and easing tables, choreography, emotion-to-motion mapping and weight classes, with ready patterns for entrances, state feedback and ambient loops. It works with CSS, Framer Motion, GSAP, Lottie, springs or any other animation system.

## Use when

- Animations, transitions or micro-interactions
- Loading states, page transitions or scroll effects
- Making motion feel intentional instead of generic

## Install

- Claude Code: `npx skills add LottieFiles/motion-design-skill --skill motion-design -a claude-code`
- Codex: `npx skills add LottieFiles/motion-design-skill --skill motion-design -a codex`
- Cursor: `npx skills add LottieFiles/motion-design-skill --skill motion-design -a cursor`
- Gemini CLI: `npx skills add LottieFiles/motion-design-skill --skill motion-design -a gemini-cli`

## Example output

https://skills.varg.ai/previews/lottiefiles-motion-design.mp4 — LottieFiles' 'spot the difference' post for the skill: the same stacked-box animation as 'basic' (without the motion design skill) and 'principled' (with it) (credit: LottieFiles (@LottieFiles), https://x.com/LottieFiles/status/2077576224659112213)

## Used for

- [Logo animation / intro sting](https://skills.varg.ai/use-cases/logo-animation.md): Your logo animated into a short intro or outro: 3D chrome, liquid, shader, glitch or clean motion.

## More animation & motion graphics skills

- [Day in My Life](https://skills.varg.ai/skills/hyperframes-day-in-my-life.md): A 60–75 s hand-drawn ink film of your agent's day with you, built from local Claude Code history, scored for strings.
- [p5 Paint Animation](https://skills.varg.ai/skills/hyperframes-p5-paint-animation.md): Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
- [Session Story](https://skills.varg.ai/skills/hyperframes-session-story.md): A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
- [Remotion Markup](https://skills.varg.ai/skills/remotion-markup.md): Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
- [Motion AI Kit](https://skills.varg.ai/skills/motion-ai-kit.md): Write production-grade UI animation with Motion or CSS: best practices, docs search, springs, perf audits.
- [dotLottie Web](https://skills.varg.ai/skills/dotlottie-web.md): Ship Lottie animations on the web with dotLottie: package choice, workers, state machines, theming, slots.