Save time and improve quality with Motion Studio, a suite of AI and visual animation editing tools for your favourite code editors.
- AI Context: Upgrade your AI with access to the latest Motion docs, a custom ruleset, and access to the source code of 330+ examples.
- Transition editor: Real-time editing of easings and springs in both Motion and CSS.
- Performance audit: Identify and fix slow animations.
- CSS generation: Generate CSS springs using AI or our transition editor.
Unlock the full Motion Studio feature set with Motion+. One-time payment, lifetime subscription.
Install
Install the extension to add visual editing tools, and add the MCP to add documentation and other AI editing features.
Enable Motion+ features
Generate a personal access token, then click "Authenticate" in the Motion panel to open an input dialog for your token.
Features
AI Context
LLMs are trained on data that is often out of data, or on low-quality Stack Overflow answers.
Motion Studio lets your LLM query the latest Motion docs, as well as the source code of 330+ premium examples for the best quality both visually and in your codebase.
Learn more about documentation for LLMs
Transition editor
Motion Studio enables real-time editing and preview of transitions. Generate and edit easing curves and springs in both CSS and Motion, without having to leave your editor.
Your favourite transitions can be saved and reused anywhere.
Learn more about the transition editor
Use the /motion-audit AI skill to run a performance audit on your CSS and Motion code. The report will return a plan that you or your LLM can use to immediately improve performance.
Learn more about the performance audit
Generate CSS springs
Motion Studio's transition editor can output CSS linear() springs at exactly the right fidelity for the duration of your animation. It also enables your LLM these same springs using real Motion code.
Generate a CSS spring that's quite bouncy
600ms linear(0, 0.0121 /* ... */)
Learn more about CSS generation
Issues & feature requests
Found a bug or have a feature request? Open an issue on the Motion repo.
