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 · Animation & motion graphics
• 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: 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: 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: Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
• Session Story: A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
• Remotion Markup: Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
• Motion AI Kit: Write production-grade UI animation with Motion or CSS: best practices, docs search, springs, perf audits.
• dotLottie Web: Ship Lottie animations on the web with dotLottie: package choice, workers, state machines, theming, slots.