Motion AI Kit: Make your AI agent a Motion expert.

Give your agent specialist animation skills from the Motion team. Current docs, 520+ examples, Performance Doctor and more.

Search 520+ examples from your agent.

npx motion-ai
Get Motion+
Read AI Kit docs

Everything your agent needs to animate well.

AI is trained on old code and forum answers. AI Kit gives your agent the current Motion docs, the source of every Motion+ example and the tools to check its own work.

Context

Builds with the right patterns

Ask for an interaction. Your agent reads the current docs and the source of 520+ examples first, so it uses the patterns the Motion team recommends.

Docs and examples
CSS springs

Describe the feel. Get production CSS.

Ask for something “bouncier” or “slower”. The /motion skill writes the spring as a CSS linear() curve, with no animation library in your bundle.

Spring generation
Transition editor

Tune transitions without leaving your editor

Your agent opens the transition editor as a card in the chat. Tune the spring, preview it, then Apply. Save the ones you like, and your agent can use them in any project.

Transition editor

Find slow animations.
Fix them from the chat.

Ask your agent for a performance audit. Performance Doctor grades every animation by render cost, then your agent fixes the slow ones.

  • Code and runtime audits

    It reads Motion, CSS, GSAP and Anime.js source, and can profile a page on your running local site.

  • Graded S to F

    Each animation gets a MotionScore grade for its render cost, and the report ranks the whole project.

  • Fixed from the chat

    Click Fix on a finding and your agent rewrites it, checks it and marks it fixed with its new grade.

About Performance Doctor

One command.
Every agent.

The installer sets up the /motion skill and the MCP server for the agents you use.

npx motion-ai
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • Copilot
  • OpenCode
  • Amp

  • Free to start

    Best practices and the docs search are free and open source, with no account. Motion+ unlocks the rest of the kit.

    Source on GitHub

  • This project or every project

    Install for one project, or globally for every project on your machine.

    Install guide

  • Your saved transitions

    Transitions you save in the editor follow you to every project, and your agent can read them.

    Saved transitions

Included in Motion+

Best practices and docs search are free. Motion+ adds examples search, Performance Doctor, CSS springs and the transition editor.

MotionFreeMotion+…
Motion AI Kit
Motion best practisesIncludedIncluded
Docs searchIncludedIncluded
Examples searchNot includedIncluded
CSS spring generationNot includedIncluded
MCP transition editorNot includedIncluded
Performance DoctorNot includedIncluded
Learn more about Motion+

Already have access? Set up AI Kit.

FAQs

Motion AI Kit questions
QuestionAnswer
Which agents does AI Kit work with?Any agent that supports skills or MCP servers. The installer sets up Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot, or a custom folder.
What is free, and what needs Motion+?The /motion skill’s best practices and the docs search are free and open source. Motion+ adds the source of every premium example, Performance Doctor, CSS spring generation, the transition editor and saved transitions.
Does Performance Doctor only check Motion code?No. It grades Motion, CSS, GSAP and Anime.js animations by what they ask of the browser, so it works on any codebase.
Is AI Kit a subscription?No. AI Kit is part of Motion+, which you pay for once and keep, with lifetime updates.
Explore Motion+