# Motion Canvas — Create Animated Videos with Code

> A TypeScript library and editor for creating publication-quality animated videos programmatically, combining the precision of code with a visual preview workflow.

## Install

Save in your project root:

# Motion Canvas — Create Animated Videos with Code

## Quick Use
```bash
npm create @motion-canvas@latest
cd my-animation
npm install
npm start
# Opens the editor at http://localhost:9000
```

## Introduction
Motion Canvas is a TypeScript framework for creating precise, reproducible animated videos using code. It pairs a declarative animation API with a browser-based editor that provides a timeline, real-time preview, and frame-by-frame export, bridging the gap between programmatic animation and traditional video editing.

## What Motion Canvas Does
- Defines scenes and animations as TypeScript generator functions
- Renders 2D graphics on an HTML5 Canvas with a built-in scene graph
- Provides a visual editor with timeline scrubbing and frame export
- Supports tweening, signals, and flow control for complex animation sequences
- Exports frame sequences that can be encoded into video with FFmpeg

## Architecture Overview
Each project consists of scenes written as generator functions that yield animation steps. The runtime processes these generators frame-by-frame, advancing tweens and signals to produce each canvas state. The editor, built with Vite, hot-reloads scene code and renders a live preview. An exporter captures each frame as a PNG and optionally pipes them through FFmpeg for final video output.

## Self-Hosting & Configuration
- Scaffold a new project with the official create package and npm
- Define scenes in `src/scenes/` as TypeScript generator functions
- Configure resolution, FPS, and background in the project settings file
- Use the editor UI to scrub the timeline and inspect node properties
- Export frames via the editor or CLI and encode with FFmpeg

## Key Features
- Deterministic frame-by-frame rendering for reproducible output
- Signal-based reactivity that propagates value changes through the scene graph
- Code-driven workflow that plays well with version control and collaboration
- Extensible node system for custom shapes, text, images, and layouts
- Hot module replacement for instant feedback during development

## Comparison with Similar Tools
- **Manim** — Python-based math animation; Motion Canvas uses TypeScript with a visual editor
- **Remotion** — React-based video composition; Motion Canvas uses generator-based scene flow
- **After Effects** — Professional GUI tool; Motion Canvas is open source and code-first
- **Rive** — Interactive runtime animations; Motion Canvas targets video export workflows

## FAQ
**Q: What output formats does Motion Canvas support?**
A: It exports PNG frame sequences. You encode them to MP4, WebM, or GIF using FFmpeg or any encoder.

**Q: Can I use it for interactive web animations?**
A: It is primarily a video creation tool. For interactive use, look at its player component or alternative libraries.

**Q: Does it support 3D?**
A: The core renderer is 2D Canvas. Community extensions and WebGL integration are possible but not built in.

**Q: How does the generator-based API work?**
A: Each `yield*` expression pauses the scene until the yielded animation completes, making complex sequences readable as sequential code.

## Sources
- https://github.com/motion-canvas/motion-canvas
- https://motioncanvas.io

---
Source: https://tokrepo.com/en/workflows/asset-1a626bf6
Author: AI Open Source