---
title: Introduction
description: A generator-driven actor runtime for deterministic, frame-based video. Author motion once as code; resolve any frame as a pure function.
---

MotionActor is the runtime behind frame-accurate video built in TypeScript. You write a
scene as a generator, the runtime records what you authored, and any frame resolves as a
pure function of that record.

```ts
const compiled = createScene(function* (ctx) {
  const card = ctx.spawn(Card);

  yield* card.appearance.opacity.tween(1, 0.3);
  yield* ctx.wait(0.5);
  yield* card.layout.x.tween(200, 0.5);

  return { card };
});

compiled.at(45).scene.card.layout.x; // 200 — no playback, no side effects
```

Two things follow from that shape, and most of this documentation is downstream of them.

**Authoring is sequential; resolution is random-access.** The generator reads like a
storyboard — do this, wait, then do that — but nothing plays. `yield*` advances an
authored cursor and records the tween. Rendering frame 45 never replays frames 0–44.

**Frames are pure.** `at(frame)` depends on the frame, the channel values it reads, and
the options you pass. Nothing else. That is what makes seeking, caching, headless
evaluation and reproducible renders possible — and it is why `Date.now()` and
`Math.random()` inside a `derived` body are unsupported rather than merely discouraged.

## Start here

**[Getting started](/docs/getting-started)**

Install the packages, compile your first scene, render it with Remotion.

**[How it works](/docs/mental-model)**

Compile and resolve, authored time, and what each stage is allowed to do.

**[Reactivity](/docs/reactivity)**

signal, reactiveSignal, derived, channel — and which one a given piece of state wants.

**[Runtime](/docs/runtime)**

Scene orchestration, compiled scenes, hosting, effects, transitions.

**[Actors](/docs/actors)**

Actor, LayoutActor, and the built-in primitive actors.

**[Examples](/docs/examples)**

A complete typechecked Remotion composition, and one real library actor end to end.

## Authored time is in seconds

Every authored duration in this documentation is seconds. The runtime converts to
integer frames using the scene's `fps`, so the same scene at 30 and 60 fps produces the
same motion at different frame counts.

<Timeline
  fps={30}
  seconds={3}
  tracks={[
    { label: "card.appearance.opacity.tween(1, 0.3)", start: 0, duration: 0.3, note: "9f" },
    { label: "ctx.wait(0.5)", start: 0.3, duration: 0.5, note: "15f" },
    { label: "card.layout.x.tween(200, 0.5)", start: 0.8, duration: 0.5, note: "15f" },
  ]}
>
  Three sequential `yield*`s become 39 frames of authored time. `compiled.totalDuration`
  reports 39; frame 45 is past the end, so the card sits at its final `x` of 200.
</Timeline>

## What this site covers

This is the runtime reference: the scene model, the state primitives, the hosting model,
and the core actor surfaces. Reusable actor families and the component registry live in
`motionactor-library` and are documented alongside it.

:::info[Editorial rule]
  Only the stable core surface is documented here. Demo-specific actors, large family
  catalogs and unsettled design notes belong elsewhere.
:::