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

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

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.transform
            .to(Affine::translate((200.0, 400.0)), Duration::from_secs(1)),
    ]);

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

Running Examples

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

cargo run --example getting_started

https://github.com/user-attachments/assets/510d8aac-67ba-42d8-882a-b3c0ad969437

cargo run --example shapes

cargo run --example polygon

https://github.com/user-attachments/assets/efc1e214-4297-47a2-b6e4-1eae0840b0c9

cargo run --example math_code

https://github.com/user-attachments/assets/967e0b47-a8de-4ab7-9b21-8758a2c7f508

https://github.com/user-attachments/assets/7b1fa63a-8500-41e9-a611-0a4ca0a90967

cargo run --example images

https://github.com/user-attachments/assets/25248e66-ccc7-4422-9f2f-7b9ef361d8d9

cargo run --example advanced_flow

https://github.com/user-attachments/assets/d283b03a-ae50-4011-9fab-77ced70a2632

cargo run --example easing_scope

https://github.com/user-attachments/assets/f875086e-d927-42a4-9f21-e57afbdaaaa4

cargo run --example math_animation

https://github.com/user-attachments/assets/f3d8e774-31f4-4e96-b7b7-9e6bda0ec16f

cargo run --example color_interpolation

https://github.com/user-attachments/assets/cd002797-84ec-4bcb-af1f-0ab6e7c20433

cargo run --example code_animation

https://github.com/user-attachments/assets/96135e70-b5d5-471f-9107-cc70f2b416fa

cargo run --example code_advanced

https://github.com/user-attachments/assets/23ad4662-e499-42f0-8468-3e1666e33d84

cargo run --example group_animation

https://github.com/user-attachments/assets/75f078ba-51c2-4d26-8993-25e6b77372a9

cargo run --example export

https://github.com/user-attachments/assets/c01897a9-e744-43af-bfee-045f44549ba9

cargo run --example audio_demo --features audio

https://github.com/user-attachments/assets/02670f39-8499-4202-8b22-c160d35f9031

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.