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,svg,audio
Features
| Feature |
Description |
Enables |
audio |
Independent audio timeline and MP3 playback. |
play!, AudioNode |
code |
Syntax-highlighted code blocks via Syntect. |
CodeNode |
export |
Headless frame rendering and video generation. |
project.export() |
image |
Bitmap image support (WebP, JPEG, PNG). |
ImageNode |
math |
Typst-powered LaTeX math rendering. |
MathNode |
physics |
Simplified 2D physics engine integration via Rapier. |
PhysicsNode, RigidBodyNode, StaticBodyNode |
svg |
Vector graphics support via Vello SVG. |
SvgNode |
full |
Meta-feature that enables all of the above. |
Everything |
Key Capabilities
- Arc-length Sampling: Accurate path animations and offsets.
- Audio Support: Synchronized MP3 playback and independent audio timelines.
- Clean API: Streamlined prelude for high-speed prototyping.
- Easing Library: 30+ standardized easing functions.
- FFmpeg Integration: Direct streaming of animation frames or merging with audio.
- High-performance: GPU-accelerated vector rendering via Vello.
- 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 image display (WebP, PNG, JPG). |
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 |
PhysicsNode |
Container orchestrating a 2D physics simulation world. |
opacity, gravity, is_moving_container |
Polygon |
Regular and custom polygon shapes. |
position, rotation, scale, points, anchor |
Rect |
Rectangle with optional corner radius. |
position, rotation, scale, size, radius, anchor |
RigidBodyNode |
Dynamic physical body reacting to gravity, collisions, and forces. |
position, rotation, shape, bounciness, friction, initial_velocity, initial_angular_velocity |
StaticBodyNode |
Immovable physical body acting as boundaries or obstacles. |
position, rotation, shape, bounciness, friction |
SvgNode |
Vector SVG image display and animation. |
position, rotation, scale, size, anchor |
TextNode |
High-quality text rendering (skrifa). |
position, rotation, scale, text, anchor |
Project Structure
The engine is organized into the following structure:
examples/: Comprehensive demonstration scripts.src/assets/: Resource management (fonts, images, audio, palettes).src/core/: Pure logic layer (animations, easings, timeline, scene).src/elements/: High-level node hierarchy (shapes, media, containers).src/lib.rs: Library entry point and unified prelude.src/project.rs: Core Project configuration struct.src/runtime/: Side-effect-heavy runners (windowing, export, renderer).
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(circle.clone());
project.scene.add(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 24 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 gradient_demo --features math
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 physics_demo --features physics
cargo run --example polygon
cargo run --example shapes
| Preview |
 |
cargo run --example signals
Map SVG sourced from vemaps.com.
cargo run --example world_map --features image,svg
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.
- rapier.rs for the incredible 2D physics engine powering our physics simulation in the
physics_demo example (rapier2d).
- shiki-magic-move for the inspiration behind the token-based code transition logic.
- vemaps.com for the world map SVG used in the
world_map example.
- Alex Xu for the excellent system design diagrams in "System Design Interview: An Insider's Guide", represented in the
news_feed example.
