/motion: micro-animations for Claude Code

A Claude Code skill that turns a plain-language request into calm, purposeful micro-animations: scroll reveals, ordered timelines, auto-advancing features that stop when you click, rolling numbers, live ticks, spring dials, typing indicators, marquees and a pinned "dot story" showpiece.

/motion fade the pricing cards in on scroll, one after another
/motion make the features section less plain
/motion the subscription numbers should feel live
/motion add a storytelling "why us" section with 4 reasons

Live demo of every pattern: https://abhimahamkali.github.io/motion-skill/demo/

Install

Quickest: one command

npx skills add abhimahamkali/motion-skill -g -a claude-code

Restart Claude Code, then type /motion followed by what you want. (Drop -g to install it for the current project only; drop -a claude-code to choose other agents.)

Option A: personal skill, by hand (gives you /motion)

macOS / Linux:

git clone https://github.com/abhimahamkali/motion-skill /tmp/motion-skill
mkdir -p ~/.claude/skills && cp -r /tmp/motion-skill/plugins/motion/skills/motion ~/.claude/skills/

Windows (PowerShell):

git clone https://github.com/abhimahamkali/motion-skill "$env:TEMP\motion-skill"
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
Copy-Item -Recurse "$env:TEMP\motion-skill\plugins\motion\skills\motion" "$HOME\.claude\skills\"

Restart Claude Code (or start a new session), then type /motion followed by what you want.

To install it for one project only, copy the folder into that project's .claude/skills/ instead.

Option B: plugin marketplace (gives you /motion:motion, easy updates)

Inside Claude Code:

/plugin marketplace add abhimahamkali/motion-skill
/plugin install motion@motion-skill

Plugin skills are namespaced, so the command is /motion:motion …. Claude will also use it on its own when you ask for animations.

What you get

plugins/motion/skills/motion/
├── SKILL.md                 how Claude approaches a /motion request, plus the rules
├── assets/motion.css        tokens (easing, durations, colour roles) + m-* pattern classes
├── assets/motion.js         Motion.reveal / count / tick / auto / typing / marquee / dots / scrollSteps
└── references/
    ├── patterns.md          17 patterns: when to use, code, timing, don'ts
    └── dot-story.md         recipe for the pinned dot-morph section

No dependencies and no build step. Claude adapts the patterns to your stack (plain HTML, React, Vue, Svelte, Tailwind) instead of dropping in a library.

The rules it follows

• Every motion has a job: explain a change, show order, invite a tap, show something is live, or reward an action.
• Calm timings: entrances 0.6–0.8s ease-out, state changes 0.3–0.5s, the spring only for small confirmations.
• Only transform, opacity, clip-path, stroke and colour animate.
• Primary buttons don't move on hover; only their colour changes.
• Anything that auto-advances shows progress, pauses on hover, and stops for good on the first click.
• One showpiece per page. Stagger 60–100ms. Never roll the digits of a live price.
• Everything works with prefers-reduced-motion (loops off, final states shown) and on a 375px phone.

License

MIT