Your first project

Open Studio, choose Timeline, and give the project a name. Studio creates a folder for it in Documents\MotionAI and opens the editor. Import media from the Media tab, drag it onto a track, and press play.

Inside a project

A project is an ordinary folder you can back up, sync or put under version control:

src/project.json   the timeline: tracks, clips, keyframes, transitions
src/assets/        your media: images, videos, audio
src/clips/         code clips, one .tsx file each
output/            your exports

Editing with an AI agent

Studio watches project.json. When anything saves it, whether that’s you, a script or an AI agent, the preview updates within about a second, with no reload. The change becomes a single undo step in the editor.

Open the project in Studio.
Open a terminal in the project folder and start your agent, for example Claude Code.
Describe the change: “Add a lower third at 3 seconds that says ‘Filmed in Lisbon’ and slides in from the left.”

A file that doesn’t pass validation is never half-applied. Studio keeps showing the last valid version and lists every error with its exact location, so the agent can fix its own mistakes.

The project file

The smallest useful project is one text clip that fades in and out:

{
  "version": 1,
  "settings": {"width": 1920, "height": 1080, "background": "#141414"},
  "tracks": [
    {
      "id": "track-1",
      "clips": [
        {
          "id": "text-1",
          "type": "text",
          "text": "Your first video",
          "start": 0,
          "end": 5,
          "props": {"fontSize": 120, "fill": "#ffffff"},
          "keyframes": {
            "opacity": [
              {"time": 0, "value": 0},
              {"time": 0.5, "value": 1},
              {"time": 0.5, "anchor": "end", "value": 1},
              {"time": 0, "anchor": "end", "value": 0}
            ]
          }
        }
      ]
    }
  ]
}

Times are in seconds. The video lasts until the latest clip ends.
Positions use the project’s size, with 0, 0 at the center. On a 1920 × 1080 project, x runs from -960 to 960.
Tracks stack upwards: the first track in the file is drawn at the bottom. Clips on one track can’t overlap, so things that show at the same time go on separate tracks.

Clip types

Type	What it is
`text`	Styled text with font, size, weight, alignment, fill and stroke.
`image`, `svg`	Stills and vector art from the assets folder.
`video`, `audio`	Media with source start, playback rate and volume.
`rect`, `circle`, `line`	Shapes with corners, arrows and an animatable “draw on” amount.
`camera`	Zooms the whole picture onto a point, easing in and out.
`code`	A TypeScript animation from the clips folder.

Keyframes and easing

Keyframes animate any number or color property. A keyframe’s time counts from the clip’s start, or back from its end with "anchor": "end", which keeps fade-outs in place when a clip is trimmed.

"keyframes": {
  "x": [
    {"time": 0, "value": -1200},
    {"time": 0.6, "value": 0, "easing": "easeOutCubic"}
  ]
}

Easings: linear, and easeIn, easeOut or easeInOut versions of Sine, Quad, Cubic and Back. The Fade, Pop and Slide presets are ordinary keyframes you can adjust afterwards.

Transitions and groups

A transition joins a clip to the one that ends exactly where it starts on the same track. Choose crossfade, dip, or push with a direction. Transitions are centered on the cut.

"transition": {"type": "push", "direction": "left", "duration": 1}

Clips that share a group move, copy and delete together, such as a title and the box behind it.

Code clips

For anything the clip types can’t do, write a TypeScript file in src/clips/. Code clips use the Motion Canvas animation engine: nodes, signals and tweens.

import {Txt} from '@canvas-commons/2d';
import {all, createRef, easeOutCubic, waitFor} from '@canvas-commons/core';
import {makeClip} from '@canvas-commons/timeline';

export default makeClip(function* (container) {
  const title = createRef<Txt>();
  container.add(
    <Txt key="title" ref={title} text="Made with code"
         fill="#ffffff" fontSize={96} opacity={0} y={40} />,
  );
  yield* all(title().opacity(1, 0.6), title().y(0, 0.6, easeOutCubic));
  yield* waitFor(1.4);
});

Then put it on the timeline:

{"id": "code-1", "type": "code", "src": "title.tsx", "start": 2, "end": 4}

Saving the file refreshes the preview immediately. Give important objects a key, and the clip’s targets can move, fade, scale or rotate them on top of what the code does. If a file has an error, only that file’s clips stop drawing, and the Media tab shows what went wrong.

Exporting

Export renders the timeline to MP4 on your own computer, using hardware acceleration when your PC supports it. Files are saved in the project’s output folder, with no watermark.

How Studio projects work.