Motion Canvas — Create Animated Videos with Code

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