Motion Studio

Using the platform

Motion Studio is a visual editor for video and a primitive set for AI coding agents. Both paths produce the same Remotion output — here's how to drive each.

The visual studio

Open the Studio and you get a four-pane editor:

  • Tool rail (far left) toggles the Library and the Agent panel.
  • Library lists every registered scene and effect. Click a scene to add it as a clip on the timeline.
  • Preview stage plays your project live. Spacebar plays / pauses; the scrubber on the timeline ruler seeks.
  • Timeline holds your clips in order. Drag to reorder, drag the edges to retime, click a clip to select it.
  • Inspector (right side, when a clip is selected) exposes three layers of editing:
    • Style — universal background, text color, font, and accent that work on every non-locked scene.
    • Transition in — how this clip enters from the previous one. Fade, swipe, zoom, or hard cut. See the transitions section.
    • Fields — the scene-specific props (text, values, layout, etc.).
    • Effects — extra animation layers stacked on top.

When you're done, Export in the top bar renders the project as MP4. Save writes a project JSON you can reload later.

Using agents (Claude Code, Codex)

Because every scene is a typed Remotion component, AI coding agents are extremely good at composing them. The typical loop:

  1. Tell the agent what video you want — "a 10-second changelog reel introducing v2.1 with a Terminal install line, a BarChart of monthly active users, and a Toast saying 'shipped'."
  2. The agent reads the props on each component's docs page (or runs cat apps/remotion/src/compositions/X/meta.ts), then writes a Remotion Root.tsx that registers a single Composition chaining the scenes — or generates a project JSON to load into the Studio.
  3. You eyeball the preview, ask for tweaks, ship.

The agent doesn't need to invent animations — it just picks scenes and fills props. The aesthetic comes from the library; the storytelling comes from the agent.

Mixing scenes

Scenes are designed to compose:

  • Frames (PhoneFrame, LaptopFrame, BrowserWindow) take another composition's id as a prop and render it inside a device chrome. Stack a MessageBubbles inside a PhoneFrame for a phone-mockup reel.
  • SplitScene renders two compositions side-by-side. Pair a Terminal with a LineChart for a "code drives metric" beat.
  • Text animations layer well on top of card scenes — most of them have transparent backgrounds when the brand background is set to transparent.

Style, transitions, and effects

The three editor sections work in this order at render time:

  1. The scene reads its props and the universal clipStyle to draw its frame.
  2. Effects wrap the scene to apply extra animation layers (fade-out, slide-out, Ken Burns, etc.).
  3. Transition in plays during the first durationInFrames of the clip — fade, swipe, or zoom — so the cut from the previous clip is never a hard cut unless you set kind: "none".

Transitions default to a 14-frame fade (fade at 60fps ≈ 230ms). Pick something more aggressive (swipe, zoom-out) for energetic edits, or set none for hard cuts in fast-paced sequences.