Create an editable animation with an AI assistant

Start with the working example

Our original example assets are free to use and modify. Player code retains its included license.

1. Open a project and connect

Open the editor and choose Connect Agent. Select the terminal-agent or MCP instructions and copy the generated pairing prompt into your own assistant. The connection code belongs to this project and tab, expires after ten minutes, and can be used once. Keep it private.

2. Give a concrete animation request

Append the prompt below to the pairing instructions. It specifies canvas size, shapes, colors, and timing. The assistant should inspect the current project and revision first, then create the layers and keyframes. A successful edit appears immediately in the open editor and creates an undo step.

3. Inspect the result

Play the timeline and compare the ball positions at zero, half a second, and one second. The ball should rise and return over a one-second loop. Inspect the scale tracks for squash, and check that the shadow stays below the ball. The supplied editable result gives you a reference even without an assistant connection.

4. Make a manual refinement

Select the ball, change its fill, or move the middle y-position keyframe to change the height of the bounce. Ask for one change at a time when working with an assistant. Read the current revision before another edit, especially after manual changes or Undo.

5. Save, export, and disconnect

Download a .motion project backup, or ask the assistant to export it with export_project and retrieve the completed file. Animation exports use the same account permissions as the editor dialog. Free accounts have five watermarked GIF exports per month; Pro adds unwatermarked formats. End session revokes the connection. Reloading, closing the tab, or switching projects also ends access.

Connection requirements and limits

You supply the AI assistant and any provider subscription. A terminal connection requires Node.js 22 or newer; an MCP connection requires an assistant that supports remote MCP. The bridge can import supported assets, edit the paired project, request previews, and export with your account permissions. Generic imported Lottie internals remain inside a composition. The bridge does not run arbitrary JavaScript. Your provider may retain tool arguments and responses.

Prompt to append after pairing

Inspect the current project first. Make a 600 by 600 animation lasting one second at 30 fps. Add a purple circle named Ball, 100 pixels wide, centered at x 300. Animate its y position from 360 at 0 seconds to 180 at 0.5 seconds and back to 360 at 1 second. Add slight squash at the bottom. Add a pale ellipse named Shadow at x 300, y 425, 130 pixels wide and 24 pixels tall. Keep the shadow in place and narrow it while the ball is high. Use linear keyframes for this first example. Preview frames at 0, 0.5, and 1 seconds, then leave the editable project open.

Watch the verified workflow

Silent recording with captions. The assistant edits the open project through the relay, followed by a manual color change.

Continue with your animation