Skip to main content

Crate motion_canvas_rs

Crate motion_canvas_rs 

Source
Expand description

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

§Features

FeatureDescriptionEnables
mathTypst-powered LaTeX math rendering.MathNode
codeSyntax-highlighted code blocks via Syntect.CodeNode
imageBitmap (PNG, JPEG) and Vector (SVG) support.ImageNode
audioIndependent audio timeline and MP3 playback.play!, AudioNode
exportHeadless frame rendering and video generation.project.export()
fullMeta-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

NodeDescriptionTransform Properties
AudioNodeIndependent audio clip playback.volume, crop
CameraNodeViewport transformation (pan, zoom, rotate).position, rotation, zoom, centered
CircleBasic circle primitive.position, rotation, scale, radius, anchor
CodeNodeSyntax-highlighted code with transitions.position, rotation, scale, code, anchor
GroupNodeHierarchical grouping of any nodes.position, rotation, scale, children, anchor
ImageNodeBitmap and SVG image display.position, rotation, scale, size, anchor
LineSimple line between two points.position, rotation, scale, start, end, anchor
MathNodeTypst-powered mathematical formulas.position, rotation, scale, equation, anchor
PathNodeComplex path sampling and animation.position, rotation, scale, arc-length, anchor
PolygonRegular and custom polygon shapes.position, rotation, scale, points, anchor
RectRectangle with optional corner radius.position, rotation, scale, size, radius, anchor
TextNodeHigh-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_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(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 21 examples that can be found in the examples directory.

Advanced Flow - Complex staggered and sequential animations. 
cargo run --example advanced_flow --features=full
Anchors - Reactive transformation origins for precise positioning. 
cargo run --example anchors
Preview
Anchors
Anchors Video
Audio Demo - Independent audio and video timelines with cropping. 
cargo run --example audio_demo --features audio
Camera Control - Viewport-level panning, zooming, and rotation. 
cargo run --example camera_demo
Code Advanced - Fine-grained selection and content manipulation. 
cargo run --example code_advanced --features code
Code Animation - "Magic Move" token-based code transitions. 
cargo run --example code_animation --features code
Color Interpolation - Smooth transitions between color spaces. 
cargo run --example color_interpolation
Easing Scope - 100% parity easing library visualizer. 
cargo run --example easing_scope
Explainer - Showcasing the library and some of its features. 
cargo run --example explainer --release --features full
Export - Video export with color and font-size animations. 
cargo run --example export --features export
Preview
Export
Export Video
Getting Started - Basic node creation and animation. 
cargo run --example getting_started
Grid - Procedural grid 
cargo run --example grid
Preview
Grid
Grid Video
Group Animation - Hierarchical transformations and inherited opacity. 
cargo run --example group_animation
Images - Bitmap image support and transformations. 
cargo run --example images --features image,svg
Preview
Images
Images Video
Math Animation - Advanced mathematical transitions. 
cargo run --example math_animation --features math
Math & Code - Typst LaTeX and Syntax Highlighting. 
cargo run --example math_code --features math,code
Nested Cameras - Hierarchical viewport control and coordinate shifting. 
cargo run --example nested_cameras
News Feed - A simple architectural visualization of a news feed system.

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
Polygon - Regular and custom polygon primitives. 
cargo run --example polygon
Preview
Polygon
Polygon Video
Shapes - Circle, Rect, and Line primitives. 
cargo run --example shapes
Preview
Shapes
Signals - Reactive signal linking and independent property animation. 
cargo run --example signals
Preview
Signals
Signals Video

§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.

Re-exports§

pub use engine::project::Project;
pub use engine::util::font_manager::FontManager;

Modules§

easings
Easing functions (cubic_in, elastic_out, etc.)
engine
flows
Animation flow controls and macros (all!, chain!, wait, etc.)
nodes
Individual node types (Circle, Rect, TextNode, etc.)
prelude
Common types for a quick start
render

Macros§

all
Run animations in parallel.
any
Run animations in race.
audio_wait
Wait on the audio timeline.
chain
Run animations sequentially.
delay
Delay an animation.
loop_anim
Loop an animation factory.
play
Play an audio node.
sequence
Create a sequence with staggered start times.
with_easing
Run animations in parallel with a shared easing override.

Structs§

Vec2
Common mathematical types A 2-dimensional vector.

Type Aliases§

Result
Custom Result type for the library