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, 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() {
    // 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(400.0, 150.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(400.0, 400.0), Duration::from_secs(1)),
    ]);

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

Running Examples

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

cargo run --example advanced_flow --features=full

https://github.com/user-attachments/assets/66b01caf-103c-4ef6-bc5f-893a654ebed9

cargo run --example anchors

https://github.com/user-attachments/assets/1ef59b41-e1d9-4c18-96ec-eb5c3bc61cfb

cargo run --example audio_demo --features audio

https://github.com/user-attachments/assets/f280e6e7-b718-44bc-bf90-f0d7acec507e

cargo run --example code_advanced --features code

https://github.com/user-attachments/assets/331ce753-ced8-4a9b-aec2-c01b52f8194c

cargo run --example code_animation --features code

https://github.com/user-attachments/assets/15698738-738a-4aad-bee7-73dfcb64a88c

cargo run --example color_interpolation

https://github.com/user-attachments/assets/a73a9995-ad63-4aca-b797-7f13f160f923

cargo run --example easing_scope

https://github.com/user-attachments/assets/0efc6e66-94b9-4392-958d-b2e077fe9ce5

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/9cf41b9e-f17b-407e-9817-8423e787e844

cargo run --example getting_started

https://github.com/user-attachments/assets/6bfaa089-7cbe-4b5b-936b-4d8e6d537e25

cargo run --example group_animation

https://github.com/user-attachments/assets/bd3e429a-9f8b-4126-adba-f65435d3944e

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

https://github.com/user-attachments/assets/a46363a9-f681-4cc3-89c1-10506e59518d

cargo run --example math_animation --features math

https://github.com/user-attachments/assets/b64f00db-0950-45cf-834d-1f0e74845cab

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

https://github.com/user-attachments/assets/0eec990c-66a8-40f6-b816-15e2636c6fd0

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

https://github.com/user-attachments/assets/933f4cca-f3f2-4a0e-bc2d-f39fa5b1fc46

cargo run --example polygon

https://github.com/user-attachments/assets/262fbc60-ab83-4b21-85d5-ebbfb77fe22c

cargo run --example shapes

cargo run --example signals

https://github.com/user-attachments/assets/5a6fdd0f-4da2-418c-8615-b30e50e86b14

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.