Menu

#434 by GitHub stars

LottieFiles/motion-design-skill

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-

Design

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/motion-design/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Instructions only → After Instructions only

f9a8a041b851 → f9a8a041b851

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Instructions only

First observation → f9a8a041b851

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit f9a8a041b85185ee4881b3471d3415e939aac772

2.8kGitHub stars
208stars in 7 days
1skill in this repository
0commits in 30 days

Heat

7.2
  • Star growth, last 7 daysAhead of 98% of tracked repositories
  • Star growth, last 24 hoursAhead of 98% of tracked repositories
  • Rank movement, last 7 daysAhead of 90% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 20262,835

Individual skills in this repository

How it works

motion-design

When your agent uses it

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

What it loads into context

Frontmatter

114 tokens

Always available to the agent

SKILL.md

3,371 tokens

When the skill is activated

Reference documents

12,002 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. When to Apply
  2. Quick Reference: 8-Step Checklist
  3. Three Pillars (CRITICAL)
  4. Motion Personality
  5. Property Selection
  6. Duration Table
  7. Easing Selection
  8. Common Patterns
  9. Choreography Essentials
  10. Emotion-to-Motion Map
  11. Weight Classification
  12. Quality Rules
  13. Troubleshooting Quick Reference
  14. File Reference

Files

  • SKILL.mdcore12,580 bytes
  • director/choreography.mddoc3,035 bytes
  • director/context-adaptation.mddoc3,066 bytes
  • director/core-philosophy.mddoc1,864 bytes
  • director/decision-framework.mddoc2,866 bytes
  • director/disney-principles.mddoc3,197 bytes
  • director/emotion-mapping.mddoc2,877 bytes
  • director/motion-personality.mddoc2,998 bytes
  • director/narrative-structure.mddoc2,407 bytes
  • patterns/ambient-continuous.mddoc2,823 bytes
  • patterns/entrance-exit.mddoc2,822 bytes
  • patterns/multi-element.mddoc2,362 bytes
  • patterns/state-feedback.mddoc3,062 bytes
  • reference/property-selection.mddoc2,922 bytes
  • reference/quality-checklist.mddoc2,080 bytes
  • reference/timing-easing-tables.mddoc2,900 bytes
  • reference/troubleshooting.mddoc2,709 bytes
Read SKILL.md

# Motion Design Skill

## When to Apply

Use this skill when:
- Creating UI animations (buttons, cards, modals, page transitions)
- Designing micro-interactions and feedback animations
- Building loading, success, or error states
- Animating illustrations or decorative elements
- Planning scroll-triggered or progress-based animations
- Establishing brand motion identity
- Choreographing multi-element sequences

**Decision tree:**
View the complete source on GitHub

Skills included

  • motion-design

Repository facts

License
MIT
Created
Mar 12, 2026
Last pushed
May 18, 2026
Forks
199
Open issues
2
Project activity
Slowing

Rank over the last 12 weeks

Now #434 · best #426 · up 18 in 30 days

  1. #441 from Oct 28 to Oct 30
  2. #438 on Oct 31
  3. #435 on Nov 1
  4. #434 from Nov 2 to Nov 4
  5. #433 on Nov 5
  6. #434 since Nov 6
78 earlier periods
  1. #603 on Aug 2
  2. #578 on Aug 7
  3. #567 on Aug 8
  4. #569 on Aug 9
  5. #594 on Aug 10
  6. #592 on Aug 11
  7. #584 on Aug 12
  8. #581 on Aug 13
  9. #576 on Aug 14
  10. #557 on Aug 15
  11. #569 on Aug 16
  12. #568 on Aug 17
  13. #576 on Aug 18
  14. #501 on Aug 19
  15. #497 on Aug 20
  16. #486 on Aug 21
  17. #470 on Aug 22
  18. #486 on Aug 23
  19. #481 on Aug 24
  20. #487 on Aug 25
  21. #478 on Aug 26
  22. #487 on Aug 27
  23. #480 on Aug 28
  24. #471 on Aug 29
  25. #459 on Aug 30
  26. #480 on Aug 31
  27. #482 on Sep 1
  28. #483 on Sep 2
  29. #487 on Sep 3
  30. #471 on Sep 4
  31. #472 on Sep 5
  32. #478 on Sep 6
  33. #482 on Sep 7
  34. #493 on Sep 8
  35. #484 on Sep 9
  36. #483 on Sep 10
  37. #476 on Sep 11
  38. #475 on Sep 12
  39. #472 on Sep 13
  40. #482 on Sep 14
  41. #475 on Sep 15
  42. #484 on Sep 16
  43. #476 on Sep 17
  44. #482 on Sep 18
  45. #465 on Sep 19
  46. #476 from Sep 20 to Sep 21
  47. #485 on Sep 22
  48. #478 on Sep 23
  49. #466 from Sep 24 to Sep 25
  50. #458 on Sep 26
  51. #473 on Sep 27
  52. #479 on Sep 28
  53. #474 on Sep 29
  54. #469 on Sep 30
  55. #461 on Oct 1
  56. #456 on Oct 2
  57. #444 on Oct 3
  58. #438 on Oct 4
  59. #449 on Oct 5
  60. #451 on Oct 6
  61. #452 on Oct 7
  62. #457 on Oct 8
  63. #456 on Oct 9
  64. #446 on Oct 10
  65. #442 on Oct 11
  66. #452 on Oct 12
  67. #444 on Oct 13
  68. #443 on Oct 14
  69. #441 on Oct 15
  70. #445 on Oct 16
  71. #437 on Oct 17
  72. #438 on Oct 18
  73. #443 from Oct 19 to Oct 20
  74. #440 on Oct 21
  75. #436 on Oct 22
  76. #434 on Oct 23
  77. #426 on Oct 24
  78. #448 on Oct 25

Before you install

Instructions only

Automated signals, not a guarantee

Checked Nov 2, 2026

  • No broad tool permissions
  • No dangerous shell commands
  • No network access
  • No hidden or obfuscated text
  • No instruction overrides
  • No executable scripts
  • No access to secrets
  • No requests to vote in Hot

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

No combined signals at this commit.

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md skills/motion-design/SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md skills/motion-design/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/motion-design/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/motion-design/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/motion-design/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/motion-design/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

lovisdotio/motion2code

Skills for coding agents: rebuild a motion design video as looping SVG + GSAP code, checked frame by frame against the source

335GitHub stars

frankxai/awesome-motion-design-agent-skills

Curated motion design agent skills: GSAP, Motion, Remotion, Lottie and Rive for web animation, programmatic video and motion QA. Installable in Claude Code, Codex, Copilot.

95GitHub stars

krisyangdev/motionboard

Shot language from Apple and Linear launch films, rebuilt in code for your agent. 38 recipes and a skill for making product launch films.

55GitHub stars

Win-Hao/code-video

Agent skill: make short videos with code — the agent asks what you want, writes a seven-block prompt (role / context / task / specs / style / avoid / check), draws every frame in …

18GitHub stars

hirowyh/settle

Describe a piece of interface in plain words, and your coding agent builds it with motion that settles, in a look of its own.

3GitHub stars

Vincentwei1021/video-shotcraft

Create cinematic product videos from frontend projects or webpages with Remotion, real page captures, shot cards, the Ink Press template, beat sync and sound design. Use for full …

17.4kGitHub stars

Add this badge to your README

It updates every night and links to this page.

LottieFiles/motion-design-skill: #434 on hotskills, 2.8k stars

[![LottieFiles/motion-design-skill on hotskills](https://hotskills.dev/badge/lottiefiles-motion-design-skill.svg)](https://hotskills.dev/skill/lottiefiles-motion-design-skill/)