# MotionActor

> A generator-driven actor runtime for deterministic, frame-based video.

## Docs

- [Introduction](https://docs.motion.actor/docs): MotionActor runs a TypeScript generator once, records the motion it describes, and reads any frame of that record on demand.

## Start here

- [Quickstart](https://docs.motion.actor/docs/getting-started): Write a scene, read a frame from it, draw it with a renderer and play it in a host.
- [How it works](https://docs.motion.actor/docs/mental-model): Scene code runs once at compile time or once per frame at resolve time, and a renderer only reads the result.

## Reference

### Reactivity

- [Reactivity](https://docs.motion.actor/docs/reactivity): Where each of an actor's values comes from, and the primitive that declares it.

#### State

- [signal](https://docs.motion.actor/docs/reactivity/signal): A value the scene writes. set, tween, play, animate, transition and derive record each write at the cursor.
- [reactiveSignal](https://docs.motion.actor/docs/reactivity/reactive-signal): One nested value, written leaf by leaf or as a whole.
- [group](https://docs.motion.actor/docs/reactivity/group): Names a set of fields, so an actor reads card.typography.size and spawns with nested inputs.

#### Computed values

- [derived](https://docs.motion.actor/docs/reactivity/derived): A read-only value computed from other reads each time a frame resolves.

#### Inputs and coordination

- [channel](https://docs.motion.actor/docs/reactivity/channel): A value the host publishes while frames play, such as a measured width, read when a frame resolves.
- [watch](https://docs.motion.actor/docs/reactivity/watch): Runs a handler while the scene compiles, each time a value the actor reads changes.
- [Events and subscribe](https://docs.motion.actor/docs/reactivity/events-and-subscribe): An actor announces what happened with a typed event; subscribe attaches another actor's response.

### Runtime

- [Runtime](https://docs.motion.actor/docs/runtime): How a scene script becomes a timeline, how frames resolve from it, and how actors host one another.

#### Scenes

- [Scene orchestration](https://docs.motion.actor/docs/runtime/scene-orchestration): A scene script runs once, moving a cursor through time while it spawns actors and records their motion.
- [Compiled scenes](https://docs.motion.actor/docs/runtime/compiled-scene): Turning a frame number into state, finding actors in it, caching it and reflecting it for editors.
- [Determinism](https://docs.motion.actor/docs/runtime/determinism): What a frame may depend on, what quietly breaks that, and how values from the host get in safely.

#### Structure

- [Slots](https://docs.motion.actor/docs/runtime/slots): A slot is a place in an actor that other actors are spawned into, in an order the scene controls.
- [Children](https://docs.motion.actor/docs/runtime/children): A child is a part every instance of an actor has, spawned with it and able to read it.

### Actors

- [Actors](https://docs.motion.actor/docs/actors): The two base classes, the actors that ship with MotionActor, and the decorator that labels a command for editors.

#### Base classes

- [Actor](https://docs.motion.actor/docs/actors/actor): The base class. An actor owns state, the commands that change it over time, and hooks for entering and leaving a scene.
- [LayoutActor](https://docs.motion.actor/docs/actors/layout-actor): The base class for anything drawn on the stage. It adds a box, a transform, opacity, compositing and a measured size.

#### Built-in actors

- [Camera2D](https://docs.motion.actor/docs/actors/camera2d): The scene camera from @motionactor/primitives. It pans, zooms, rolls, frames a box, follows an actor and shakes.
- [ClockActor](https://docs.motion.actor/docs/actors/clock-actor): A stopwatch whose elapsed time is computed from the frame, from @motionactor/primitives.
- [ComponentActor](https://docs.motion.actor/docs/actors/component-actor): An actor whose only state is a React function, from @motionactor/primitives. It draws from the frame number.
- [Audio and sound effects](https://docs.motion.actor/docs/actors/audio): Audio plays one clip along the timeline. AudioManager schedules short cues, by name or in answer to another actor's events.

#### Authoring

- [@command](https://docs.motion.actor/docs/actors/command): Labels a generator method for editors, with its parameters and a default duration, so a timeline can offer it without knowing the class.

### Rendering

- [Rendering](https://docs.motion.actor/docs/rendering): How a resolved frame becomes pixels, through renderers, backends, layers, compositions and the hosts that play them.

#### Drawing

- [Renderers](https://docs.motion.actor/docs/rendering/renderers): A renderer draws one actor class on one backend from the resolved state of one frame.
- [Backends and layers](https://docs.motion.actor/docs/rendering/backends-and-layers): The DOM, Pixi, Three.js and Skia backends, and how a scene splits its stage between them.
- [Media, assets and fonts](https://docs.motion.actor/docs/rendering/media-assets-and-fonts): How a scene names files, how hosts load them, and how video and audio play frame by frame.

#### Effects and transitions

- [Effects](https://docs.motion.actor/docs/rendering/effects): An effect is a timed record on an actor that the actor's backend paints, with typed params a scene can tween.
- [Transitions](https://docs.motion.actor/docs/rendering/transitions): One command morphs the tree before a change into the tree after it, matched by shared element names, and every frame of it scrubs.

#### Playback and export

- [Compositions](https://docs.motion.actor/docs/rendering/compositions): A composition packages a scene with its size, frame rate, render runtime and props, so any host can build and play it.
- [Hosts](https://docs.motion.actor/docs/rendering/hosts): A host owns the clock. It picks a frame, waits until the frame is ready, then shows or captures it.
- [Playing in the browser](https://docs.motion.actor/docs/rendering/playing-in-the-browser): SceneMedia plays a compiled scene behind Video.js controls.
- [Capture and export](https://docs.motion.actor/docs/rendering/capture-and-export): Read finished frames as pixels, encode stills, and write a video file from a mounted composition.

#### Other frameworks

- [Vue](https://docs.motion.actor/docs/rendering/vue): Paint scenes with Vue 3 through @motionactor/renderers/vue and @motionactor/dom/vue.
- [Svelte](https://docs.motion.actor/docs/rendering/svelte): Paint scenes with Svelte 5 through @motionactor/renderers/svelte and @motionactor/dom/svelte.

#### Writing a backend

- [Writing a backend](https://docs.motion.actor/docs/rendering/writing-a-backend): Build a backend for another drawing surface, with a host, renderers and an effect kind of its own.

- [Effect kinds](https://docs.motion.actor/docs/rendering/writing-a-backend/effects): Define an effect kind for SVG filters, with a stage that paints its effects.
- [Holding a frame](https://docs.motion.actor/docs/rendering/writing-a-backend/frames): Hold a frame while a texture, font or shader loads, and carry the frame context into another React reconciler.

## Build

### Guides

- [Guides](https://docs.motion.actor/docs/guides): Writing an actor from state to renderer, and testing a scene without drawing it.

- [Creating actors](https://docs.motion.actor/docs/guides/creating-actors): One actor from its state to its renderer, with signals for what the scene writes, derived values for what gets drawn and commands for motion.
- [Testing](https://docs.motion.actor/docs/guides/testing): Compile a real scene, resolve frames and assert on what they hold, with no renderer, browser or hand-built fixture.

### Examples

- [Examples](https://docs.motion.actor/docs/examples): A small complete Remotion composition, and a real library actor at full size.

- [Remotion card](https://docs.motion.actor/docs/examples/remotion-card): A complete Remotion composition in two files, with a declared child, a derived value read against the viewport and typed scene exports.
- [Desktop](https://docs.motion.actor/docs/examples/desktop): A real library actor end to end, with signals for state, derived chains for presentation, slots for hosted apps and generator commands for motion.

## Ecosystem

- [Packages](https://docs.motion.actor/docs/packages): What each @motionactor package holds and which ones an app needs.
- [Component library](https://docs.motion.actor/docs/component-library): Actor families and effects, distributed as a shadcn registry that copies their source into your repo.

## Agent skills

- [motionactor](https://docs.motion.actor/.well-known/agent-skills/motionactor/SKILL.md): Read the MotionActor docs instead of answering from memory. A generator-driven actor runtime for deterministic, frame-based video. Use when a task involves MotionActor: how it works, how to set it up or configure it, or its API.

## Agent resources

- [llms-full.txt](https://docs.motion.actor/llms-full.txt): The full Markdown of every page in one file.
- [Page Markdown](https://docs.motion.actor/index.md): Append `.md` to any page URL to fetch that page as raw Markdown.
- [JSON API](https://docs.motion.actor/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://docs.motion.actor/openapi.json.
- [MCP server](https://docs.motion.actor/mcp): Streamable HTTP Model Context Protocol server with search_docs, get_page, list_pages, and get_navigation tools, plus every page as a resource. Discovery document: https://docs.motion.actor/.well-known/mcp.json
- [Agent skills](https://docs.motion.actor/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes.
- [API catalog](https://docs.motion.actor/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here.
- [AI catalog](https://docs.motion.actor/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs).
- [agent-readability.json](https://docs.motion.actor/agent-readability.json): Manifest of every agent-facing artifact on this site.
- [Sitemap](https://docs.motion.actor/sitemap.xml): Every indexable page URL with its last-modified date.