Get started with Motion Studio

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.

• Documentation: Update your LLM with the latest Motion docs.

• Curve visualisation: Enable your LLM to visually understand spring and easing functions.

Motion+ members also gain access to:

• Bezier curve editor: Real-time editing and preview of Motion and CSS bezier curves.

• CSS springs: Generate CSS springs - no animation library needed.

• Custom ruleset: Turn your LLM into a Motion expert.

Add Motion Studio to your code editor with our installation guide.

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.

Install the extension

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 /* ... */)

Learn more about CSS generation

Visualise animations

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+ rules.

• Best practises 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