Streamline your animation development process with Motion Studio. Edit CSS and Motion code directly in-editor with Motion Studio's visual and AI editing tools.
- AI animation expert: Upgrade your AI with the latest Motion docs, custom ruleset, and access to over 330 examples and recommended patterns.
- Visual editor: Real-time editing of Motion and CSS bezier curves.
- CSS generation: Generate CSS springs - no animation library needed.
Motion+ unlocks the full feature set.
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
Documentation
LLMs are trained on data that is often out of date, leading to incorrect answers or inaccurate code. Motion Studio provides the latest documentation to your LLM so it's always up to speed.
Learn more about documentation for LLMs
Bezier curve editing
Motion Studio enables real-time editing and preview of bezier curves, without having to leave your editor.
Your favourite transitions can be saved and reused anywhere.
CSS springs
Motion Studio gives your AI editor the ability to generate CSS linear() easing curves to create springs or other custom easing curves, using real Motion code.
Generate a CSS spring that's quite bouncy
600ms linear(0, 0.0121 /* ... */)
Learn more about CSS generation
Visualise springs and easing curves
Motion Studio enables your LLM to visualise springs and easing curves. Just select a spring or easing definition in your code and ask your LLM to "visualise" it - or prompt it to "visualise a stiff spring" or "visualise the CSS ease-out curve".
Learn more about visualisation
Rules
Turn your LLM into an animation expert with the Motion+ LLM rules.
- Best practices for when and how to add will-change.
- Coding styles to improve per-frame performance.
- When to animate transform vs independent transforms.
Learn more about rules
Issues & feature requests
Found a bug or have a feature request? Open an issue on the Motion repo.
