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.

Installation

Add the library to your Cargo.toml. To enable all features (math, code blocks, images, export), use the full flag:

# Enable everything
cargo add motion-canvas-rs --features full

# Or pick only what you need (e.g., just math, images, and audio)
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
Circle	Basic circle primitive.	position, rotation, scale, radius
CodeNode	Syntax-highlighted code with transitions.	position, rotation, scale, code
GroupNode	Hierarchical grouping of any nodes.	position, rotation, scale, children
ImageNode	Bitmap and SVG image display.	position, rotation, scale, size
Line	Simple line between two points.	position, rotation, scale, start, end
MathNode	Typst-powered mathematical formulas.	position, rotation, scale, equation
PathNode	Complex path sampling and animation.	position, rotation, scale, arc-length
Polygon	Regular and custom polygon shapes.	position, rotation, scale, points
Rect	Rectangle with optional corner radius.	position, rotation, scale, size, radius
TextNode	High-quality text rendering (skrifa).	position, rotation, scale, text

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() {
    // Project::default() uses default values (800x600, 60fps)
    let mut project = Project::default()
        .with_title("Quick Start")
        .with_background(Color::rgb8(0x1a, 0x1a, 0x1a))
        .close_on_finish();

    // Nodes support a builder pattern and Default traits
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(100.0)
        .with_color(Color::RED);

    let text = TextNode::default()
        .with_position(Vec2::new(200.0, 300.0))
        .with_text("Hello Motion Canvas!")
        .with_font_size(48.0)
        .with_color(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(200.0, 400.0), Duration::from_secs(1)),
    ]);

    project.show().expect("Failed to render");
}

Running Examples

The project includes 16 examples that can be found in the examples directory.

cargo run --example advanced_flow --features=full

https://github.com/user-attachments/assets/0e89eafa-7075-4381-b676-7eb25f45d127

cargo run --example audio_demo --features audio

https://github.com/user-attachments/assets/022ef076-452a-47b9-9d5e-2d2edf555397

cargo run --example code_advanced --features code

https://github.com/user-attachments/assets/960fbfd0-ddc9-49d9-bcdd-7b29ca4ffe93

cargo run --example code_animation --features code

https://github.com/user-attachments/assets/0579e41a-9cf0-42ce-9dba-d9c087be53d9

cargo run --example color_interpolation

https://github.com/user-attachments/assets/366308f8-2903-48dc-8609-79a661bba712

cargo run --example easing_scope

https://github.com/user-attachments/assets/9b25225e-72d8-4c0e-9c62-6acd58d1e99d

cargo run --example explainer --release --features full

https://www.youtube.com/watch?v=v4W1Y_TrWew

cargo run --example export --features export

https://github.com/user-attachments/assets/002e57f7-8d62-4dec-aea6-9107030352be

cargo run --example getting_started

https://github.com/user-attachments/assets/e36ae34c-a45c-4e99-8aec-f37a2c289639

cargo run --example group_animation

https://github.com/user-attachments/assets/2041e546-5af2-4ffd-9f73-2878ba87bd24

cargo run --example images --features image,svg

https://github.com/user-attachments/assets/467d48cf-f358-48cb-b07f-bfaaf8cd5f36

cargo run --example math_animation --features math

https://github.com/user-attachments/assets/ef4e3573-5518-42bf-8359-3aed2cbcca59

cargo run --example math_code --features math,code

https://github.com/user-attachments/assets/f51268ee-87cf-4f6d-b261-a4aa1f2d4e07

cargo run --example polygon

https://github.com/user-attachments/assets/0dead3d2-60d4-41f9-86d1-b5eafcc70c4b

cargo run --example shapes

https://github.com/user-attachments/assets/132f310e-cbbb-4a11-8525-0c87a7017fbe

cargo run --example signals

https://github.com/user-attachments/assets/ec9568e3-5b66-42a2-85b2-70c59176b17d

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.