0.00.51.01.5
h1
.description
buttons
Intuitive visual editor
Pause, scrub, play. Change duration and repeat. Move and resize tracks. All in real-time.
Motion Studio
A visual animation editor for your website. Seamlessly edit alongside the new Ultramotion agent to create the perfect animation, then let it write straight to code.
A Motion editor
for your website
Add a keyframe. Edit a curve. Fine-tune every transition and preview in real-time.
Keyframe editing
Add, remove and adjust keyframes directly in the timeline.
Find the right feel
Shape an easing curve or tune a spring in the transition panel.
0.00.51.01.52.0
opacity
y
opacity
y
Per-value keyframes
Edit values together or seperately. Give each a different transition.
Layout animations
Tune layout transitions alongside your classic animations.
Every Motion version
Work with React, JavaScript, Vue, vgpu and Three.js.
Responsive editing
Preview and edit animations in desktop, tablet or mobile viewports.
Back to code
Apply with your agent, or copy a prompt into your own workflow.
Incredibly fast AI animation editing
Ultramotion is our animation editing agent. Built on Jev for edits up to 10x faster than an LLM.
Edit.Describe the change to Ultramotion. It works on the animation in-studio, with instant preview.
Preview.Try the result locally. Your source code stays as it is while you dial in your animation.
Apply.Your finished animation gets sent to your existing code agent for implementation.
Apply to code with
or- Cursor
Codex
Claude
Works with your
existing stack
Studio slots into your project setup, works with every Motion runtime, and your AI coding workflow.
Project
Next.js
Nuxt
Astro
Webpack
Vite
Motion
- React
- JavaScript
- Vue
- vgpu
- Three.js
Apply to code
- Cursor
- Codex
- Claude
Pricing
Personal
For indie developers.
…per year
- Visual timeline editing
- Live on-site preview
- Ultramotion editing agent
- Apply to code via your agent
Teams
For product teams and agencies.
…per seat / year + Tax
- Everything in Personal
- Licence for each team member
- Transferrable seats
Apply to code is billed separately by your provider.
FAQs
| Question | Answer |
|---|---|
| Which Motion APIs does Studio support? | Studio supports animate(), sequences, and React/Vue component APIs like motion and useAnimate(). AnimateView and animateView() aren't supported yet. Supported animation APIs |
| Does editing change my source? | Editing an animation works instantly on a temporary local preview. When you’re ready to write them to source, or copy a prompt for your agent, click the Apply button. |
| How do edits get applied to my code? | The agent is instructed to maintain your current structure as far as possible. A |
| Which agents can I use for saving code? | Motion Studio works with Cursor, Codex and Claude through their SDKs. Use your existing provider account. Agent usage is billed separately by that provider. It's also possible to copy an edit prompt into your agent of choice. |
| Does Ultramotion have usage limits? | Yes, we have generous usage limits that, outside of abuse, you're unlikely to hit. The exact limits will be dialled in during Early Access as we monitor usage. If you do hit limits, subsequent requests will be routed to your connected code agent. |
| Will Studio ship in my production build? | Studio runs in your local development environment. The development integration keeps the editor out of your production build. |
| What do I need to get started? | Motion 13.3.0 or later and Node.js 20.19 or later, or the newer Node.js version your framework requires. Add Studio to a Vite, Next.js, Nuxt, Astro or Webpack project. Follow the install guide. |
| Does Studio support Turbopack and React Server Components? | The Next.js integration supports Turbopack and Webpack. Studio preserves your "use client" boundaries. Keep animations you want to edit in client modules, where Studio can discover them in the browser. Server Components can render those client components. Read about RSC boundaries. |
| Does Studio support Nuxt and Astro? | Yes. Both use the Vite plugin with serverUrl and the companion Studio server. Nuxt supports Vue animations with explicit Motion imports. Astro supports imported client scripts and hydrated React or Vue components. Inline animation code in .astro files is not supported. Read the setup and limits. |
| How is Teams different? | Teams includes Personal features with a licence for each team member and transferrable seats. Account sharing is not permitted. |
| What is the Founder’s Price? | The Founder’s Price is a discount for supporting Motion Studio at this early access stage. We expect the price of Motion Studio to rise by around 40% once we’ve added more features like scroll animation editing and CSS/WAAPI support. If you sign up with the Founder’s Price, you’ll carry on paying that price. |
| Is Motion Studio included in Motion+? | Motion Studio is a separate subscription. Motion+ members get 25% off Personal yearly plans. Teams and monthly plans are excluded. |
| What happens when I cancel? | Nothing. You keep any and all changes made via Motion Studio and can carry on using it to edit animations. You can resume your subscription whenever you want to regain Ultramotion edits and the ability to write to code. |
| Is there a demo version? | You can install and use Motion Studio for free. Agent integration and upcoming features are limited to the paid version. |