Motion AI Kit is a suite of tools that improve the quality and consistency of your AI agent's animation output.
-
Context: Give your agent access to the latest Motion docs, your saved transitions, and the source code for 400+ premium examples.
-
MotionScore for Agents: Find and fix animation performance issues with MotionScore's code and runtime analysis.
-
CSS spring generation: Generate
linear()spring curves on demand. No animation library needed. -
Transition editor: Real-time visual editing of Motion and CSS transitions, directly in your chat or IDE.
Features
Context
AI is trained on data that's often out of date, or on low-quality Stack Overflow/Reddit posts.
The Motion AI Kit includes best practices, lets your agent query the latest Motion docs for knowledge of the latest APIs, as well as pulling in the source code of 400+ premium Motion+ examples and Motion UI components for recommended patterns across a wide range of popular effects and interactions.
Learn more about improving AI context
MotionScore for Agents
MotionScore for Agents audits source code and can profile a running local site. It grades Motion, CSS, GSAP and other animations by render cost, then gives your agent specific fixes to apply.
Learn more about MotionScore for Agents
Transition editing
The AI Kit enables real-time editing and preview of CSS and Motion transitions, without leaving your agent or editor. It supports editing easing curves and springs, with the latter able to generate CSS code via the linear() easing curve.
Your favourite transitions can be saved and reused both in the transition editor and by your agent via the MCP.
Learn more about the transition editor
Generate CSS springs
The /motion skill can generate CSS linear() easing curves to create springs and other custom easing functions, using Motion without the runtime.
For instance, a prompt like "generate a spring that's quite bouncy" will generate:
600ms linear(0, 0.0121 /* ... */)Learn more about CSS generation
Install
Install once and everything above is available in every conversation. Cursor installs in one click below; Claude Code, Codex and other agents take a couple of minutes with the install guide.
Best practices, documentation search and CSS spring generation are free, with no account or configuration. Motion+ unlocks MotionScore audits, the transition editor and the source code for 400+ premium examples and Motion UI components. Sign in from your editor and it takes effect on your next request.