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 370+ premium examples.
-
MotionScore performance audit: Find and fix performance issues with your Motion and CSS animations with the
/motion-auditskill. -
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 370+ premium Motion+ examples for recommended patterns across a wide range of popular effects and interactions.
Learn more about improving AI context
MotionScore performance audit
Find and fix animation performance issues with the MotionScore skill. It first grades your CSS and Motion animations, before creating a personalised report that you or your agent can use to quickly improve animation performance before you ship.
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 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 /css-spring 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 /* ... */)