# Motion Design Skill

> LottieFiles' motion design skill: your agent picks timing, easing, choreography and emotional intent before it writes animation code.

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.

- Type: Skill
- Made by: LottieFiles
- Category: Design
- Formats: Skills
- Version: 1.0.0
- Website: https://github.com/LottieFiles/motion-design-skill
- Source: https://github.com/lottiefiles/motion-design-skill/tree/HEAD/skills/motion-design
- Page: https://pluginboard.ai/skills/motion-design-skill

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the motion-design folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Claude

In Claude (web or desktop): Download the motion-design folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Gemini

In Gemini: Download the motion-design folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.copilot/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Cursor

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.cursor/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Claude Code

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.claude/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Codex

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.agents/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Antigravity

In Antigravity: Copy the motion-design folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Gemini CLI

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.gemini/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Replit

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design .agents/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### OpenClaw

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.openclaw/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### OpenCode

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.config/opencode/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

### Hermes Agent

Run in your terminal:

```shell
npx -y degit LottieFiles/motion-design-skill/skills/motion-design ~/.hermes/skills/motion-design
```

View the folder on GitHub: https://github.com/LottieFiles/motion-design-skill/tree/HEAD/skills/motion-design

---
From Pluginboard (https://pluginboard.ai).