Get started with Motion Studio
Motion Studio is a suite of AI and visual animation editing tools for your favourite code editors.
AI animation expert: Upgrade your AI with the latest Motion documentation, custom ruleset, and access to over 330 examples and recommended patterns.
Visual controls: Real-time editing of Motion and CSS transitions.
CSS generation: Generate CSS springs - no animation library needed.
Unlock the full Motion Studio featureset with Motion+. One-time payment, lifetime subscription.
Install Motion Studio
One-click install for Cursor:
Motion Studio is also compatible with VS Code, Google Antigravity and more. See full installation guide.
Features
AI Context
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
Transition editing
Motion Studio enables real-time editing and preview of CSS and Motion transitions, without having to leave your editor. It currently supports easing curves, delay and duration, with spring support coming soon.
Your favourite transitions can be saved and reused anywhere.
Learn more about visual controls
Generate 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 /* ... */)
Motion Studio is a suite of AI and visual animation editing tools for your favourite code editors.
AI animation expert: Upgrade your AI with the latest Motion documentation, custom ruleset, and access to over 330 examples and recommended patterns.
Visual controls: Real-time editing of Motion and CSS transitions.
CSS generation: Generate CSS springs - no animation library needed.
Unlock the full Motion Studio featureset with Motion+. One-time payment, lifetime subscription.
Install Motion Studio
One-click install for Cursor:
Motion Studio is also compatible with VS Code, Google Antigravity and more. See full installation guide.
Features
AI Context
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
Transition editing
Motion Studio enables real-time editing and preview of CSS and Motion transitions, without having to leave your editor. It currently supports easing curves, delay and duration, with spring support coming soon.
Your favourite transitions can be saved and reused anywhere.
Learn more about visual controls
Generate 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 /* ... */)
Motion Studio is a suite of AI and visual animation editing tools for your favourite code editors.
AI animation expert: Upgrade your AI with the latest Motion documentation, custom ruleset, and access to over 330 examples and recommended patterns.
Visual controls: Real-time editing of Motion and CSS transitions.
CSS generation: Generate CSS springs - no animation library needed.
Unlock the full Motion Studio featureset with Motion+. One-time payment, lifetime subscription.
Install Motion Studio
One-click install for Cursor:
Motion Studio is also compatible with VS Code, Google Antigravity and more. See full installation guide.
Features
AI Context
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
Transition editing
Motion Studio enables real-time editing and preview of CSS and Motion transitions, without having to leave your editor. It currently supports easing curves, delay and duration, with spring support coming soon.
Your favourite transitions can be saved and reused anywhere.
Learn more about visual controls
Generate 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 /* ... */)
