Motion Canvas in Rust
A high-performance vector animation engine inspired by Motion Canvas, built on Vello and Typst.
[!IMPORTANT]
Prototype Status: This project is a functional prototype and proof-of-concept. It is not a 1:1 implementation of the original Motion Canvas API or features.
Links
Installation
Add the library to your Cargo.toml. To enable all features (math, code blocks, images, export), use the full flag:
cargo add motion-canvas-rs --features full
cargo add motion-canvas-rs --features math,image,audio
Features
| Feature |
Description |
Enables |
math |
Typst-powered LaTeX math rendering. |
MathNode |
code |
Syntax-highlighted code blocks via Syntect. |
CodeNode |
image |
Bitmap (PNG, JPEG) and Vector (SVG) support. |
ImageNode |
audio |
Independent audio timeline and MP3 playback. |
play!, AudioNode |
export |
Headless frame rendering and video generation. |
project.export() |
full |
Meta-feature that enables all of the above. |
Everything |
Key Capabilities
- High-performance: GPU-accelerated vector rendering via Vello.
- Arc-length Sampling: Accurate path animations and offsets.
- Easing Library: 30+ standardized easing functions.
- FFmpeg Integration: Direct streaming of animation frames or merging with audio.
- Audio Support: Synchronized MP3 playback and independent audio timelines.
- Clean API: Streamlined prelude for high-speed prototyping.
- Node Primitives: Built-in support for Circles, Rects, Polygons, Lines, and Groups.
Supported Nodes
| Node |
Description |
Transform Properties |
AudioNode |
Independent audio clip playback. |
volume, crop |
CameraNode |
Viewport transformation (pan, zoom, rotate). |
position, rotation, zoom, centered |
Circle |
Basic circle primitive. |
position, rotation, scale, radius, anchor |
CodeNode |
Syntax-highlighted code with transitions. |
position, rotation, scale, code, anchor |
GroupNode |
Hierarchical grouping of any nodes. |
position, rotation, scale, children, anchor |
ImageNode |
Bitmap and SVG image display. |
position, rotation, scale, size, anchor |
Line |
Simple line between two points. |
position, rotation, scale, start, end, anchor |
MathNode |
Typst-powered mathematical formulas. |
position, rotation, scale, equation, anchor |
PathNode |
Complex path sampling and animation. |
position, rotation, scale, arc-length, anchor |
Polygon |
Regular and custom polygon shapes. |
position, rotation, scale, points, anchor |
Rect |
Rectangle with optional corner radius. |
position, rotation, scale, size, radius, anchor |
TextNode |
High-quality text rendering (skrifa). |
position, rotation, scale, text, anchor |
Project Structure
The engine is organized into a modular structure:
src/lib.rs: Library entry point with clean module re-exports.src/engine/nodes/: Individual node implementations.src/engine/animation/: Core animation traits and flow controls.src/engine/easings.rs: Comprehensive easing function library.examples/: Ready-to-run demonstration scripts.
Quick Start
use motion_canvas_rs::prelude::*;
use std::time::Duration;
fn main() {
let mut project = Project::default()
.with_title("Quick Start")
.with_background(Color::rgb8(0x1a, 0x1a, 0x1a))
.close_on_finish();
let circle = Circle::default()
.with_position(Vec2::new(400.0, 300.0))
.with_radius(100.0)
.with_fill(Color::RED);
let text = TextNode::default()
.with_position(Vec2::new(400.0, 150.0))
.with_text("Hello Motion Canvas!")
.with_font_size(48.0)
.with_fill(Color::WHITE);
project.scene.add(Box::new(circle.clone()));
project.scene.add(Box::new(text.clone()));
project.scene.video_timeline.add(all![
circle.radius.to(100.0, Duration::from_secs(1)),
text.position.to(Vec2::new(400.0, 400.0), Duration::from_secs(1)),
]);
project.show().expect("Failed to render");
}
Running Examples
The project includes 21 examples that can be found in the examples directory.
cargo run --example advanced_flow --features=full
cargo run --example anchors
cargo run --example audio_demo --features audio
cargo run --example camera_demo
cargo run --example code_advanced --features code
cargo run --example code_animation --features code
cargo run --example color_interpolation
cargo run --example easing_scope
cargo run --example explainer --release --features full
cargo run --example export --features export
cargo run --example getting_started
cargo run --example grid
cargo run --example group_animation
cargo run --example images --features image,svg
cargo run --example math_animation --features math
cargo run --example math_code --features math,code
cargo run --example nested_cameras
Based on the "News Feed System" architecture from "System Design Interview: An Insider's Guide" (Second Edition) by Alex Xu.
cargo run --example news_feed
cargo run --example polygon
cargo run --example shapes
| Preview |
 |
cargo run --example signals
Requirements
- Rust 1.75+
- FFmpeg (optional, for direct video streaming)
- System fonts (Inter, Fira Code, etc. for specific examples)
Credits
This project is heavily inspired by the original Motion Canvas by aarthificial.
Special thanks to:
- easings.net for the standardized easing function library.
- shiki-magic-move for the inspiration behind the token-based code transition logic.
- Alex Xu for the excellent system design diagrams in "System Design Interview: An Insider's Guide", represented in the
news_feed example.
