Motion Canvas in Rust

Motion Canvas Banner

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 and images)
cargo add motion-canvas-rs --features math,image

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`
`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 to video.
Clean API: Streamlined prelude for high-speed prototyping.
Node Primitives: Built-in support for Circles, Rects, Polygons, Lines, and Groups.

Supported Nodes

Node	Description	Features
`Circle`	Basic circle primitive.	`radius`, `color`, `transform`
`Rect`	Rectangle with optional corner radius.	`size`, `radius`, `color`
`Polygon`	Regular and custom polygon shapes.	`points`, `fill`, `stroke`
`Line`	Simple line between two points.	`start`, `end`, `width`
`PathNode`	Complex path sampling and animation.	`arc-length`, `sample`
`TextNode`	High-quality text rendering (skrifa).	`text`, `font_size`, `family`
`MathNode`	Typst-powered mathematical formulas.	`LaTeX`, `smooth-transitions`
`CodeNode`	Syntax-highlighted code with transitions.	`syntect`, `magic-move`
`ImageNode`	Bitmap and SVG image display.	`png`, `jpeg`, `svg`
`GroupNode`	Hierarchical grouping of any nodes.	`children`, `inherited-opacity`

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));

    // 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, 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.timeline.add(all![
        circle.radius.to(100.0, Duration::from_secs(1)),
        text.transform
            .to(Affine::translate((400.0, 500.0)), Duration::from_secs(1)),
    ]);

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