AI agents tend to guess at animation code, often from outdated or low-quality sources. The Motion AI Kit grounds yours in current, performance-checked Motion knowledge, straight from the team that builds it.
-
Context: Give your agent access to the latest Motion docs, your favourite transitions, and the source code for 400+ premium examples.
-
MotionScore for Agents: Grade and fix animation performance in source code or a running local site with the
/motionskill. -
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 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 skills containing best practises, 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 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 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 /* ... */)