The Motion AI Kit is a suite of AI skills, MCP context, and visual editing tools that turn your code editor into a Motion expert.
-
AI Context: Give your AI editor the latest Motion docs and your saved transitions, plus source code for 370+ premium examples on Motion+.
-
MotionScore Code Audit: Grade and fix every animation in your codebase S-F, in your editor, with the
/motion-auditskill. -
Transition Editor: Real-time visual editing of Motion and CSS transitions, directly in your IDE.
-
CSS generation: Generate
linear()spring curves on demand. No animation library needed.
Upgrade to Motion+ for AI access to 370+ premium examples, the latest docs, and the full Transition Editor.
Features
AI Context
LLMs are trained on data that's often out of date, or on low-quality Stack Overflow answers.
The AI Kit lets your LLM query the latest Motion docs for the best quality both visually and in your codebase. On Motion+, it can also pull the source code of 370+ premium examples.
Learn more about improving AI context
MotionScore Code Audit
Use the /motion-audit AI skill to grade your CSS and Motion code S-F without leaving your editor. The report returns a plan that you or your LLM can use to immediately improve performance, before you ship. It's the static counterpart to MotionScore, which measures the same grades at runtime.
Learn more about the MotionScore Code Audit
Transition editing
The AI Kit enables real-time editing and preview of CSS and Motion transitions, without leaving your editor. It currently supports easing curves, delay, and duration, with spring support coming soon.
Your favourite transitions can be saved and reused anywhere.
Learn more about the transition editor
Generate CSS springs
The AI Kit lets your AI editor generate CSS linear() easing curves to create springs and other custom easing functions, using real Motion code.
Generate a CSS spring that's quite bouncy
600ms linear(0, 0.0121 /* ... */)