Struct Project 

pub struct Project {

    pub width: u32,
    pub height: u32,
    pub fps: u32,
    pub title: String,
    pub scene: BaseScene,
    pub output_path: PathBuf,
    pub use_cache: bool,
    pub use_ffmpeg: bool,
    pub use_gpu: bool,
    pub background_color: Color,
    pub close_on_finish: bool,
    pub current_time: Duration,
    pub paused: bool,
    pub speed: f32,
    pub timeline: Timeline,
    pub cache_write_interval: u32,
}

The central configuration and state for a motion canvas animation.

Project stores all metadata about the animation, including dimensions, frame rate, and export settings. It also owns the BaseScene which contains the actual animation nodes.

Fields

width: u32

Target width of the animation.

height: u32

Target height of the animation.

fps: u32

Frames per second.

title: String

Human-readable title of the project.

scene: BaseScene

The root scene orchestration node.

output_path: PathBuf

Directory where exported frames and videos will be saved.

use_cache: bool

Whether to use frame-level caching during export.

use_ffmpeg: bool

Whether to automatically attempt FFmpeg encoding after export.

use_gpu: bool

Whether to use GPU acceleration for rendering.

background_color: Color

Background clear color for the animation.

close_on_finish: bool

If true, the playback window will close automatically when the animation ends.

current_time: Duration

The current playback/export time.

paused: bool

Playback state (paused or playing).

speed: f32

Playback speed multiplier.

timeline: Timeline

The master playback timeline state.

cache_write_interval: u32

The number of frames between incremental cache manifest writes to disk.

Implementations

impl Project

pub fn new(width: u32, height: u32) -> Self

Creates a new project with the given dimensions and default settings.

Examples found in repository

examples/world_map.rs (line 433)

fn main() {
    let w = 800u32;
    let h = 600u32;

    let mut project = Project::new(w, h)
        .with_fps(60)
        .with_title("World Map")
        .with_background(SKY_BG)
        .close_on_finish();

    // ── Map (rendered at native SVG size for crispness) ──
    let map = SvgNode::default()
        .with_position(Vec2::new(MAP_CX, MAP_CY))
        .with_path("./examples/images/world.svg")
        .with_size(Vec2::new(MAP_W, MAP_H))
        .with_opacity(0.0);

    // ── Clouds — 16 total from 3 source PNGs with variants ──
    let mut cloud_nodes: Vec<ImageNode> = Vec::new();
    for def in &CLOUDS {
        let mut node = ImageNode::default()
            .with_position(Vec2::new(def.x, def.y))
            .with_path(&format!("./examples/images/{}", def.img))
            .with_size(Vec2::new(def.w, def.h))
            .with_opacity(def.opacity);
        if def.flip_x {
            node = node.with_scale_xy(Vec2::new(-1.0, 1.0));
        }
        cloud_nodes.push(node);
    }

    // ── Camera ──
    let camera = CameraNode::default()
        .with_size(Vec2::new(w as f32, h as f32))
        .with_position(Vec2::new(MAP_CX, MAP_CY))
        .with_zoom(1.0)
        .with_centered(true);

    // ── Plane ──
    let plane = SvgNode::default()
        .with_position(Vec2::new(LANDMARKS[0].x, LANDMARKS[0].y))
        .with_path("./examples/images/plane.svg")
        .with_size(Vec2::new(12.0, 12.0))
        .with_anchor(Vec2::new(2.0, -2.65))
        .with_scale(0.0)
        .with_opacity(0.0);

    // ── Landmark pins + name labels ──
    let mut pins: Vec<Circle> = Vec::new();
    let mut name_labels: Vec<TextNode> = Vec::new();
    for lm in &LANDMARKS {
        let pin = Circle::default()
            .with_position(Vec2::new(lm.x, lm.y))
            .with_radius(0.0)
            .with_fill(Palette::RED)
            .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 180), 2.0)
            .with_opacity(0.0);
        pins.push(pin);

        // Country name below pin
        let name_lbl = TextNode::default()
            .with_position(Vec2::new(lm.x, lm.y + 12.0))
            .with_text(lm.name)
            .with_font_size(10.0)
            .with_fill(Palette::DARK_GRAY)
            .with_opacity(0.0);
        name_labels.push(name_lbl);
    }

    // ── Route lines (straight between consecutive landmarks) ──
    let mut route_lines: Vec<Line> = Vec::new();
    for i in 0..LANDMARKS.len() - 1 {
        let from = &LANDMARKS[i];
        let line = Line::default()
            .with_start(Vec2::new(from.x, from.y))
            .with_end(Vec2::new(from.x, from.y))
            .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 180), 2.0)
            .with_opacity(0.0);
        route_lines.push(line);
    }

    // ── Build Scene Tree ──
    // Order: map → route lines → plane → pins → labels (pins on top of lines)
    let mut camera_children: Vec<Box<dyn Node>> = Vec::new();
    camera_children.push(Box::new(map.clone()));
    // Route lines first (behind pins)
    for rl in &route_lines {
        camera_children.push(Box::new(rl.clone()));
    }
    // Plane between routes and pins
    camera_children.push(Box::new(plane.clone()));
    // Pins on top of route lines
    for pin in &pins {
        camera_children.push(Box::new(pin.clone()));
    }

    for nl in &name_labels {
        camera_children.push(Box::new(nl.clone()));
    }

    // Clouds on top of everything (so they cover the map initially)
    for cn in &cloud_nodes {
        camera_children.push(Box::new(cn.clone()));
    }

    let camera = camera.with_nodes(camera_children);
    project.scene.add(&camera);

    // ═══════════════════════════════════════════════════
    //  ANIMATION TIMELINE
    // ═══════════════════════════════════════════════════

    // Phase 1: Intro — clouds everywhere, then zoom in / scatter clouds / reveal map
    let mut phase1_anims: Vec<AnyAnimation> = Vec::new();

    // Camera zoom
    phase1_anims.push(
        camera
            .zoom
            .to(2.25, Duration::from_secs(3))
            .ease(easings::cubic_in_out)
            .into(),
    );
    // Map fade in
    phase1_anims.push(
        map.opacity
            .to(1.0, Duration::from_secs(2))
            .ease(easings::cubic_out)
            .into(),
    );

    // Scatter all clouds
    for (i, cn) in cloud_nodes.iter().enumerate() {
        let def = &CLOUDS[i];
        phase1_anims.push(
            cn.position
                .to(Vec2::new(def.exit_x, def.exit_y), Duration::from_secs(3))
                .ease(easings::cubic_in)
                .into(),
        );
        phase1_anims.push(
            cn.opacity
                .to(0.0, Duration::from_secs(2))
                .ease(easings::cubic_in)
                .into(),
        );
    }

    let phase1_intro: AnyAnimation = chain![
        // Everything happens at once: zoom, clouds scatter, map reveals, title appears
        all(phase1_anims),
        wait(Duration::from_millis(500)),
    ];

    // Phase 2: Pan camera to first landmark and show plane
    let first = &LANDMARKS[0];
    let phase2_start: AnyAnimation = chain![
        camera
            .position
            .to(Vec2::new(first.x, first.y), Duration::from_secs(2))
            .ease(easings::cubic_in_out),
        camera
            .zoom
            .to(5.0, Duration::from_secs(1))
            .ease(easings::cubic_out),
        // Show first pin + labels
        all![
            pins[0].opacity.to(1.0, Duration::from_millis(400)),
            pins[0]
                .radius
                .to(3.0, Duration::from_millis(600))
                .ease(easings::elastic_out),
            name_labels[0].opacity.to(1.0, Duration::from_millis(400)),
        ],
        // Show plane
        plane.opacity.to(1.0, Duration::from_millis(300)),
        wait(Duration::from_millis(800)),
    ];

    // Phase 3: Tour through each country (scale in -> move -> scale out -> show landmark)
    let mut tour_legs: Vec<AnyAnimation> = Vec::new();
    for i in 0..LANDMARKS.len() - 1 {
        let from = &LANDMARKS[i];
        let to = &LANDMARKS[i + 1];
        let dur = tour_duration(i);

        // Compute heading angle from straight line
        let dx = to.x - from.x;
        let dy = to.y - from.y;
        let angle = dy.atan2(dx) + (std::f32::consts::PI);

        let leg: AnyAnimation = chain![
            // 1. Scale plane in at the start of the leg
            all![
                plane
                    .rotation
                    .to(angle, Duration::from_millis(200))
                    .ease(easings::cubic_out),
                plane
                    .scale
                    .to(Vec2::splat(1.0), Duration::from_millis(300))
                    .ease(easings::cubic_out),
                // Hide current landmark name as we depart
                name_labels[i]
                    .opacity
                    .to(0.0, Duration::from_millis(200))
                    .ease(easings::cubic_out),
            ],
            // 2. Move plane to destination
            all![
                // Show route line
                route_lines[i].opacity.to(1.0, Duration::from_millis(100)),
                // Draw line to destination
                route_lines[i]
                    .end
                    .to(Vec2::new(to.x, to.y), dur)
                    .ease(easings::cubic_in_out),
                all![
                    // Move plane to destination
                    plane
                        .position
                        .to(Vec2::new(to.x, to.y), dur)
                        .ease(easings::cubic_in_out),
                    // Camera follows to destination
                    camera
                        .position
                        .to(Vec2::new(to.x, to.y), dur.add(Duration::from_millis(500)))
                        .ease(easings::cubic_in_out),
                ]
            ],
            // 3. Scale plane out at the destination
            plane
                .scale
                .to(Vec2::splat(0.0), Duration::from_millis(300))
                .ease(easings::cubic_in),
            // 4. Reveal destination pin + name
            all![
                pins[i + 1].opacity.to(1.0, Duration::from_millis(300)),
                pins[i + 1]
                    .radius
                    .to(3.0, Duration::from_millis(500))
                    .ease(easings::elastic_out),
                name_labels[i + 1]
                    .opacity
                    .to(1.0, Duration::from_millis(300)),
            ],
            // 5. Wait a bit for viewer to read
            wait(Duration::from_millis(600)),
            // 6. Name disappears before plane scales in for next leg
            name_labels[i + 1]
                .opacity
                .to(0.0, Duration::from_millis(200))
                .ease(easings::cubic_out),
        ];
        tour_legs.push(leg);
    }

    let phase3_tour = chain(tour_legs);

    // Phase 4: Zoom out to show full map
    let phase4_finale: AnyAnimation = chain![
        // Hide the last landmark's name
        name_labels[LANDMARKS.len() - 1]
            .opacity
            .to(0.0, Duration::from_millis(200)),
        wait(Duration::from_millis(300)),
        all![
            camera
                .position
                .to(Vec2::new(MAP_CX, MAP_CY), Duration::from_secs(3))
                .ease(easings::cubic_in_out),
            camera
                .zoom
                .to(1.0, Duration::from_secs(3))
                .ease(easings::sine_in_out),
        ],
        // Pulse all pins (dynamic loop)
        {
            let mut pulse_anims: Vec<AnyAnimation> = Vec::new();
            for pin in &pins {
                pulse_anims.push(
                    pin.radius
                        .to(10.0, Duration::from_millis(300))
                        .ease(easings::elastic_out)
                        .into(),
                );
            }
            sequence(Duration::from_millis(60), pulse_anims)
        },
        plane.opacity.to(0.0, Duration::from_millis(500)),
        wait(Duration::from_secs(3)),
    ];

    project.scene.video_timeline.add(chain![
        phase1_intro,
        phase2_start,
        phase3_tour,
        phase4_finale,
    ]);

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

impl Project

pub fn with_fps(self, fps: u32) -> Self

Sets the target frames per second.

Examples found in repository

examples/math_animation.rs (line 7)

fn main() {
    // 1. Initialize Project
    let mut project = Project::default()
        .with_fps(60)
        .with_dimensions(500, 500)
        .with_title("Math Animation")
        .close_on_finish();

    // 2. Create MathNode (Typst syntax)
    let tex = MathNode::default()
        .with_position(Vec2::new(250.0, 250.0))
        .with_equation("y = a x^2")
        .with_font_size(48.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2));
    project.scene.add(&tex);

    // 3. Define Animation Sequence
    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                tex.tex("y = a x^2 + b x", Duration::from_secs(1)),
                tex.tex("e^(i pi) + 1 = 0", Duration::from_secs(1)),
                tex.tex("y = a x^2", Duration::from_secs(1)),
            ]
        },
        None,
    ));

    // 4. Run interactive preview
    project.show().expect("Failed to render");
}

examples/color_interpolation.rs (line 7)

fn main() {
    let mut project = Project::default()
        .with_dimensions(300, 300)
        .with_fps(60)
        .with_title("Color Interpolation")
        .with_cache(true)
        .close_on_finish();

    let circle = Circle::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_radius(50.0)
        .with_fill(Color::RED); // Red

    project.scene.add(&circle);

    let duration = Duration::from_secs(1);

    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                circle.fill_paint.to(Paint::Solid(Color::YELLOW), duration),
                circle.fill_paint.to(Paint::Solid(Color::GREEN), duration),
                circle.fill_paint.to(Paint::Solid(Color::BLUE), duration),
                circle.fill_paint.to(Paint::Solid(Color::RED), duration),
            ]
        },
        None,
    ));

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

examples/getting_started.rs (line 7)

fn main() {
    // 1. Initialize the Project
    let mut project = Project::default()
        .with_fps(60)
        .with_cache(true)
        .with_title("Getting Started")
        .close_on_finish();

    // 2. Define Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 450.0))
        .with_text("Hello Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White-ish

    // 3. Add Nodes to the Scene
    project.scene.add(&circle);
    project.scene.add(&text);

    // 4. Add Animations to the Timeline
    project.scene.video_timeline.add(all![
        circle.radius.to(100.0, Duration::from_secs(1)),
        text.position
            .to(Vec2::new(400.0, 500.0), Duration::from_secs(1)),
    ]);

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

examples/export.rs (line 7)

fn main() {
    // 1. Initialize for Export
    let mut project = Project::default()
        .with_fps(30)
        .with_ffmpeg(true)
        .with_title("Export")
        .with_output_path("output")
        .close_on_finish();

    // 2. Setup Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)); // Blue

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 50.0))
        .with_text("Export Demo")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White

    project.scene.add(&circle);
    project.scene.add(&text);

    // 3. Define Animations (Color and Font Size)
    project.scene.video_timeline.add(all![
        // Circle color and size
        circle
            .fill_paint
            .to(
                Paint::Solid(Color::rgb8(0xf2, 0xf2, 0xf2)),
                Duration::from_secs(2)
            )
            .ease(easings::quad_in_out),
        circle
            .radius
            .to(150.0, Duration::from_secs(2))
            .ease(easings::elastic_out),
        // Text font size
        text.font_size
            .to(50.0, Duration::from_secs(2))
            .ease(easings::cubic_out),
    ]);

    // 4. Export (Renders frames and combines them into out.mkv)
    println!("Starting export to {}...", project.output_path.display());
    project.export().expect("Failed to export");
}

examples/math_code.rs (line 6)

fn main() {
    let mut project = Project::default()
        .with_fps(120)
        .with_title("Math Code")
        .close_on_finish();

    let triangle = Polygon::default()
        .with_position(Vec2::ZERO)
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_points(vec![
            Vec2::new(0.0, 0.0),
            Vec2::new(0.0, 200.0),
            Vec2::new(200.0, 200.0),
        ])
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf));

    let lines = vec![
        Line::default()
            .with_start(Vec2::new(0.0, 0.0))
            .with_end(Vec2::new(0.0, 200.0))
            .with_stroke(Color::WHITE, 10.0),
        Line::default()
            .with_start(Vec2::new(0.0, 0.0))
            .with_end(Vec2::new(200.0, 200.0))
            .with_stroke(Color::WHITE, 10.0),
        Line::default()
            .with_start(Vec2::new(0.0, 200.0))
            .with_end(Vec2::new(200.0, 200.0))
            .with_stroke(Color::WHITE, 10.0),
    ];

    let triangle_line_group = GroupNode::default()
        .with_nodes(vec![
            triangle.clone_node(),
            lines[0].clone_node(),
            lines[1].clone_node(),
            lines[2].clone_node(),
        ])
        .with_position(Vec2::new(400.0, 200.0))
        .with_scale(0.0);

    let pytagorean_theorem = MathNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_equation("a^2 + b^2 = c^2")
        .with_font_size(10.0)
        .with_fill(Color::GRAY)
        .with_opacity(0.0);

    let text_a = TextNode::default()
        .with_text("a")
        .with_fill(Color::GRAY)
        .with_opacity(0.0)
        .with_scale(0.7)
        .with_position(Vec2::new(370.0, 300.0));

    let text_b = TextNode::default()
        .with_text("b")
        .with_fill(Color::GRAY)
        .with_opacity(0.0)
        .with_scale(0.7)
        .with_position(Vec2::new(500.0, 430.0));

    let text_c = TextNode::default()
        .with_text("c")
        .with_fill(Color::GRAY)
        .with_opacity(0.0)
        .with_scale(0.7)
        .with_position(Vec2::new(510.0, 260.0));

    project.scene.add(&triangle_line_group);
    project.scene.add(&pytagorean_theorem);
    project.scene.add(&text_a);
    project.scene.add(&text_b);
    project.scene.add(&text_c);

    project.scene.video_timeline.add(all![
        all![triangle_line_group
            .scale
            .to(Vec2::ONE, Duration::from_secs(1)),],
        all![
            pytagorean_theorem.opacity.to(1.0, Duration::from_secs(1)),
            pytagorean_theorem
                .font_size
                .to(32.0, Duration::from_secs(1)),
        ],
        sequence![
            Duration::from_millis(300),
            text_a.scale.to(Vec2::new(1.0, 1.0), Duration::from_secs(1)),
            text_b.scale.to(Vec2::new(1.0, 1.0), Duration::from_secs(1)),
            text_c.scale.to(Vec2::new(1.0, 1.0), Duration::from_secs(1)),
            text_a.opacity.to(1.0, Duration::from_secs(1)),
            text_b.opacity.to(1.0, Duration::from_secs(1)),
            text_c.opacity.to(1.0, Duration::from_secs(1))
        ]
    ]);

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

examples/advanced_flow.rs (line 7)

fn main() {
    // 1. Initialize Project with full API coverage
    let mut project = Project::default()
        .with_fps(120)
        .with_gpu(true)
        .with_cache(true)
        .with_ffmpeg(true)
        .with_output_path("output")
        .with_title("Advanced Flow")
        .close_on_finish();

    // 2. Setup Nodes
    let mut path = BezPath::new();
    path.move_to((100.0, 300.0));
    path.curve_to((250.0, 100.0), (550.0, 500.0), (700.0, 300.0));
    let path_node = PathNode::default()
        .with_path(path)
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 2.0);
    let follower = Circle::default()
        .with_position(Vec2::new(100.0, 300.0))
        .with_radius(20.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    // Showcase: Rect and Line
    let background_rect = Rect::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_size(Vec2::new(760.0, 560.0))
        .with_fill(Color::rgba8(0x33, 0x33, 0x33, 150))
        .with_radius(20.0);

    let divider_line = Line::default()
        .with_start(Vec2::new(0.0, 300.0))
        .with_end(Vec2::new(0.0, 300.0))
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 1.0);
    let title_text = TextNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_text("Motion Canvas in Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_font("JetBrains Mono");

    let code_block = CodeNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(50.0, 415.0))
        .with_language("rust")
        .with_opacity(0.0);

    let math_eq = MathNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_equation("f(x) = sin(x)")
        .with_font_size(30.0)
        .with_fill(Color::rgb8(0xe6, 0xa7, 0x00)); // Yellow

    let logo = ImageNode::default()
        .with_position(Vec2::new(650.0, 150.0))
        .with_path("./examples/images/motion-canvas-logo.png")
        .with_size(Vec2::new(150.0, 150.0));

    project.scene.video_timeline.add(all![
        // Show code
        chain![
            code_block.opacity.to(1.0, Duration::from_secs(1)),
            code_block.append("fn main() {\n", Duration::from_secs(1)),
            code_block.append(
                "    let mut engine = MotionCanvas::new();\n",
                Duration::from_secs(1)
            ),
            code_block.append("    engine.render();\n", Duration::from_secs(1)),
            code_block.append("}", Duration::from_secs(1)),
            // Staggered appearance of nodes
            sequence![
                Duration::from_millis(200),
                divider_line
                    .end
                    .to(Vec2::new(800.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_out),
                follower
                    .radius
                    .to(30.0, Duration::from_millis(500))
                    .ease(easings::elastic_out),
            ],
            // The path follow combined with a "race" logic
            any![
                follower
                    .position
                    .follow(&path_node, Duration::from_secs(3))
                    .ease(easings::cubic_in_out),
                // Race: if this 'wait' finishes first, the follow is done
                wait(Duration::from_secs(4)),
            ],
            // Final flourishes using different easings
            all![
                follower
                    .radius
                    .to(10.0, Duration::from_secs(1))
                    .ease(easings::quad_out),
                divider_line
                    .start
                    .to(Vec2::new(400.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_in),
            ]
        ]
    ]);

    // 4. Build Scene
    project.scene.add(&background_rect);
    project.scene.add(&divider_line);
    project.scene.add(&path_node);
    project.scene.add(&follower);
    project.scene.add(&title_text);
    project.scene.add(&code_block);
    project.scene.add(&math_eq);
    project.scene.add(&logo);

    // 5. Run (Choose show() for interactive or export() for PNGs)
    project.show().expect("Failed to render");
    // project.export().expect("Failed to export");
}

Additional examples can be found in:

• examples/mask_demo.rs
• examples/world_map.rs
• examples/news_feed.rs
• examples/explainer.rs

pub fn with_dimensions(self, width: u32, height: u32) -> Self

Sets the width and height of the animation.

Examples found in repository

examples/math_animation.rs (line 8)

fn main() {
    // 1. Initialize Project
    let mut project = Project::default()
        .with_fps(60)
        .with_dimensions(500, 500)
        .with_title("Math Animation")
        .close_on_finish();

    // 2. Create MathNode (Typst syntax)
    let tex = MathNode::default()
        .with_position(Vec2::new(250.0, 250.0))
        .with_equation("y = a x^2")
        .with_font_size(48.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2));
    project.scene.add(&tex);

    // 3. Define Animation Sequence
    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                tex.tex("y = a x^2 + b x", Duration::from_secs(1)),
                tex.tex("e^(i pi) + 1 = 0", Duration::from_secs(1)),
                tex.tex("y = a x^2", Duration::from_secs(1)),
            ]
        },
        None,
    ));

    // 4. Run interactive preview
    project.show().expect("Failed to render");
}

examples/color_interpolation.rs (line 6)

fn main() {
    let mut project = Project::default()
        .with_dimensions(300, 300)
        .with_fps(60)
        .with_title("Color Interpolation")
        .with_cache(true)
        .close_on_finish();

    let circle = Circle::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_radius(50.0)
        .with_fill(Color::RED); // Red

    project.scene.add(&circle);

    let duration = Duration::from_secs(1);

    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                circle.fill_paint.to(Paint::Solid(Color::YELLOW), duration),
                circle.fill_paint.to(Paint::Solid(Color::GREEN), duration),
                circle.fill_paint.to(Paint::Solid(Color::BLUE), duration),
                circle.fill_paint.to(Paint::Solid(Color::RED), duration),
            ]
        },
        None,
    ));

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

examples/audio_demo.rs (line 6)

fn main() {
    let mut project = Project::default()
        .with_dimensions(800, 450)
        .with_title("Audio Demo")
        .with_background(Color::rgb8(20, 20, 25))
        .close_on_finish();

    // Setup Video Timeline
    let rect = Rect::new(Vec2::new(100.0, 100.0), Vec2::new(200.0, 200.0), Color::RED)
        .with_anchor(Vec2::new(-1.0, -1.0));

    project.scene.add(&rect);

    project.scene.video_timeline.add(chain!(
        all![
            rect.position
                .to(Vec2::new(150.0, 150.0), Duration::from_secs(1)),
            rect.size.to(Vec2::new(200.0, 50.0), Duration::from_secs(1)),
            rect.fill_paint
                .to(Paint::Solid(Color::BLUE), Duration::from_secs(1)),
        ],
        all![
            rect.position
                .to(Vec2::new(350.0, 150.0), Duration::from_secs(1)),
            rect.fill_paint
                .to(Paint::Solid(Color::RED), Duration::from_secs(1)),
        ]
    ));

    // Setup Audio Timeline using new macros and builder
    project.scene.audio_timeline.add(chain!(
        play!(AudioNode::new("./examples/audios/combo-1.mp3").with_volume(0.5)),
        audio_wait!(0.05),
        play!(AudioNode::new("./examples/audios/combo-2.mp3").with_volume(1.0))
    ));

    println!("Project configured with separate video and audio timelines.");
    println!(
        "Video duration: {:?}",
        project.scene.video_timeline.duration()
    );
    println!(
        "Audio duration: {:?}",
        project.scene.audio_timeline.duration()
    );

    project.show().expect("Failed to run audio demo");
}

examples/images.rs (line 6)

fn main() {
    let mut project = Project::default()
        .with_dimensions(600, 600)
        .with_title("Images")
        .close_on_finish();

    // Using the sample logo path from the project
    let png = ImageNode::default()
        .with_position(Vec2::new(450.0, 450.0))
        .with_path("./examples/images/motion-canvas-logo.png")
        .with_size(Vec2::new(200.0, 200.0));

    let svg = SvgNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_path("./examples/images/motion-canvas-rs.svg")
        .with_size(Vec2::new(200.0, 200.0));

    project.scene.add(&png);
    project.scene.add(&svg);

    const MOVE_DUR: Duration = Duration::from_secs(2);

    project.scene.video_timeline.add(loop_anim(
        move || {
            with_easing(
                bounce_out,
                vec![chain![
                    all!(
                        png.position.to(Vec2::new(150.0, 450.0), MOVE_DUR),
                        svg.position.to(Vec2::new(450.0, 150.0), MOVE_DUR),
                    ),
                    all!(
                        png.position.to(Vec2::new(150.0, 150.0), MOVE_DUR),
                        svg.position.to(Vec2::new(450.0, 450.0), MOVE_DUR),
                    ),
                    all!(
                        png.position.to(Vec2::new(450.0, 150.0), MOVE_DUR),
                        svg.position.to(Vec2::new(150.0, 450.0), MOVE_DUR),
                    ),
                    all!(
                        png.position.to(Vec2::new(450.0, 450.0), MOVE_DUR),
                        svg.position.to(Vec2::new(150.0, 150.0), MOVE_DUR),
                    ),
                ]],
            )
        },
        None,
    ));

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

examples/grid.rs (line 7)

fn main() {
    let mut project = Project::default()
        .with_title("Grid")
        .with_dimensions(1280, 720)
        .close_on_finish();

    // 1. Create Grid Node
    let grid = GridNode::square(Vec2::new(640.0, 360.0), 4.0, 50.0)
        .with_stroke(Palette::DARK_GRAY, 2.0)
        .with_opacity(0.0);

    // 2. Create Text Node
    let text_node = TextNode::default()
        .with_position(Vec2::new(640.0, 100.0))
        .with_font_size(36.0)
        .with_fill(Color::WHITE)
        .with_text("Grid: 4x4 | Spacing: 50x50");

    // 3. Bind Text to Grid's rows/columns and spacing
    let cols_sig = grid.columns.clone();
    let spacing_sig = grid.spacing.clone();
    let text_link = text_node.text.bind(grid.rows.clone(), move |rows| {
        let cols = cols_sig.get();
        let spacing = spacing_sig.get();
        format!(
            "Grid: {:.0}x{:.0} | Spacing: {:.0}x{:.0}",
            cols, rows, spacing.x, spacing.y
        )
    });

    // Add to scene
    project.scene.add(&grid);
    project.scene.add(text_node);
    project.scene.add(text_link);

    project.scene.video_timeline.add(chain![
        grid.opacity
            .to(1.0, Duration::from_secs(1))
            .ease(easings::cubic_out),
        wait(Duration::from_millis(500)),
        all![
            grid.rows.to(16.0, Duration::from_secs(2)),
            grid.columns.to(16.0, Duration::from_secs(2)),
            grid.stroke_paint
                .to(Paint::Solid(Palette::BLUE), Duration::from_secs(2)),
            grid.spacing
                .to(Vec2::new(100.0, 100.0), Duration::from_secs(2)),
        ],
        wait(Duration::from_millis(500)),
        all![
            grid.rows.to(8.0, Duration::from_secs(2)),
            grid.columns.to(8.0, Duration::from_secs(2)),
            grid.stroke_paint
                .to(Paint::Solid(Palette::ORANGE), Duration::from_secs(2)),
            grid.spacing
                .to(Vec2::new(20.0, 20.0), Duration::from_secs(2)),
        ],
        wait(Duration::from_secs(1)),
        grid.opacity
            .to(0.0, Duration::from_secs(1))
            .ease(easings::cubic_out),
        wait(Duration::from_millis(500)),
    ]);

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

examples/shapes.rs (line 5)

fn main() {
    let mut project = Project::default()
        .with_dimensions(800, 300)
        .with_title("Shapes");

    // Configuration
    let y_shapes = 150.0;
    let y_labels = 50.0;
    let spacing = 180.0;
    let x_start = 130.0;

    // Circle
    let circle_text = TextNode::default()
        .with_text("Circle")
        .with_position(Vec2::new(x_start, y_labels))
        .with_anchor(Vec2::ZERO)
        .with_font_size(24.0)
        .with_fill(Color::DIM_GRAY);
    let circle = Circle::default()
        .with_position(Vec2::new(x_start, y_shapes))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38));

    // Rectangle
    let x_rect = x_start + spacing;
    let rect_text = TextNode::default()
        .with_text("Rect")
        .with_position(Vec2::new(x_rect, y_labels))
        .with_anchor(Vec2::ZERO)
        .with_font_size(24.0)
        .with_fill(Color::DIM_GRAY);
    let rect = Rect::default()
        .with_position(Vec2::new(x_rect, y_shapes))
        .with_size(Vec2::new(100.0, 100.0))
        .with_radius(8.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf));

    // Line
    let x_line = x_rect + spacing;
    let line_text = TextNode::default()
        .with_text("Line")
        .with_position(Vec2::new(x_line, y_labels))
        .with_anchor(Vec2::ZERO)
        .with_font_size(24.0)
        .with_fill(Color::DIM_GRAY);
    let line = Line::default()
        .with_position(Vec2::new(x_line, y_shapes))
        .with_start(Vec2::new(-50.0, 50.0))
        .with_end(Vec2::new(50.0, -50.0))
        .with_stroke(Color::WHITE, 4.0);

    // Polygon
    let x_poly = x_line + spacing;
    let poly_text = TextNode::default()
        .with_text("Poly")
        .with_position(Vec2::new(x_poly, y_labels))
        .with_anchor(Vec2::ZERO)
        .with_font_size(24.0)
        .with_fill(Color::DIM_GRAY);
    let poly = Polygon::regular(5, 50.0)
        .with_position(Vec2::new(x_poly, y_shapes))
        .with_fill(Color::rgb8(0xe6, 0xa7, 0x00));

    // Add all nodes to the scene
    project.scene.add(circle);
    project.scene.add(circle_text);
    project.scene.add(rect);
    project.scene.add(rect_text);
    project.scene.add(line);
    project.scene.add(line_text);
    project.scene.add(poly);
    project.scene.add(poly_text);

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

Additional examples can be found in:

• examples/code_animation.rs
• examples/easing_scope.rs
• examples/signals.rs
• examples/anchors.rs
• examples/mask_demo.rs
• examples/physics_demo.rs
• examples/news_feed.rs
• examples/gradient_demo.rs
• examples/explainer.rs

pub fn with_title(self, title: &str) -> Self

Sets the project title.

Examples found in repository

examples/math_animation.rs (line 9)

fn main() {
    // 1. Initialize Project
    let mut project = Project::default()
        .with_fps(60)
        .with_dimensions(500, 500)
        .with_title("Math Animation")
        .close_on_finish();

    // 2. Create MathNode (Typst syntax)
    let tex = MathNode::default()
        .with_position(Vec2::new(250.0, 250.0))
        .with_equation("y = a x^2")
        .with_font_size(48.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2));
    project.scene.add(&tex);

    // 3. Define Animation Sequence
    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                tex.tex("y = a x^2 + b x", Duration::from_secs(1)),
                tex.tex("e^(i pi) + 1 = 0", Duration::from_secs(1)),
                tex.tex("y = a x^2", Duration::from_secs(1)),
            ]
        },
        None,
    ));

    // 4. Run interactive preview
    project.show().expect("Failed to render");
}

examples/color_interpolation.rs (line 8)

fn main() {
    let mut project = Project::default()
        .with_dimensions(300, 300)
        .with_fps(60)
        .with_title("Color Interpolation")
        .with_cache(true)
        .close_on_finish();

    let circle = Circle::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_radius(50.0)
        .with_fill(Color::RED); // Red

    project.scene.add(&circle);

    let duration = Duration::from_secs(1);

    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                circle.fill_paint.to(Paint::Solid(Color::YELLOW), duration),
                circle.fill_paint.to(Paint::Solid(Color::GREEN), duration),
                circle.fill_paint.to(Paint::Solid(Color::BLUE), duration),
                circle.fill_paint.to(Paint::Solid(Color::RED), duration),
            ]
        },
        None,
    ));

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

examples/getting_started.rs (line 9)

fn main() {
    // 1. Initialize the Project
    let mut project = Project::default()
        .with_fps(60)
        .with_cache(true)
        .with_title("Getting Started")
        .close_on_finish();

    // 2. Define Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 450.0))
        .with_text("Hello Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White-ish

    // 3. Add Nodes to the Scene
    project.scene.add(&circle);
    project.scene.add(&text);

    // 4. Add Animations to the Timeline
    project.scene.video_timeline.add(all![
        circle.radius.to(100.0, Duration::from_secs(1)),
        text.position
            .to(Vec2::new(400.0, 500.0), Duration::from_secs(1)),
    ]);

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

examples/code_advanced.rs (line 6)

fn main() {
    let mut project = Project::default()
        .with_title("Code Advanced")
        .close_on_finish();

    let code = CodeNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_code(
            r#"fn main() {
    println!("Hello");
}"#,
        )
        .with_language("rust")
        .with_font_size(32.0)
        .with_dim_opacity(0.1);

    project.scene.add(&code);

    project.scene.video_timeline.add(sequence![
        Duration::from_secs(1),
        // 1. Select line 2 (println) - using 1-based index string
        code.select_string("2", Duration::from_millis(300)),
        // 2. Select range 1-2
        code.select_string("1-2", Duration::from_millis(300)),
        // 3. Append a comment
        code.append("\n// Done!", Duration::from_millis(300)),
        // 3. Reset selection
        code.select_lines(vec![], Duration::from_millis(300)),
        // 4. Prepend a header (Now natively lazy, no wrapper needed!)
        code.prepend("// My Script\n", Duration::from_millis(300)),
    ]);

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

examples/polygon.rs (line 5)

fn main() {
    let mut project = Project::default().with_title("Polygon").close_on_finish();

    // Create a regular pentagon
    let pentagon = Polygon::regular(5, 100.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)) // Red
        .with_position(Vec2::new(200.0, 300.0))
        .with_scale(0.0);

    // Create a custom triangle
    let triangle = Polygon::default()
        .with_position(Vec2::new(500.0, 300.0))
        .with_points(vec![
            Vec2::new(0.0, -100.0),
            Vec2::new(100.0, 100.0),
            Vec2::new(-100.0, 100.0),
        ])
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_stroke(Color::WHITE, 4.0);

    project.scene.add(&pentagon);
    project.scene.add(&triangle);

    // Animate rotation and opacity
    project.scene.video_timeline.add(all![
        chain![
            pentagon.scale.to(Vec2::ONE, Duration::from_secs(1)),
            pentagon
                .rotation
                .to(std::f32::consts::PI, Duration::from_secs(2)),
            pentagon.scale.to(-Vec2::ONE, Duration::from_secs(1)),
        ],
        chain![
            triangle.opacity.to(1.0, Duration::from_secs(1)),
            triangle
                .position
                .to(Vec2::new(500.0, 300.0), Duration::from_secs(1)),
            triangle
                .rotation
                .to(360.0_f32.to_radians(), Duration::from_secs(1))
        ],
    ]);

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

examples/export.rs (line 9)

fn main() {
    // 1. Initialize for Export
    let mut project = Project::default()
        .with_fps(30)
        .with_ffmpeg(true)
        .with_title("Export")
        .with_output_path("output")
        .close_on_finish();

    // 2. Setup Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)); // Blue

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 50.0))
        .with_text("Export Demo")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White

    project.scene.add(&circle);
    project.scene.add(&text);

    // 3. Define Animations (Color and Font Size)
    project.scene.video_timeline.add(all![
        // Circle color and size
        circle
            .fill_paint
            .to(
                Paint::Solid(Color::rgb8(0xf2, 0xf2, 0xf2)),
                Duration::from_secs(2)
            )
            .ease(easings::quad_in_out),
        circle
            .radius
            .to(150.0, Duration::from_secs(2))
            .ease(easings::elastic_out),
        // Text font size
        text.font_size
            .to(50.0, Duration::from_secs(2))
            .ease(easings::cubic_out),
    ]);

    // 4. Export (Renders frames and combines them into out.mkv)
    println!("Starting export to {}...", project.output_path.display());
    project.export().expect("Failed to export");
}

Additional examples can be found in:

• examples/audio_demo.rs
• examples/images.rs
• examples/group_animation.rs
• examples/grid.rs
• examples/shapes.rs
• examples/camera_demo.rs
• examples/code_animation.rs
• examples/nested_cameras.rs
• examples/math_code.rs
• examples/easing_scope.rs
• examples/signals.rs
• examples/blur_demo.rs
• examples/advanced_flow.rs
• examples/anchors.rs
• examples/mask_demo.rs
• examples/physics_demo.rs
• examples/world_map.rs
• examples/news_feed.rs
• examples/gradient_demo.rs
• examples/explainer.rs

pub fn with_output_path(self, path: &str) -> Self

Sets the output directory for exports.

Examples found in repository

examples/export.rs (line 10)

fn main() {
    // 1. Initialize for Export
    let mut project = Project::default()
        .with_fps(30)
        .with_ffmpeg(true)
        .with_title("Export")
        .with_output_path("output")
        .close_on_finish();

    // 2. Setup Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)); // Blue

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 50.0))
        .with_text("Export Demo")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White

    project.scene.add(&circle);
    project.scene.add(&text);

    // 3. Define Animations (Color and Font Size)
    project.scene.video_timeline.add(all![
        // Circle color and size
        circle
            .fill_paint
            .to(
                Paint::Solid(Color::rgb8(0xf2, 0xf2, 0xf2)),
                Duration::from_secs(2)
            )
            .ease(easings::quad_in_out),
        circle
            .radius
            .to(150.0, Duration::from_secs(2))
            .ease(easings::elastic_out),
        // Text font size
        text.font_size
            .to(50.0, Duration::from_secs(2))
            .ease(easings::cubic_out),
    ]);

    // 4. Export (Renders frames and combines them into out.mkv)
    println!("Starting export to {}...", project.output_path.display());
    project.export().expect("Failed to export");
}

examples/advanced_flow.rs (line 11)

fn main() {
    // 1. Initialize Project with full API coverage
    let mut project = Project::default()
        .with_fps(120)
        .with_gpu(true)
        .with_cache(true)
        .with_ffmpeg(true)
        .with_output_path("output")
        .with_title("Advanced Flow")
        .close_on_finish();

    // 2. Setup Nodes
    let mut path = BezPath::new();
    path.move_to((100.0, 300.0));
    path.curve_to((250.0, 100.0), (550.0, 500.0), (700.0, 300.0));
    let path_node = PathNode::default()
        .with_path(path)
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 2.0);
    let follower = Circle::default()
        .with_position(Vec2::new(100.0, 300.0))
        .with_radius(20.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    // Showcase: Rect and Line
    let background_rect = Rect::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_size(Vec2::new(760.0, 560.0))
        .with_fill(Color::rgba8(0x33, 0x33, 0x33, 150))
        .with_radius(20.0);

    let divider_line = Line::default()
        .with_start(Vec2::new(0.0, 300.0))
        .with_end(Vec2::new(0.0, 300.0))
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 1.0);
    let title_text = TextNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_text("Motion Canvas in Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_font("JetBrains Mono");

    let code_block = CodeNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(50.0, 415.0))
        .with_language("rust")
        .with_opacity(0.0);

    let math_eq = MathNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_equation("f(x) = sin(x)")
        .with_font_size(30.0)
        .with_fill(Color::rgb8(0xe6, 0xa7, 0x00)); // Yellow

    let logo = ImageNode::default()
        .with_position(Vec2::new(650.0, 150.0))
        .with_path("./examples/images/motion-canvas-logo.png")
        .with_size(Vec2::new(150.0, 150.0));

    project.scene.video_timeline.add(all![
        // Show code
        chain![
            code_block.opacity.to(1.0, Duration::from_secs(1)),
            code_block.append("fn main() {\n", Duration::from_secs(1)),
            code_block.append(
                "    let mut engine = MotionCanvas::new();\n",
                Duration::from_secs(1)
            ),
            code_block.append("    engine.render();\n", Duration::from_secs(1)),
            code_block.append("}", Duration::from_secs(1)),
            // Staggered appearance of nodes
            sequence![
                Duration::from_millis(200),
                divider_line
                    .end
                    .to(Vec2::new(800.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_out),
                follower
                    .radius
                    .to(30.0, Duration::from_millis(500))
                    .ease(easings::elastic_out),
            ],
            // The path follow combined with a "race" logic
            any![
                follower
                    .position
                    .follow(&path_node, Duration::from_secs(3))
                    .ease(easings::cubic_in_out),
                // Race: if this 'wait' finishes first, the follow is done
                wait(Duration::from_secs(4)),
            ],
            // Final flourishes using different easings
            all![
                follower
                    .radius
                    .to(10.0, Duration::from_secs(1))
                    .ease(easings::quad_out),
                divider_line
                    .start
                    .to(Vec2::new(400.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_in),
            ]
        ]
    ]);

    // 4. Build Scene
    project.scene.add(&background_rect);
    project.scene.add(&divider_line);
    project.scene.add(&path_node);
    project.scene.add(&follower);
    project.scene.add(&title_text);
    project.scene.add(&code_block);
    project.scene.add(&math_eq);
    project.scene.add(&logo);

    // 5. Run (Choose show() for interactive or export() for PNGs)
    project.show().expect("Failed to render");
    // project.export().expect("Failed to export");
}

pub fn with_cache(self, use_cache: bool) -> Self

Enables or disables frame-level caching.

Examples found in repository

examples/color_interpolation.rs (line 9)

fn main() {
    let mut project = Project::default()
        .with_dimensions(300, 300)
        .with_fps(60)
        .with_title("Color Interpolation")
        .with_cache(true)
        .close_on_finish();

    let circle = Circle::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_radius(50.0)
        .with_fill(Color::RED); // Red

    project.scene.add(&circle);

    let duration = Duration::from_secs(1);

    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                circle.fill_paint.to(Paint::Solid(Color::YELLOW), duration),
                circle.fill_paint.to(Paint::Solid(Color::GREEN), duration),
                circle.fill_paint.to(Paint::Solid(Color::BLUE), duration),
                circle.fill_paint.to(Paint::Solid(Color::RED), duration),
            ]
        },
        None,
    ));

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

examples/getting_started.rs (line 8)

fn main() {
    // 1. Initialize the Project
    let mut project = Project::default()
        .with_fps(60)
        .with_cache(true)
        .with_title("Getting Started")
        .close_on_finish();

    // 2. Define Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 450.0))
        .with_text("Hello Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White-ish

    // 3. Add Nodes to the Scene
    project.scene.add(&circle);
    project.scene.add(&text);

    // 4. Add Animations to the Timeline
    project.scene.video_timeline.add(all![
        circle.radius.to(100.0, Duration::from_secs(1)),
        text.position
            .to(Vec2::new(400.0, 500.0), Duration::from_secs(1)),
    ]);

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

examples/advanced_flow.rs (line 9)

fn main() {
    // 1. Initialize Project with full API coverage
    let mut project = Project::default()
        .with_fps(120)
        .with_gpu(true)
        .with_cache(true)
        .with_ffmpeg(true)
        .with_output_path("output")
        .with_title("Advanced Flow")
        .close_on_finish();

    // 2. Setup Nodes
    let mut path = BezPath::new();
    path.move_to((100.0, 300.0));
    path.curve_to((250.0, 100.0), (550.0, 500.0), (700.0, 300.0));
    let path_node = PathNode::default()
        .with_path(path)
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 2.0);
    let follower = Circle::default()
        .with_position(Vec2::new(100.0, 300.0))
        .with_radius(20.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    // Showcase: Rect and Line
    let background_rect = Rect::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_size(Vec2::new(760.0, 560.0))
        .with_fill(Color::rgba8(0x33, 0x33, 0x33, 150))
        .with_radius(20.0);

    let divider_line = Line::default()
        .with_start(Vec2::new(0.0, 300.0))
        .with_end(Vec2::new(0.0, 300.0))
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 1.0);
    let title_text = TextNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_text("Motion Canvas in Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_font("JetBrains Mono");

    let code_block = CodeNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(50.0, 415.0))
        .with_language("rust")
        .with_opacity(0.0);

    let math_eq = MathNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_equation("f(x) = sin(x)")
        .with_font_size(30.0)
        .with_fill(Color::rgb8(0xe6, 0xa7, 0x00)); // Yellow

    let logo = ImageNode::default()
        .with_position(Vec2::new(650.0, 150.0))
        .with_path("./examples/images/motion-canvas-logo.png")
        .with_size(Vec2::new(150.0, 150.0));

    project.scene.video_timeline.add(all![
        // Show code
        chain![
            code_block.opacity.to(1.0, Duration::from_secs(1)),
            code_block.append("fn main() {\n", Duration::from_secs(1)),
            code_block.append(
                "    let mut engine = MotionCanvas::new();\n",
                Duration::from_secs(1)
            ),
            code_block.append("    engine.render();\n", Duration::from_secs(1)),
            code_block.append("}", Duration::from_secs(1)),
            // Staggered appearance of nodes
            sequence![
                Duration::from_millis(200),
                divider_line
                    .end
                    .to(Vec2::new(800.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_out),
                follower
                    .radius
                    .to(30.0, Duration::from_millis(500))
                    .ease(easings::elastic_out),
            ],
            // The path follow combined with a "race" logic
            any![
                follower
                    .position
                    .follow(&path_node, Duration::from_secs(3))
                    .ease(easings::cubic_in_out),
                // Race: if this 'wait' finishes first, the follow is done
                wait(Duration::from_secs(4)),
            ],
            // Final flourishes using different easings
            all![
                follower
                    .radius
                    .to(10.0, Duration::from_secs(1))
                    .ease(easings::quad_out),
                divider_line
                    .start
                    .to(Vec2::new(400.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_in),
            ]
        ]
    ]);

    // 4. Build Scene
    project.scene.add(&background_rect);
    project.scene.add(&divider_line);
    project.scene.add(&path_node);
    project.scene.add(&follower);
    project.scene.add(&title_text);
    project.scene.add(&code_block);
    project.scene.add(&math_eq);
    project.scene.add(&logo);

    // 5. Run (Choose show() for interactive or export() for PNGs)
    project.show().expect("Failed to render");
    // project.export().expect("Failed to export");
}

examples/gradient_demo.rs (line 101)

fn main() {
    let cx = 960.0_f32;
    let cy = 480.0_f32;

    let mut project = Project::default()
        .with_dimensions(1920, 1080)
        .with_cache(true)
        .with_title("Gradient Demo")
        .close_on_finish();

    // Background
    let bg_rect = Rect::default()
        .with_position(Vec2::new(cx, 540.0))
        .with_size(Vec2::new(1920.0, 1080.0))
        .with_fill(BG);

    let grid = GridNode::default()
        .with_position(Vec2::new(cx, 540.0))
        .with_columns(32.0)
        .with_rows(18.0)
        .with_spacing_all(60.0)
        .with_stroke(GRID_COLOR, 1.0)
        .with_opacity(0.0);

    // Gradients
    let sunset = tri_grad(CORAL, PINK, VIOLET, 120.0);
    let ocean = linear_grad(CYAN, INDIGO, 120.0);
    let glow = radial_grad(FUCHSIA, Color::rgba8(0x4f, 0x46, 0xe5, 0), 130.0);
    let glow_alt = radial_grad(CYAN, Color::rgba8(0x00, 0xf2, 0xfe, 0), 180.0);

    // Sunset in different directions (same colors, different orientation)
    let sunset_stops = vec![
        ColorStop {
            offset: 0.0,
            color: CORAL,
        },
        ColorStop {
            offset: 0.5,
            color: PINK,
        },
        ColorStop {
            offset: 1.0,
            color: VIOLET,
        },
    ];
    let sunset_horiz = directed_grad(
        Point::new(-120.0, 0.0),
        Point::new(120.0, 0.0),
        sunset_stops.clone(),
    );
    let sunset_vert = directed_grad(
        Point::new(0.0, -120.0),
        Point::new(0.0, 120.0),
        sunset_stops.clone(),
    );
    let sunset_diag = directed_grad(
        Point::new(-120.0, -120.0),
        Point::new(120.0, 120.0),
        sunset_stops.clone(),
    );

    // Ocean in different directions
    let ocean_stops = vec![
        ColorStop {
            offset: 0.0,
            color: CYAN,
        },
        ColorStop {
            offset: 1.0,
            color: INDIGO,
        },
    ];
    let ocean_vert = directed_grad(
        Point::new(0.0, -120.0),
        Point::new(0.0, 120.0),
        ocean_stops.clone(),
    );

    // Persistent title
    let title = TextNode::default()
        .with_position(Vec2::new(cx, 100.0))
        .with_text("Gradient Paint Demo")
        .with_font_size(48.0)
        .with_fill(Color::rgb8(0xdd, 0xdd, 0xee))
        .with_opacity(0.0);

    // Per-scene label (reused position, swapped text via separate nodes)
    let label_y = 200.0;

    // ─── SCENE 1: Circle with linear gradient fill ───
    let s1_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Linear Gradient Fill")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s1 = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(130.0)
        .with_fill(sunset.clone())
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 20), 2.0)
        .with_scale(0.95)
        .with_opacity(0.0);

    // Guides
    let s1_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy - 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CORAL, 2.5)
        .with_opacity(0.0);

    let s1_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy + 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(VIOLET, 2.5)
        .with_opacity(0.0);

    let s1_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, -120.0))
        .with_end(Vec2::new(120.0, 120.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 2: Rect with radial gradient fill ───
    let s2_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Radial Gradient Fill")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s2 = Rect::default()
        .with_position(Vec2::new(cx, cy))
        .with_size(Vec2::new(260.0, 260.0))
        .with_radius(24.0)
        .with_fill(glow.clone())
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 20), 2.0)
        .with_scale(0.95)
        .with_opacity(0.0);

    // Guides
    let s2_g_center = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(FUCHSIA, 2.5)
        .with_opacity(0.0);

    let s2_g_radius = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(130.0)
        .with_fill(Color::TRANSPARENT)
        .with_stroke(Color::rgba8(0xff, 0x00, 0x7f, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 3: Hexagon with gradient stroke ───
    let s3_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Gradient Stroke")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s3 = Polygon::regular(6, 130.0)
        .with_position(Vec2::new(cx, cy))
        .with_fill(Color::rgba8(0x12, 0x12, 0x20, 255))
        .with_stroke(ocean.clone(), 5.0)
        .with_scale(0.95)
        .with_opacity(0.0);

    // Guides
    let s3_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CYAN, 2.5)
        .with_opacity(0.0);

    let s3_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(INDIGO, 2.5)
        .with_opacity(0.0);

    let s3_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, 0.0))
        .with_end(Vec2::new(120.0, 0.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 4: Line with gradient stroke ───
    let s4_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Gradient Line")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s4 = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-160.0, 100.0))
        .with_end(Vec2::new(160.0, -100.0))
        .with_stroke(sunset.clone(), 8.0)
        .with_opacity(0.0);

    // Guides
    let s4_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy - 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CORAL, 2.5)
        .with_opacity(0.0);

    let s4_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy + 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(VIOLET, 2.5)
        .with_opacity(0.0);

    let s4_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, -120.0))
        .with_end(Vec2::new(120.0, 120.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 5: Path with gradient stroke ───
    let s5_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Gradient Path")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let mut tri_path = BezPath::new();
    tri_path.move_to(kurbo::Point::new(0.0, -120.0));
    tri_path.line_to(kurbo::Point::new(104.0, 60.0));
    tri_path.line_to(kurbo::Point::new(-104.0, 60.0));
    tri_path.close_path();

    let s5 = PathNode::new(Vec2::new(cx, cy), tri_path, CYAN, 6.0)
        .with_stroke(ocean.clone(), 6.0)
        .with_opacity(0.0);

    // Guides
    let s5_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CYAN, 2.5)
        .with_opacity(0.0);

    let s5_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(INDIGO, 2.5)
        .with_opacity(0.0);

    let s5_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, 0.0))
        .with_end(Vec2::new(120.0, 0.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 6: Grid with gradient stroke ───
    let s6_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Gradient Grid")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s6_grid = GridNode::default()
        .with_position(Vec2::new(cx, cy))
        .with_columns(8.0)
        .with_rows(6.0)
        .with_spacing_all(50.0)
        .with_stroke(ocean.clone(), 2.0)
        .with_opacity(0.0);

    // Guides
    let s6_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CYAN, 2.5)
        .with_opacity(0.0);

    let s6_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(INDIGO, 2.5)
        .with_opacity(0.0);

    let s6_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, 0.0))
        .with_end(Vec2::new(120.0, 0.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 7: Text with gradient fill ───
    let s7_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Gradient Text")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s7 = TextNode::default()
        .with_position(Vec2::new(cx, cy))
        .with_text("HELLO GRADIENTS")
        .with_font_size(80.0)
        .with_fill(ocean.clone())
        .with_scale(0.95)
        .with_opacity(0.0);

    // Guides
    let s7_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CYAN, 2.5)
        .with_opacity(0.0);

    let s7_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(INDIGO, 2.5)
        .with_opacity(0.0);

    let s7_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, 0.0))
        .with_end(Vec2::new(120.0, 0.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 8: Math with gradient fill ───
    let s8_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Gradient Math")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s8 = MathNode::default()
        .with_position(Vec2::new(cx, cy))
        .with_equation("E = m c^2")
        .with_font_size(72.0)
        .with_fill(sunset.clone())
        .with_scale(0.95)
        .with_opacity(0.0);

    // Guides
    let s8_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy - 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CORAL, 2.5)
        .with_opacity(0.0);

    let s8_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy + 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(VIOLET, 2.5)
        .with_opacity(0.0);

    let s8_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, -120.0))
        .with_end(Vec2::new(120.0, 120.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 9: Solid ↔ Gradient ───
    let s9_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Solid to Gradient")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s9 = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(130.0)
        .with_fill(Color::WHITE)
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 20), 2.0)
        .with_scale(0.95)
        .with_opacity(0.0);

    // Guides (start with opacity 0, fade in when Sunset is active, fade out on Solid)
    let s9_g_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy - 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CORAL, 2.5)
        .with_opacity(0.0);

    let s9_g_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy + 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(VIOLET, 2.5)
        .with_opacity(0.0);

    let s9_g_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, -120.0))
        .with_end(Vec2::new(120.0, 120.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // ─── SCENE 10: Radial ↔ Linear Interpolation ───
    let s10_lbl = TextNode::default()
        .with_position(Vec2::new(cx, label_y))
        .with_text("Radial ↔ Linear Morph")
        .with_font_size(28.0)
        .with_fill(LABEL)
        .with_opacity(0.0);

    let s10 = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(130.0)
        .with_fill(glow.clone()) // Start as Radial Gradient
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 20), 2.0)
        .with_scale(0.95)
        .with_opacity(0.0);

    // Visual guides for Scene 10 (cross-fading between radial and linear handles)
    let s10_g_rad_center = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(FUCHSIA, 2.5)
        .with_opacity(0.0);

    let s10_g_rad_radius = Circle::default()
        .with_position(Vec2::new(cx, cy))
        .with_radius(130.0)
        .with_fill(Color::TRANSPARENT)
        .with_stroke(Color::rgba8(0xff, 0x00, 0x7f, 80), 1.5)
        .with_opacity(0.0);

    let s10_g_lin_start = Circle::default()
        .with_position(Vec2::new(cx - 120.0, cy - 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(CORAL, 2.5)
        .with_opacity(0.0);

    let s10_g_lin_end = Circle::default()
        .with_position(Vec2::new(cx + 120.0, cy + 120.0))
        .with_radius(8.0)
        .with_fill(Color::WHITE)
        .with_stroke(VIOLET, 2.5)
        .with_opacity(0.0);

    let s10_g_lin_line = Line::default()
        .with_position(Vec2::new(cx, cy))
        .with_start(Vec2::new(-120.0, -120.0))
        .with_end(Vec2::new(120.0, 120.0))
        .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 80), 1.5)
        .with_opacity(0.0);

    // Add all to scene
    project.scene.add(&bg_rect);
    project.scene.add(&grid);
    project.scene.add(&title);

    // Scene 1
    project.scene.add(&s1_lbl);
    project.scene.add(&s1);
    project.scene.add(&s1_g_line);
    project.scene.add(&s1_g_start);
    project.scene.add(&s1_g_end);

    // Scene 2
    project.scene.add(&s2_lbl);
    project.scene.add(&s2);
    project.scene.add(&s2_g_radius);
    project.scene.add(&s2_g_center);

    // Scene 3
    project.scene.add(&s3_lbl);
    project.scene.add(&s3);
    project.scene.add(&s3_g_line);
    project.scene.add(&s3_g_start);
    project.scene.add(&s3_g_end);

    // Scene 4
    project.scene.add(&s4_lbl);
    project.scene.add(&s4);
    project.scene.add(&s4_g_line);
    project.scene.add(&s4_g_start);
    project.scene.add(&s4_g_end);

    // Scene 5
    project.scene.add(&s5_lbl);
    project.scene.add(&s5);
    project.scene.add(&s5_g_line);
    project.scene.add(&s5_g_start);
    project.scene.add(&s5_g_end);

    // Scene 6
    project.scene.add(&s6_lbl);
    project.scene.add(&s6_grid);
    project.scene.add(&s6_g_line);
    project.scene.add(&s6_g_start);
    project.scene.add(&s6_g_end);

    // Scene 7
    project.scene.add(&s7_lbl);
    project.scene.add(&s7);
    project.scene.add(&s7_g_line);
    project.scene.add(&s7_g_start);
    project.scene.add(&s7_g_end);

    // Scene 8
    project.scene.add(&s8_lbl);
    project.scene.add(&s8);
    project.scene.add(&s8_g_line);
    project.scene.add(&s8_g_start);
    project.scene.add(&s8_g_end);

    // Scene 9
    project.scene.add(&s9_lbl);
    project.scene.add(&s9);
    project.scene.add(&s9_g_line);
    project.scene.add(&s9_g_start);
    project.scene.add(&s9_g_end);

    // Scene 10
    project.scene.add(&s10_lbl);
    project.scene.add(&s10);
    project.scene.add(&s10_g_rad_radius);
    project.scene.add(&s10_g_rad_center);
    project.scene.add(&s10_g_lin_line);
    project.scene.add(&s10_g_lin_start);
    project.scene.add(&s10_g_lin_end);

    // Timeline — one scene at a time, each with its own gradient animation
    project.scene.video_timeline.add(chain![
        // Intro
        all![
            grid.opacity.to(1.0, Duration::from_millis(800)),
            title.opacity.to(1.0, Duration::from_millis(800)),
        ],
        wait!(1),
        // ─── 1: Circle linear fill — morph colors, then direction ───
        all![
            s1_lbl.opacity.to(1.0, FADE_IN),
            s1.opacity.to(1.0, FADE_IN),
            s1.scale.to(Vec2::ONE, FADE_IN),
            s1_g_start.opacity.to(1.0, FADE_IN),
            s1_g_end.opacity.to(1.0, FADE_IN),
            s1_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Color morph: sunset → ocean
        all![
            s1.fill_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s1_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s1_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s1_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s1_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s1_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s1_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        // Color morph: ocean → sunset
        all![
            s1.fill_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s1_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s1_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s1_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s1_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s1_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s1_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        // Direction morph: diagonal → horizontal sunset
        all![
            s1.fill_paint
                .to(Paint::Gradient(sunset_horiz.clone()), MORPH),
            s1_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s1_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s1_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s1_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
        ],
        wait!(1),
        // Direction morph: horizontal → vertical sunset
        all![
            s1.fill_paint
                .to(Paint::Gradient(sunset_vert.clone()), MORPH),
            s1_g_start.position.to(Vec2::new(cx, cy - 120.0), MORPH),
            s1_g_end.position.to(Vec2::new(cx, cy + 120.0), MORPH),
            s1_g_line.start.to(Vec2::new(0.0, -120.0), MORPH),
            s1_g_line.end.to(Vec2::new(0.0, 120.0), MORPH),
        ],
        wait!(1),
        // Direction morph: vertical → diagonal sunset
        all![
            s1.fill_paint
                .to(Paint::Gradient(sunset_diag.clone()), MORPH),
            s1_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s1_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s1_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s1_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
        ],
        wait!(1),
        all![
            s1_lbl.opacity.to(0.0, FADE_OUT),
            s1.opacity.to(0.0, FADE_OUT),
            s1.scale.to(Vec2::splat(0.95), FADE_OUT),
            s1_g_start.opacity.to(0.0, FADE_OUT),
            s1_g_end.opacity.to(0.0, FADE_OUT),
            s1_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 2: Rect radial fill — morph to another radial gradient and back ───
        all![
            s2_lbl.opacity.to(1.0, FADE_IN),
            s2.opacity.to(1.0, FADE_IN),
            s2.scale.to(Vec2::ONE, FADE_IN),
            s2_g_center.opacity.to(1.0, FADE_IN),
            s2_g_radius.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Radial color and radius morph: glow (Fuchsia 130px) -> glow_alt (Cyan 180px)
        all![
            s2.fill_paint.to(Paint::Gradient(glow_alt.clone()), MORPH),
            s2_g_radius.radius.to(180.0, MORPH),
            s2_g_center.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s2_g_radius
                .stroke_paint
                .to(Paint::Solid(Color::rgba8(0x00, 0xf2, 0xfe, 80)), MORPH),
        ],
        wait!(1),
        // Morph back to glow
        all![
            s2.fill_paint.to(Paint::Gradient(glow.clone()), MORPH),
            s2_g_radius.radius.to(130.0, MORPH),
            s2_g_center.stroke_paint.to(Paint::Solid(FUCHSIA), MORPH),
            s2_g_radius
                .stroke_paint
                .to(Paint::Solid(Color::rgba8(0xff, 0x00, 0x7f, 80)), MORPH),
        ],
        wait!(1),
        all![
            s2_lbl.opacity.to(0.0, FADE_OUT),
            s2.opacity.to(0.0, FADE_OUT),
            s2.scale.to(Vec2::splat(0.95), FADE_OUT),
            s2_g_center.opacity.to(0.0, FADE_OUT),
            s2_g_radius.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 3: Hex gradient stroke — morph colors, then direction ───
        all![
            s3_lbl.opacity.to(1.0, FADE_IN),
            s3.opacity.to(1.0, FADE_IN),
            s3.scale.to(Vec2::ONE, FADE_IN),
            s3_g_start.opacity.to(1.0, FADE_IN),
            s3_g_end.opacity.to(1.0, FADE_IN),
            s3_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph: ocean (horizontal) -> sunset (diagonal)
        all![
            s3.stroke_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s3_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s3_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s3_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s3_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s3_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s3_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        // Morph: sunset (diagonal) -> ocean (horizontal)
        all![
            s3.stroke_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s3_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s3_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s3_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s3_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s3_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s3_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        // Direction morph: horizontal ocean -> vertical ocean
        all![
            s3.stroke_paint
                .to(Paint::Gradient(ocean_vert.clone()), MORPH),
            s3_g_start.position.to(Vec2::new(cx, cy - 120.0), MORPH),
            s3_g_end.position.to(Vec2::new(cx, cy + 120.0), MORPH),
            s3_g_line.start.to(Vec2::new(0.0, -120.0), MORPH),
            s3_g_line.end.to(Vec2::new(0.0, 120.0), MORPH),
        ],
        wait!(1),
        // Direction morph: vertical ocean -> horizontal ocean
        all![
            s3.stroke_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s3_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s3_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s3_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s3_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
        ],
        wait!(1),
        all![
            s3_lbl.opacity.to(0.0, FADE_OUT),
            s3.opacity.to(0.0, FADE_OUT),
            s3.scale.to(Vec2::splat(0.95), FADE_OUT),
            s3_g_start.opacity.to(0.0, FADE_OUT),
            s3_g_end.opacity.to(0.0, FADE_OUT),
            s3_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 4: Line gradient stroke ───
        all![
            s4_lbl.opacity.to(1.0, FADE_IN),
            s4.opacity.to(1.0, FADE_IN),
            s4_g_start.opacity.to(1.0, FADE_IN),
            s4_g_end.opacity.to(1.0, FADE_IN),
            s4_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph: sunset (diagonal) -> ocean (horizontal)
        all![
            s4.stroke_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s4_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s4_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s4_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s4_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s4_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s4_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        // Morph: ocean (horizontal) -> sunset (diagonal)
        all![
            s4.stroke_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s4_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s4_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s4_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s4_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s4_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s4_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        all![
            s4_lbl.opacity.to(0.0, FADE_OUT),
            s4.opacity.to(0.0, FADE_OUT),
            s4_g_start.opacity.to(0.0, FADE_OUT),
            s4_g_end.opacity.to(0.0, FADE_OUT),
            s4_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 5: Path gradient stroke ───
        all![
            s5_lbl.opacity.to(1.0, FADE_IN),
            s5.opacity.to(1.0, FADE_IN),
            s5_g_start.opacity.to(1.0, FADE_IN),
            s5_g_end.opacity.to(1.0, FADE_IN),
            s5_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph: ocean (horizontal) -> sunset (diagonal)
        all![
            s5.stroke_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s5_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s5_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s5_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s5_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s5_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s5_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        // Morph: sunset (diagonal) -> ocean (horizontal)
        all![
            s5.stroke_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s5_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s5_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s5_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s5_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s5_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s5_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        all![
            s5_lbl.opacity.to(0.0, FADE_OUT),
            s5.opacity.to(0.0, FADE_OUT),
            s5_g_start.opacity.to(0.0, FADE_OUT),
            s5_g_end.opacity.to(0.0, FADE_OUT),
            s5_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 6: Grid gradient stroke ───
        all![
            s6_lbl.opacity.to(1.0, FADE_IN),
            s6_grid.opacity.to(1.0, FADE_IN),
            s6_g_start.opacity.to(1.0, FADE_IN),
            s6_g_end.opacity.to(1.0, FADE_IN),
            s6_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph: ocean (horizontal) -> sunset (diagonal)
        all![
            s6_grid
                .stroke_paint
                .to(Paint::Gradient(sunset.clone()), MORPH),
            s6_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s6_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s6_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s6_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s6_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s6_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        // Morph: sunset (diagonal) -> ocean (horizontal)
        all![
            s6_grid
                .stroke_paint
                .to(Paint::Gradient(ocean.clone()), MORPH),
            s6_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s6_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s6_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s6_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s6_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s6_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        all![
            s6_lbl.opacity.to(0.0, FADE_OUT),
            s6_grid.opacity.to(0.0, FADE_OUT),
            s6_g_start.opacity.to(0.0, FADE_OUT),
            s6_g_end.opacity.to(0.0, FADE_OUT),
            s6_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 7: Text — morph colors, then direction ───
        all![
            s7_lbl.opacity.to(1.0, FADE_IN),
            s7.opacity.to(1.0, FADE_IN),
            s7.scale.to(Vec2::ONE, FADE_IN),
            s7_g_start.opacity.to(1.0, FADE_IN),
            s7_g_end.opacity.to(1.0, FADE_IN),
            s7_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph: ocean (horizontal) -> sunset (diagonal)
        all![
            s7.fill_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s7_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s7_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s7_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s7_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s7_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s7_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        // Morph: sunset (diagonal) -> ocean (horizontal)
        all![
            s7.fill_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s7_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s7_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s7_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s7_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s7_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s7_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        // Morph: horizontal ocean -> vertical ocean
        all![
            s7.fill_paint.to(Paint::Gradient(ocean_vert.clone()), MORPH),
            s7_g_start.position.to(Vec2::new(cx, cy - 120.0), MORPH),
            s7_g_end.position.to(Vec2::new(cx, cy + 120.0), MORPH),
            s7_g_line.start.to(Vec2::new(0.0, -120.0), MORPH),
            s7_g_line.end.to(Vec2::new(0.0, 120.0), MORPH),
        ],
        wait!(1),
        // Morph: vertical ocean -> horizontal ocean
        all![
            s7.fill_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s7_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s7_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s7_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s7_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
        ],
        wait!(1),
        all![
            s7_lbl.opacity.to(0.0, FADE_OUT),
            s7.opacity.to(0.0, FADE_OUT),
            s7.scale.to(Vec2::splat(0.95), FADE_OUT),
            s7_g_start.opacity.to(0.0, FADE_OUT),
            s7_g_end.opacity.to(0.0, FADE_OUT),
            s7_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 8: Math ───
        all![
            s8_lbl.opacity.to(1.0, FADE_IN),
            s8.opacity.to(1.0, FADE_IN),
            s8.scale.to(Vec2::ONE, FADE_IN),
            s8_g_start.opacity.to(1.0, FADE_IN),
            s8_g_end.opacity.to(1.0, FADE_IN),
            s8_g_line.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph: sunset (diagonal) -> ocean (horizontal)
        all![
            s8.fill_paint.to(Paint::Gradient(ocean.clone()), MORPH),
            s8_g_start.position.to(Vec2::new(cx - 120.0, cy), MORPH),
            s8_g_end.position.to(Vec2::new(cx + 120.0, cy), MORPH),
            s8_g_line.start.to(Vec2::new(-120.0, 0.0), MORPH),
            s8_g_line.end.to(Vec2::new(120.0, 0.0), MORPH),
            s8_g_start.stroke_paint.to(Paint::Solid(CYAN), MORPH),
            s8_g_end.stroke_paint.to(Paint::Solid(INDIGO), MORPH),
        ],
        wait!(1),
        // Morph: ocean (horizontal) -> sunset (diagonal)
        all![
            s8.fill_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s8_g_start
                .position
                .to(Vec2::new(cx - 120.0, cy - 120.0), MORPH),
            s8_g_end
                .position
                .to(Vec2::new(cx + 120.0, cy + 120.0), MORPH),
            s8_g_line.start.to(Vec2::new(-120.0, -120.0), MORPH),
            s8_g_line.end.to(Vec2::new(120.0, 120.0), MORPH),
            s8_g_start.stroke_paint.to(Paint::Solid(CORAL), MORPH),
            s8_g_end.stroke_paint.to(Paint::Solid(VIOLET), MORPH),
        ],
        wait!(1),
        all![
            s8_lbl.opacity.to(0.0, FADE_OUT),
            s8.opacity.to(0.0, FADE_OUT),
            s8.scale.to(Vec2::splat(0.95), FADE_OUT),
            s8_g_start.opacity.to(0.0, FADE_OUT),
            s8_g_end.opacity.to(0.0, FADE_OUT),
            s8_g_line.opacity.to(0.0, FADE_OUT),
        ],
        // ─── 9: Solid ↔ Gradient ───
        all![
            s9_lbl.opacity.to(1.0, FADE_IN),
            s9.opacity.to(1.0, FADE_IN),
            s9.scale.to(Vec2::ONE, FADE_IN),
        ],
        wait!(1),
        // Morph: solid white -> sunset (diagonal gradient) + fade in guides
        all![
            s9.fill_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s9_g_start.opacity.to(1.0, MORPH),
            s9_g_end.opacity.to(1.0, MORPH),
            s9_g_line.opacity.to(1.0, MORPH),
        ],
        wait!(1),
        // Morph: sunset -> solid white + fade out guides
        all![
            s9.fill_paint.to(Paint::Solid(Color::WHITE), MORPH),
            s9_g_start.opacity.to(0.0, MORPH),
            s9_g_end.opacity.to(0.0, MORPH),
            s9_g_line.opacity.to(0.0, MORPH),
        ],
        wait!(1),
        all![
            s9_lbl.opacity.to(0.0, FADE_OUT),
            s9.opacity.to(0.0, FADE_OUT),
            s9.scale.to(Vec2::splat(0.95), FADE_OUT),
        ],
        // ─── 10: Radial ↔ Linear Morph ───
        all![
            s10_lbl.opacity.to(1.0, FADE_IN),
            s10.opacity.to(1.0, FADE_IN),
            s10.scale.to(Vec2::ONE, FADE_IN),
            s10_g_rad_center.opacity.to(1.0, FADE_IN),
            s10_g_rad_radius.opacity.to(1.0, FADE_IN),
        ],
        wait!(1),
        // Morph Radial (glow) to Linear (sunset) + cross-fade the visual guides
        all![
            s10.fill_paint.to(Paint::Gradient(sunset.clone()), MORPH),
            s10_g_rad_center.opacity.to(0.0, MORPH),
            s10_g_rad_radius.opacity.to(0.0, MORPH),
            s10_g_lin_start.opacity.to(1.0, MORPH),
            s10_g_lin_end.opacity.to(1.0, MORPH),
            s10_g_lin_line.opacity.to(1.0, MORPH),
        ],
        wait!(1),
        // Morph back from Linear (sunset) to Radial (glow)
        all![
            s10.fill_paint.to(Paint::Gradient(glow.clone()), MORPH),
            s10_g_rad_center.opacity.to(1.0, MORPH),
            s10_g_rad_radius.opacity.to(1.0, MORPH),
            s10_g_lin_start.opacity.to(0.0, MORPH),
            s10_g_lin_end.opacity.to(0.0, MORPH),
            s10_g_lin_line.opacity.to(0.0, MORPH),
        ],
        wait!(1),
        // Fade everything out
        all![
            s10_lbl.opacity.to(0.0, FADE_OUT),
            s10.opacity.to(0.0, FADE_OUT),
            s10_g_rad_center.opacity.to(0.0, FADE_OUT),
            s10_g_rad_radius.opacity.to(0.0, FADE_OUT),
            title.opacity.to(0.0, FADE_OUT),
            grid.opacity.to(0.0, FADE_OUT),
        ],
    ]);

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

pub fn with_cache_write_interval(self, interval: u32) -> Self

Sets the cache manifest write interval (number of frames).

pub fn with_ffmpeg(self, use_ffmpeg: bool) -> Self

Enables or disables automatic FFmpeg encoding.

Examples found in repository

examples/export.rs (line 8)

fn main() {
    // 1. Initialize for Export
    let mut project = Project::default()
        .with_fps(30)
        .with_ffmpeg(true)
        .with_title("Export")
        .with_output_path("output")
        .close_on_finish();

    // 2. Setup Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)); // Blue

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 50.0))
        .with_text("Export Demo")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White

    project.scene.add(&circle);
    project.scene.add(&text);

    // 3. Define Animations (Color and Font Size)
    project.scene.video_timeline.add(all![
        // Circle color and size
        circle
            .fill_paint
            .to(
                Paint::Solid(Color::rgb8(0xf2, 0xf2, 0xf2)),
                Duration::from_secs(2)
            )
            .ease(easings::quad_in_out),
        circle
            .radius
            .to(150.0, Duration::from_secs(2))
            .ease(easings::elastic_out),
        // Text font size
        text.font_size
            .to(50.0, Duration::from_secs(2))
            .ease(easings::cubic_out),
    ]);

    // 4. Export (Renders frames and combines them into out.mkv)
    println!("Starting export to {}...", project.output_path.display());
    project.export().expect("Failed to export");
}

examples/advanced_flow.rs (line 10)

fn main() {
    // 1. Initialize Project with full API coverage
    let mut project = Project::default()
        .with_fps(120)
        .with_gpu(true)
        .with_cache(true)
        .with_ffmpeg(true)
        .with_output_path("output")
        .with_title("Advanced Flow")
        .close_on_finish();

    // 2. Setup Nodes
    let mut path = BezPath::new();
    path.move_to((100.0, 300.0));
    path.curve_to((250.0, 100.0), (550.0, 500.0), (700.0, 300.0));
    let path_node = PathNode::default()
        .with_path(path)
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 2.0);
    let follower = Circle::default()
        .with_position(Vec2::new(100.0, 300.0))
        .with_radius(20.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    // Showcase: Rect and Line
    let background_rect = Rect::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_size(Vec2::new(760.0, 560.0))
        .with_fill(Color::rgba8(0x33, 0x33, 0x33, 150))
        .with_radius(20.0);

    let divider_line = Line::default()
        .with_start(Vec2::new(0.0, 300.0))
        .with_end(Vec2::new(0.0, 300.0))
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 1.0);
    let title_text = TextNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_text("Motion Canvas in Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_font("JetBrains Mono");

    let code_block = CodeNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(50.0, 415.0))
        .with_language("rust")
        .with_opacity(0.0);

    let math_eq = MathNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_equation("f(x) = sin(x)")
        .with_font_size(30.0)
        .with_fill(Color::rgb8(0xe6, 0xa7, 0x00)); // Yellow

    let logo = ImageNode::default()
        .with_position(Vec2::new(650.0, 150.0))
        .with_path("./examples/images/motion-canvas-logo.png")
        .with_size(Vec2::new(150.0, 150.0));

    project.scene.video_timeline.add(all![
        // Show code
        chain![
            code_block.opacity.to(1.0, Duration::from_secs(1)),
            code_block.append("fn main() {\n", Duration::from_secs(1)),
            code_block.append(
                "    let mut engine = MotionCanvas::new();\n",
                Duration::from_secs(1)
            ),
            code_block.append("    engine.render();\n", Duration::from_secs(1)),
            code_block.append("}", Duration::from_secs(1)),
            // Staggered appearance of nodes
            sequence![
                Duration::from_millis(200),
                divider_line
                    .end
                    .to(Vec2::new(800.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_out),
                follower
                    .radius
                    .to(30.0, Duration::from_millis(500))
                    .ease(easings::elastic_out),
            ],
            // The path follow combined with a "race" logic
            any![
                follower
                    .position
                    .follow(&path_node, Duration::from_secs(3))
                    .ease(easings::cubic_in_out),
                // Race: if this 'wait' finishes first, the follow is done
                wait(Duration::from_secs(4)),
            ],
            // Final flourishes using different easings
            all![
                follower
                    .radius
                    .to(10.0, Duration::from_secs(1))
                    .ease(easings::quad_out),
                divider_line
                    .start
                    .to(Vec2::new(400.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_in),
            ]
        ]
    ]);

    // 4. Build Scene
    project.scene.add(&background_rect);
    project.scene.add(&divider_line);
    project.scene.add(&path_node);
    project.scene.add(&follower);
    project.scene.add(&title_text);
    project.scene.add(&code_block);
    project.scene.add(&math_eq);
    project.scene.add(&logo);

    // 5. Run (Choose show() for interactive or export() for PNGs)
    project.show().expect("Failed to render");
    // project.export().expect("Failed to export");
}

pub fn with_gpu(self, use_gpu: bool) -> Self

Enables or disables GPU acceleration.

Examples found in repository

examples/advanced_flow.rs (line 8)

fn main() {
    // 1. Initialize Project with full API coverage
    let mut project = Project::default()
        .with_fps(120)
        .with_gpu(true)
        .with_cache(true)
        .with_ffmpeg(true)
        .with_output_path("output")
        .with_title("Advanced Flow")
        .close_on_finish();

    // 2. Setup Nodes
    let mut path = BezPath::new();
    path.move_to((100.0, 300.0));
    path.curve_to((250.0, 100.0), (550.0, 500.0), (700.0, 300.0));
    let path_node = PathNode::default()
        .with_path(path)
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 2.0);
    let follower = Circle::default()
        .with_position(Vec2::new(100.0, 300.0))
        .with_radius(20.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    // Showcase: Rect and Line
    let background_rect = Rect::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_size(Vec2::new(760.0, 560.0))
        .with_fill(Color::rgba8(0x33, 0x33, 0x33, 150))
        .with_radius(20.0);

    let divider_line = Line::default()
        .with_start(Vec2::new(0.0, 300.0))
        .with_end(Vec2::new(0.0, 300.0))
        .with_stroke(Color::rgb8(0x44, 0x44, 0x44), 1.0);
    let title_text = TextNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_text("Motion Canvas in Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_font("JetBrains Mono");

    let code_block = CodeNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(50.0, 415.0))
        .with_language("rust")
        .with_opacity(0.0);

    let math_eq = MathNode::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_equation("f(x) = sin(x)")
        .with_font_size(30.0)
        .with_fill(Color::rgb8(0xe6, 0xa7, 0x00)); // Yellow

    let logo = ImageNode::default()
        .with_position(Vec2::new(650.0, 150.0))
        .with_path("./examples/images/motion-canvas-logo.png")
        .with_size(Vec2::new(150.0, 150.0));

    project.scene.video_timeline.add(all![
        // Show code
        chain![
            code_block.opacity.to(1.0, Duration::from_secs(1)),
            code_block.append("fn main() {\n", Duration::from_secs(1)),
            code_block.append(
                "    let mut engine = MotionCanvas::new();\n",
                Duration::from_secs(1)
            ),
            code_block.append("    engine.render();\n", Duration::from_secs(1)),
            code_block.append("}", Duration::from_secs(1)),
            // Staggered appearance of nodes
            sequence![
                Duration::from_millis(200),
                divider_line
                    .end
                    .to(Vec2::new(800.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_out),
                follower
                    .radius
                    .to(30.0, Duration::from_millis(500))
                    .ease(easings::elastic_out),
            ],
            // The path follow combined with a "race" logic
            any![
                follower
                    .position
                    .follow(&path_node, Duration::from_secs(3))
                    .ease(easings::cubic_in_out),
                // Race: if this 'wait' finishes first, the follow is done
                wait(Duration::from_secs(4)),
            ],
            // Final flourishes using different easings
            all![
                follower
                    .radius
                    .to(10.0, Duration::from_secs(1))
                    .ease(easings::quad_out),
                divider_line
                    .start
                    .to(Vec2::new(400.0, 300.0), Duration::from_secs(1))
                    .ease(easings::cubic_in),
            ]
        ]
    ]);

    // 4. Build Scene
    project.scene.add(&background_rect);
    project.scene.add(&divider_line);
    project.scene.add(&path_node);
    project.scene.add(&follower);
    project.scene.add(&title_text);
    project.scene.add(&code_block);
    project.scene.add(&math_eq);
    project.scene.add(&logo);

    // 5. Run (Choose show() for interactive or export() for PNGs)
    project.show().expect("Failed to render");
    // project.export().expect("Failed to export");
}

pub fn with_background(self, color: Color) -> Self

Sets the background clear color.

Examples found in repository

examples/audio_demo.rs (line 8)

fn main() {
    let mut project = Project::default()
        .with_dimensions(800, 450)
        .with_title("Audio Demo")
        .with_background(Color::rgb8(20, 20, 25))
        .close_on_finish();

    // Setup Video Timeline
    let rect = Rect::new(Vec2::new(100.0, 100.0), Vec2::new(200.0, 200.0), Color::RED)
        .with_anchor(Vec2::new(-1.0, -1.0));

    project.scene.add(&rect);

    project.scene.video_timeline.add(chain!(
        all![
            rect.position
                .to(Vec2::new(150.0, 150.0), Duration::from_secs(1)),
            rect.size.to(Vec2::new(200.0, 50.0), Duration::from_secs(1)),
            rect.fill_paint
                .to(Paint::Solid(Color::BLUE), Duration::from_secs(1)),
        ],
        all![
            rect.position
                .to(Vec2::new(350.0, 150.0), Duration::from_secs(1)),
            rect.fill_paint
                .to(Paint::Solid(Color::RED), Duration::from_secs(1)),
        ]
    ));

    // Setup Audio Timeline using new macros and builder
    project.scene.audio_timeline.add(chain!(
        play!(AudioNode::new("./examples/audios/combo-1.mp3").with_volume(0.5)),
        audio_wait!(0.05),
        play!(AudioNode::new("./examples/audios/combo-2.mp3").with_volume(1.0))
    ));

    println!("Project configured with separate video and audio timelines.");
    println!(
        "Video duration: {:?}",
        project.scene.video_timeline.duration()
    );
    println!(
        "Audio duration: {:?}",
        project.scene.audio_timeline.duration()
    );

    project.show().expect("Failed to run audio demo");
}

examples/camera_demo.rs (line 7)

fn main() {
    let mut project = Project::default()
        .with_title("Camera Demo")
        .with_background(Color::rgb8(0x1a, 0x1a, 0x1a))
        .close_on_finish();

    // Create a grid of circles to move the camera around
    let mut nodes: Vec<Box<dyn Node>> = Vec::new();

    for x in -2..=2 {
        for y in -2..=2 {
            let color = if (x + y) % 2 == 0 {
                Color::rgb8(0x34, 0x98, 0xdb) // Blue
            } else {
                Color::rgb8(0xe7, 0x4c, 0x3c) // Red
            };

            nodes.push(Box::new(
                Circle::default()
                    .with_position(Vec2::new(x as f32 * 200.0, y as f32 * 200.0))
                    .with_radius(40.0)
                    .with_fill(color),
            ));
        }
    }

    // Create the camera and add our nodes to it
    let camera = CameraNode::new(nodes)
        .with_position(Vec2::new(0.0, 0.0))
        .with_zoom(1.0);

    project.scene.add(&camera);

    // Add HUD text (NOT in camera, so it stays fixed)
    project.scene.add(
        TextNode::default()
            .with_position(Vec2::new(400.0, 50.0))
            .with_text("Camera Control")
            .with_font_size(60.0)
            .with_fill(Color::WHITE)
            .with_anchor(Vec2::ZERO),
    );

    // Animation: Pan, Zoom, and Rotate the camera
    project.scene.video_timeline.add(loop_anim!(
        chain![
            wait(Duration::from_secs(1)),
            // 1. Pan to the right
            camera
                .position
                .to(Vec2::new(200.0, 0.0), Duration::from_secs(1)),
            // 2. Zoom in
            camera.zoom.to(2.0, Duration::from_secs(1)),
            // 3. Pan down and rotate
            all![
                camera
                    .position
                    .to(Vec2::new(200.0, 200.0), Duration::from_secs(1)),
                camera
                    .rotation
                    .to(std::f32::consts::PI / 4.0, Duration::from_secs(1)),
            ],
            // 4. Zoom out and reset
            all![
                camera.position.to(Vec2::ZERO, Duration::from_secs(1)),
                camera.zoom.to(0.5, Duration::from_secs(1)),
                camera.rotation.to(0.0, Duration::from_secs(1)),
            ],
            // 5. Back to normal
            camera.zoom.to(1.0, Duration::from_secs(1)),
        ],
        None,
    ));

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

examples/nested_cameras.rs (line 7)

fn main() {
    let mut project = Project::default()
        .with_title("Nested Cameras")
        .with_background(Color::rgb8(0x1a, 0x1a, 0x1a))
        .close_on_finish();

    // Elements to view
    let rect = Rect::default()
        .with_size(Vec2::new(200.0, 200.0))
        .with_fill(Color::BLUE);

    let circle = Circle::default()
        .with_position(Vec2::new(100.0, 100.0))
        .with_radius(30.0)
        .with_fill(Color::WHITE);

    // Inner Camera: Zooms into the action
    // We disable 'centered' here so it doesn't double-shift the viewport
    let inner_camera = CameraNode::new(vec![Box::new(rect.clone()), Box::new(circle.clone())])
        .with_centered(false);

    // Outer Camera: Handles global movement (centered)
    let outer_camera = CameraNode::new(vec![Box::new(inner_camera.clone())]).with_centered(true);

    // HUD Indicators (Outside cameras to show state)
    let outer_status = TextNode::default()
        .with_text("Outer Camera: Panning")
        .with_position(Vec2::new(20.0, 20.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_font_size(24.0)
        .with_fill(Color::rgb8(0x2e, 0xcc, 0x71)) // Green
        .with_opacity(0.0);

    let inner_status = TextNode::default()
        .with_text("Inner Camera: Zooming")
        .with_position(Vec2::new(20.0, 60.0))
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_font_size(24.0)
        .with_fill(Color::rgb8(0xf1, 0xc4, 0x0f)) // Yellow
        .with_opacity(0.0);

    project.scene.add(&outer_camera);

    project.scene.add(&outer_status);
    project.scene.add(&inner_status);

    // Animation Flow
    project.scene.video_timeline.add(loop_anim!(
        chain![
            // 1. Outer camera moves left
            all![
                outer_status.opacity.to(1.0, Duration::from_millis(300)),
                outer_camera
                    .position
                    .to(Vec2::new(-200.0, 0.0), Duration::from_secs(1)),
            ],
            outer_status.opacity.to(0.0, Duration::from_millis(300)),
            // 2. Inner camera zooms in
            all![
                inner_status.opacity.to(1.0, Duration::from_millis(300)),
                inner_camera.zoom.to(3.0, Duration::from_secs(1)),
            ],
            inner_status.opacity.to(0.0, Duration::from_millis(300)),
            // 3. Reset both
            all![
                outer_status.opacity.to(0.5, Duration::from_millis(300)),
                inner_status.opacity.to(0.5, Duration::from_millis(300)),
                outer_camera
                    .position
                    .to(Vec2::new(0.0, 0.0), Duration::from_secs(1)),
                inner_camera.zoom.to(1.0, Duration::from_secs(1)),
            ],
            all![
                outer_status.opacity.to(0.0, Duration::from_millis(300)),
                inner_status.opacity.to(0.0, Duration::from_millis(300)),
            ],
        ],
        None
    ));

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

examples/blur_demo.rs (line 11)

fn main() {
    let mut project = Project::default()
        .with_title("Blur Demo")
        .with_background(Color::rgb8(0x08, 0x08, 0x10))
        .close_on_finish();

    // Dot Grid Backdrop
    for x in 1..8 {
        for y in 1..6 {
            project.scene.add(
                Circle::default()
                    .with_position(Vec2::new(x as f32 * 100.0, y as f32 * 100.0))
                    .with_radius(1.5)
                    .with_fill(Color::rgb8(0x1a, 0x1a, 0x2e)),
            );
        }
    }

    // Title
    let title = TextNode::default()
        .with_position(Vec2::new(400.0, 60.0))
        .with_text("Universal Blur")
        .with_font_size(42.0)
        .with_fill(Color::rgb8(0xe2, 0xe8, 0xf0))
        .with_blur(0.0);
    project.scene.add(&title);

    // Shape
    let orb = Circle::default()
        .with_position(Vec2::new(180.0, 220.0))
        .with_radius(55.0)
        .with_fill(Color::rgb8(0xa7, 0x6b, 0xf1))
        .with_opacity(0.9)
        .with_blur(20.0);
    project.scene.add(&orb);

    // SVG
    let logo = SvgNode::default()
        .with_position(Vec2::new(620.0, 220.0))
        .with_path("./examples/images/motion-canvas-rs.svg")
        .with_size(Vec2::new(100.0, 100.0))
        .with_blur(0.0);
    project.scene.add(&logo);

    // Math
    let eq = MathNode::default()
        .with_position(Vec2::new(200.0, 400.0))
        .with_equation(r#"E = m c^2"#)
        .with_font_size(38.0)
        .with_fill(Color::rgb8(0xfb, 0xd3, 0x8d))
        .with_blur(0.0);
    project.scene.add(&eq);

    // Code
    let snippet = CodeNode::default()
        .with_position(Vec2::new(400.0, 400.0))
        .with_language("rs")
        .with_code("let blur = 20.0;\ncircle.with_blur(blur);")
        .with_font_size(18.0)
        .with_blur(0.0);
    project.scene.add(&snippet);

    // Group
    let card = GroupNode::new(vec![
        Box::new(
            Rect::default()
                .with_size(Vec2::new(200.0, 90.0))
                .with_radius(12.0)
                .with_fill(Color::rgba8(0x38, 0xa1, 0xdb, 0xbb)),
        ),
        Box::new(
            TextNode::default()
                .with_text("Group Blur")
                .with_font_size(22.0)
                .with_fill(Color::WHITE),
        ),
    ])
    .with_position(Vec2::new(400.0, 300.0))
    .with_blur(0.0);
    project.scene.add(&card);

    // Subtitle
    let sub = TextNode::default()
        .with_position(Vec2::new(400.0, 550.0))
        .with_text("Shape · SVG · Math · Code · Group")
        .with_font_size(16.0)
        .with_fill(Color::rgb8(0x64, 0x6e, 0x7a))
        .with_blur(0.0);
    project.scene.add(&sub);

    // Animation: staggered blur waves
    // Phase 1 — blur everything except the orb (which sharpens)
    // Phase 2 — restore, then blur the card and equation
    // Phase 3 — return to initial state
    project.scene.video_timeline.add(loop_anim!(
        chain![
            wait(BEAT),
            // Phase 1: orb sharpens, everything else softens
            all![
                orb.blur.to(0.0, FAST),
                logo.blur.to(18.0, FAST),
                eq.blur.to(14.0, FAST),
                snippet.blur.to(14.0, FAST),
                card.blur.to(12.0, FAST),
                title.blur.to(6.0, FAST),
                sub.blur.to(4.0, FAST),
            ],
            wait(BEAT),
            // Phase 2: card + equation sharp, rest blurred
            all![
                orb.blur.to(24.0, SLOW),
                logo.blur.to(0.0, SLOW),
                eq.blur.to(0.0, SLOW),
                snippet.blur.to(18.0, SLOW),
                card.blur.to(0.0, SLOW),
                title.blur.to(0.0, SLOW),
                sub.blur.to(0.0, SLOW),
            ],
            wait(BEAT),
            // Phase 3: return to opening state
            all![
                orb.blur.to(20.0, FAST),
                logo.blur.to(0.0, FAST),
                eq.blur.to(0.0, FAST),
                snippet.blur.to(0.0, FAST),
                card.blur.to(0.0, FAST),
                title.blur.to(0.0, FAST),
                sub.blur.to(0.0, FAST),
            ],
        ],
        None,
    ));

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

examples/mask_demo.rs (line 77)

fn main() {
    let mut project = Project::default()
        .with_dimensions(1280, 720)
        .with_fps(60)
        .with_title("Mask Demo")
        .with_background(Color::rgb8(0x0b, 0x0f, 0x19))
        .close_on_finish();

    // Dot grid
    for x in 1..26 {
        for y in 1..15 {
            project.scene.add(
                Circle::default()
                    .with_position(Vec2::new(x as f32 * 50.0, y as f32 * 50.0))
                    .with_radius(1.0)
                    .with_fill(Color::rgb8(0x22, 0x2e, 0x4a)),
            );
        }
    }

    // Title
    project.scene.add(
        TextNode::default()
            .with_position(Vec2::new(640.0, 50.0))
            .with_text("Masking")
            .with_font_size(36.0)
            .with_fill(Color::rgb8(0xf8, 0xfa, 0xfc)),
    );

    // Mode label (animated)
    let label = TextNode::default()
        .with_position(Vec2::new(640.0, 100.0))
        .with_text("Intersect (Source In)")
        .with_font_size(20.0)
        .with_fill(Color::rgb8(0x38, 0xbd, 0xf8));
    project.scene.add(&label);

    // ── Sequential: single full-size mask ──
    let spot = Circle::default()
        .with_position(Vec2::new(-250.0, 0.0))
        .with_radius(120.0)
        .with_fill(Color::WHITE);

    let big = MaskNode::new(
        Box::new(spot.clone()),
        Box::new(make_source(500.0, 300.0, 44.0)),
    )
    .with_position(Vec2::new(640.0, 380.0))
    .with_mode(MaskMode::Intersect);
    project.scene.add(&big);

    // ── Side-by-side: 4 small panels (initially hidden) ──
    let xs: [f32; 4] = [250.0, 510.0, 770.0, 1030.0];
    let sy = 380.0;

    let (s0, p0, t0) = make_panel(
        &mut project,
        xs[0],
        sy,
        MaskMode::Intersect,
        "Intersect",
        Color::rgb8(0x38, 0xbd, 0xf8),
    );
    let (s1, p1, t1) = make_panel(
        &mut project,
        xs[1],
        sy,
        MaskMode::Subtract,
        "Subtract",
        Color::rgb8(0xf4, 0x3f, 0x5e),
    );
    let (s2, p2, t2) = make_panel(
        &mut project,
        xs[2],
        sy,
        MaskMode::Exclude,
        "Exclude",
        Color::rgb8(0xa8, 0x55, 0xf7),
    );
    let (s3, p3, t3) = make_panel(
        &mut project,
        xs[3],
        sy,
        MaskMode::Union,
        "Union",
        Color::rgb8(0x10, 0xb9, 0x81),
    );

    // ── Timeline ──
    project.scene.video_timeline.add(loop_anim!(
        chain![
            wait(BEAT),
            // --- Intersect: slide left→right ---
            spot.position.to(Vec2::new(250.0, 0.0), SLIDE),
            wait(BEAT),
            // reset spot, switch to Subtract
            all![
                spot.position.to(Vec2::new(-250.0, 0.0), Duration::ZERO),
                label
                    .text
                    .to("Subtract (Source Out)".into(), Duration::ZERO),
                label
                    .fill_paint
                    .to(Paint::Solid(Color::rgb8(0xf4, 0x3f, 0x5e)), Duration::ZERO),
                big.mode.to(MaskMode::Subtract, Duration::ZERO),
            ],
            wait(BEAT),
            // --- Subtract: slide left→right ---
            spot.position.to(Vec2::new(250.0, 0.0), SLIDE),
            wait(BEAT),
            // reset spot, switch to Exclude
            all![
                spot.position.to(Vec2::new(-250.0, 0.0), Duration::ZERO),
                label.text.to("Exclude (XOR)".into(), Duration::ZERO),
                label
                    .fill_paint
                    .to(Paint::Solid(Color::rgb8(0xa8, 0x55, 0xf7)), Duration::ZERO),
                big.mode.to(MaskMode::Exclude, Duration::ZERO),
            ],
            wait(BEAT),
            // --- Exclude: slide left→right ---
            spot.position.to(Vec2::new(250.0, 0.0), SLIDE),
            wait(BEAT),
            // reset spot, switch to Union
            all![
                spot.position.to(Vec2::new(-250.0, 0.0), Duration::ZERO),
                label.text.to("Union (Source Over)".into(), Duration::ZERO),
                label
                    .fill_paint
                    .to(Paint::Solid(Color::rgb8(0x10, 0xb9, 0x81)), Duration::ZERO),
                big.mode.to(MaskMode::Union, Duration::ZERO),
            ],
            wait(BEAT),
            // --- Union: slide left→right ---
            spot.position.to(Vec2::new(250.0, 0.0), SLIDE),
            wait(BEAT),
            // --- Side-by-side: show all 4, hide big ---
            all![
                big.opacity.to(0.0, Duration::ZERO),
                label.text.to("All Modes".into(), Duration::ZERO),
                label
                    .fill_paint
                    .to(Paint::Solid(Color::rgb8(0xe2, 0xe8, 0xf0)), Duration::ZERO),
                p0.opacity.to(1.0, Duration::ZERO),
                p1.opacity.to(1.0, Duration::ZERO),
                p2.opacity.to(1.0, Duration::ZERO),
                p3.opacity.to(1.0, Duration::ZERO),
                t0.opacity.to(1.0, Duration::ZERO),
                t1.opacity.to(1.0, Duration::ZERO),
                t2.opacity.to(1.0, Duration::ZERO),
                t3.opacity.to(1.0, Duration::ZERO),
            ],
            wait(BEAT),
            // All 4 spots slide left→right simultaneously
            all![
                s0.position.to(Vec2::new(110.0, 0.0), SLIDE),
                s1.position.to(Vec2::new(110.0, 0.0), SLIDE),
                s2.position.to(Vec2::new(110.0, 0.0), SLIDE),
                s3.position.to(Vec2::new(110.0, 0.0), SLIDE),
            ],
            wait(BEAT),
            // --- Reset everything for loop ---
            all![
                // Hide small panels
                p0.opacity.to(0.0, Duration::ZERO),
                p1.opacity.to(0.0, Duration::ZERO),
                p2.opacity.to(0.0, Duration::ZERO),
                p3.opacity.to(0.0, Duration::ZERO),
                t0.opacity.to(0.0, Duration::ZERO),
                t1.opacity.to(0.0, Duration::ZERO),
                t2.opacity.to(0.0, Duration::ZERO),
                t3.opacity.to(0.0, Duration::ZERO),
                // Reset small spots
                s0.position.to(Vec2::new(-110.0, 0.0), Duration::ZERO),
                s1.position.to(Vec2::new(-110.0, 0.0), Duration::ZERO),
                s2.position.to(Vec2::new(-110.0, 0.0), Duration::ZERO),
                s3.position.to(Vec2::new(-110.0, 0.0), Duration::ZERO),
                // Restore big mask
                big.opacity.to(1.0, Duration::ZERO),
                big.mode.to(MaskMode::Intersect, Duration::ZERO),
                spot.position.to(Vec2::new(-250.0, 0.0), Duration::ZERO),
                label
                    .text
                    .to("Intersect (Source In)".into(), Duration::ZERO),
                label
                    .fill_paint
                    .to(Paint::Solid(Color::rgb8(0x38, 0xbd, 0xf8)), Duration::ZERO),
            ],
        ],
        None
    ));

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

examples/physics_demo.rs (line 724)

fn main() {
    let mut project = Project::default()
        .with_dimensions(W, H)
        .with_title("Physics Demo")
        .with_background(BG)
        .close_on_finish();

    // ── Build all scenes ──
    let (p1, t1, s1) = build_scene1();
    let (p2, t2, s2, labels2) = build_scene2();
    let (p3, t3, s3, labels3) = build_scene3();
    let (p4, t4, s4) = build_scene4();
    let (p5, t5, s5, time5_var, links5) = build_scene5();
    let (p6, t6, s6) = build_scene6();
    let (p7, t7, s7, _cube_refs7, labels7, bindings7) = build_scene7();
    let (p8, t8, s8, text8, balls8, status8) = build_scene8();
    let (p9, t9, s9) = build_scene9();
    let (p10, t10, s10) = build_scene10();

    // ── Add all to scene (all invisible) ──
    project.scene.add(&p1);
    project.scene.add(&t1);
    project.scene.add(&s1);

    project.scene.add(&p2);
    project.scene.add(&t2);
    project.scene.add(&s2);
    let labels2_c: Vec<_> = labels2
        .iter()
        .map(|l| {
            project.scene.add(l);
            l.clone()
        })
        .collect();

    project.scene.add(&p3);
    project.scene.add(&t3);
    project.scene.add(&s3);
    let labels3_c: Vec<_> = labels3
        .iter()
        .map(|l| {
            project.scene.add(l);
            l.clone()
        })
        .collect();

    project.scene.add(&p4);
    project.scene.add(&t4);
    project.scene.add(&s4);

    project.scene.add(&p5);
    project.scene.add(&t5);
    project.scene.add(&s5);

    for link in links5 {
        project.scene.add(link);
    }

    project.scene.add(&p6);
    project.scene.add(&t6);
    project.scene.add(&s6);

    project.scene.add(&p7);
    project.scene.add(&t7);
    project.scene.add(&s7);
    let labels7_c: Vec<_> = labels7
        .iter()
        .map(|l| {
            project.scene.add(l);
            l.clone()
        })
        .collect();
    for binding in bindings7 {
        project.scene.add(binding);
    }

    project.scene.add(&p8);
    project.scene.add(&t8);
    project.scene.add(&s8);
    project.scene.add(&status8);

    project.scene.add(&p9);
    project.scene.add(&t9);
    project.scene.add(&s9);

    project.scene.add(&p10);
    project.scene.add(&t10);
    project.scene.add(&s10);

    // ── Timeline: one scene at a time ──
    project.scene.video_timeline.add(chain![
        // Scene 1: Gravity
        t1.opacity.to(1.0, FADE),
        wait!(1),
        all![p1.opacity.to(1.0, FADE), s1.opacity.to(1.0, FADE),],
        wait!(4.0),
        all![
            p1.opacity.to(0.0, FADE),
            t1.opacity.to(0.0, FADE),
            s1.opacity.to(0.0, FADE),
        ],
        // Scene 2: Bounciness
        t2.opacity.to(1.0, FADE),
        wait!(1),
        all![
            p2.opacity.to(1.0, FADE),
            s2.opacity.to(1.0, FADE),
            labels2_c[0].opacity.to(1.0, FADE),
            labels2_c[1].opacity.to(1.0, FADE),
            labels2_c[2].opacity.to(1.0, FADE),
        ],
        wait!(5.0),
        all![
            p2.opacity.to(0.0, FADE),
            s2.opacity.to(0.0, FADE),
            t2.opacity.to(0.0, FADE),
            labels2_c[0].opacity.to(0.0, FADE),
            labels2_c[1].opacity.to(0.0, FADE),
            labels2_c[2].opacity.to(0.0, FADE),
        ],
        // Scene 3: Shapes
        t3.opacity.to(1.0, FADE),
        wait!(1),
        all![
            p3.opacity.to(1.0, FADE),
            s3.opacity.to(1.0, FADE),
            labels3_c[0].opacity.to(1.0, FADE),
            labels3_c[1].opacity.to(1.0, FADE),
        ],
        wait!(5.0),
        all![
            p3.opacity.to(0.0, FADE),
            t3.opacity.to(0.0, FADE),
            s3.opacity.to(0.0, FADE),
            labels3_c[0].opacity.to(0.0, FADE),
            labels3_c[1].opacity.to(0.0, FADE),
        ],
        // Scene 4: Stacking
        t4.opacity.to(1.0, FADE),
        wait!(1),
        all![p4.opacity.to(1.0, FADE), s4.opacity.to(1.0, FADE),],
        wait!(5.0),
        all![
            p4.opacity.to(0.0, FADE),
            t4.opacity.to(0.0, FADE),
            s4.opacity.to(0.0, FADE),
        ],
        // Scene 5: Kinematic Containers
        t5.opacity.to(1.0, FADE),
        wait!(1),
        all![
            p5.opacity.to(1.0, FADE),
            s5.opacity.to(1.0, FADE),
            time5_var.to(4.0, Duration::from_secs(4)),
        ],
        wait!(4.0),
        all![
            p5.opacity.to(0.0, FADE),
            t5.opacity.to(0.0, FADE),
            s5.opacity.to(0.0, FADE),
        ],
        // Scene 6: Zero Gravity
        t6.opacity.to(1.0, FADE),
        wait!(1),
        all![p6.opacity.to(1.0, FADE), s6.opacity.to(1.0, FADE),],
        wait!(5.0),
        all![
            p6.opacity.to(0.0, FADE),
            t6.opacity.to(0.0, FADE),
            s6.opacity.to(0.0, FADE),
        ],
        // Scene 7: Friction
        t7.opacity.to(1.0, FADE),
        wait!(1),
        all![
            p7.opacity.to(1.0, FADE),
            s7.opacity.to(1.0, FADE),
            labels7_c[0].opacity.to(1.0, FADE),
            labels7_c[1].opacity.to(1.0, FADE),
            labels7_c[2].opacity.to(1.0, FADE),
        ],
        wait!(3.0),
        all![
            p7.opacity.to(0.0, FADE),
            t7.opacity.to(0.0, FADE),
            s7.opacity.to(0.0, FADE),
            labels7_c[0].opacity.to(0.0, FADE),
            labels7_c[1].opacity.to(0.0, FADE),
            labels7_c[2].opacity.to(0.0, FADE),
        ],
        // Scene 8: Mode Switching — full demonstration
        t8.opacity.to(1.0, FADE),
        wait!(1),
        all![
            p8.opacity.to(1.0, FADE),
            s8.opacity.to(1.0, FADE),
            status8.opacity.to(1.0, FADE),
        ],
        // ── Phase 1: Disabled — signal-driven tweens ──
        status8
            .text
            .to("mode: Disabled".to_string(), Duration::from_millis(1)),
        wait!(0.5),
        // Slide text left
        text8
            .position
            .to(Vec2::new(CX - 200.0, 270.0), Duration::from_millis(800)),
        wait!(0.3),
        // Slide text right
        text8
            .position
            .to(Vec2::new(CX + 200.0, 270.0), Duration::from_millis(800)),
        wait!(0.3),
        // Slide back to center
        text8
            .position
            .to(Vec2::new(CX, 270.0), Duration::from_millis(600)),
        wait!(1.0),
        // Enable balls as Dynamic so they fall onto the disabled text
        all![
            balls8[0]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[1]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[2]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[3]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
        ],
        wait!(3.0),
        // ── Phase 2: Dynamic — physics takes over, text falls ──
        status8
            .text
            .to("mode: Dynamic".to_string(), Duration::from_millis(1)),
        text8
            .mode
            .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
        wait!(1.0),
        // Enable balls as Dynamic so they fall onto the dynamic text
        all![
            balls8[4]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[5]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[6]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[7]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
        ],
        wait!(3.0),
        // ── Phase 3: Kinematic — text becomes a platform, balls drop onto it ──
        status8
            .text
            .to("mode: Kinematic".to_string(), Duration::from_millis(1)),
        text8
            .mode
            .to(PhysicsMode::Kinematic, Duration::from_millis(1)),
        // Tween text up to act as a shelf
        text8
            .position
            .to(Vec2::new(CX, 300.0), Duration::from_millis(800)),
        // Enable remaining balls as Dynamic so they fall onto the kinematic text
        all![
            balls8[8]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[9]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[10]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
            balls8[11]
                .mode
                .to(PhysicsMode::Dynamic, Duration::from_millis(1)),
        ],
        wait!(2.0),
        // Oscillate the kinematic shelf to show balls react
        text8
            .position
            .to(Vec2::new(CX - 100.0, 280.0), Duration::from_millis(600)),
        text8
            .position
            .to(Vec2::new(CX + 100.0, 320.0), Duration::from_millis(600)),
        text8
            .position
            .to(Vec2::new(CX, 300.0), Duration::from_millis(400)),
        wait!(2.0),
        all![
            p8.opacity.to(0.0, FADE),
            t8.opacity.to(0.0, FADE),
            s8.opacity.to(0.0, FADE),
            status8.opacity.to(0.0, FADE),
        ],
        // Scene 9: Custom Colliders
        t9.opacity.to(1.0, FADE),
        wait!(1),
        all![p9.opacity.to(1.0, FADE), s9.opacity.to(1.0, FADE),],
        wait!(6.0),
        all![
            p9.opacity.to(0.0, FADE),
            t9.opacity.to(0.0, FADE),
            s9.opacity.to(0.0, FADE),
        ],
        // Scene 10: Final Example
        t10.opacity.to(1.0, FADE),
        wait!(1),
        all![p10.opacity.to(1.0, FADE), s10.opacity.to(1.0, FADE),],
        wait!(10.0),
        all![
            p10.opacity.to(0.0, FADE),
            t10.opacity.to(0.0, FADE),
            s10.opacity.to(0.0, FADE),
        ],
        wait!(1),
    ]);

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

Additional examples can be found in:

• examples/world_map.rs
• examples/news_feed.rs
• examples/explainer.rs

pub fn with_close_on_finish(self, close: bool) -> Self

Sets whether the window should close automatically on finish.

pub fn close_on_finish(self) -> Self

Convenience method to enable automatic window closing on finish.

Examples found in repository

examples/math_animation.rs (line 10)

fn main() {
    // 1. Initialize Project
    let mut project = Project::default()
        .with_fps(60)
        .with_dimensions(500, 500)
        .with_title("Math Animation")
        .close_on_finish();

    // 2. Create MathNode (Typst syntax)
    let tex = MathNode::default()
        .with_position(Vec2::new(250.0, 250.0))
        .with_equation("y = a x^2")
        .with_font_size(48.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2));
    project.scene.add(&tex);

    // 3. Define Animation Sequence
    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                tex.tex("y = a x^2 + b x", Duration::from_secs(1)),
                tex.tex("e^(i pi) + 1 = 0", Duration::from_secs(1)),
                tex.tex("y = a x^2", Duration::from_secs(1)),
            ]
        },
        None,
    ));

    // 4. Run interactive preview
    project.show().expect("Failed to render");
}

examples/color_interpolation.rs (line 10)

fn main() {
    let mut project = Project::default()
        .with_dimensions(300, 300)
        .with_fps(60)
        .with_title("Color Interpolation")
        .with_cache(true)
        .close_on_finish();

    let circle = Circle::default()
        .with_position(Vec2::new(150.0, 150.0))
        .with_radius(50.0)
        .with_fill(Color::RED); // Red

    project.scene.add(&circle);

    let duration = Duration::from_secs(1);

    project.scene.video_timeline.add(loop_anim(
        move || {
            chain![
                circle.fill_paint.to(Paint::Solid(Color::YELLOW), duration),
                circle.fill_paint.to(Paint::Solid(Color::GREEN), duration),
                circle.fill_paint.to(Paint::Solid(Color::BLUE), duration),
                circle.fill_paint.to(Paint::Solid(Color::RED), duration),
            ]
        },
        None,
    ));

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

examples/getting_started.rs (line 10)

fn main() {
    // 1. Initialize the Project
    let mut project = Project::default()
        .with_fps(60)
        .with_cache(true)
        .with_title("Getting Started")
        .close_on_finish();

    // 2. Define Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 450.0))
        .with_text("Hello Rust")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White-ish

    // 3. Add Nodes to the Scene
    project.scene.add(&circle);
    project.scene.add(&text);

    // 4. Add Animations to the Timeline
    project.scene.video_timeline.add(all![
        circle.radius.to(100.0, Duration::from_secs(1)),
        text.position
            .to(Vec2::new(400.0, 500.0), Duration::from_secs(1)),
    ]);

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

examples/code_advanced.rs (line 7)

fn main() {
    let mut project = Project::default()
        .with_title("Code Advanced")
        .close_on_finish();

    let code = CodeNode::default()
        .with_position(Vec2::new(50.0, 50.0))
        .with_code(
            r#"fn main() {
    println!("Hello");
}"#,
        )
        .with_language("rust")
        .with_font_size(32.0)
        .with_dim_opacity(0.1);

    project.scene.add(&code);

    project.scene.video_timeline.add(sequence![
        Duration::from_secs(1),
        // 1. Select line 2 (println) - using 1-based index string
        code.select_string("2", Duration::from_millis(300)),
        // 2. Select range 1-2
        code.select_string("1-2", Duration::from_millis(300)),
        // 3. Append a comment
        code.append("\n// Done!", Duration::from_millis(300)),
        // 3. Reset selection
        code.select_lines(vec![], Duration::from_millis(300)),
        // 4. Prepend a header (Now natively lazy, no wrapper needed!)
        code.prepend("// My Script\n", Duration::from_millis(300)),
    ]);

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

examples/polygon.rs (line 5)

fn main() {
    let mut project = Project::default().with_title("Polygon").close_on_finish();

    // Create a regular pentagon
    let pentagon = Polygon::regular(5, 100.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)) // Red
        .with_position(Vec2::new(200.0, 300.0))
        .with_scale(0.0);

    // Create a custom triangle
    let triangle = Polygon::default()
        .with_position(Vec2::new(500.0, 300.0))
        .with_points(vec![
            Vec2::new(0.0, -100.0),
            Vec2::new(100.0, 100.0),
            Vec2::new(-100.0, 100.0),
        ])
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)) // Blue
        .with_stroke(Color::WHITE, 4.0);

    project.scene.add(&pentagon);
    project.scene.add(&triangle);

    // Animate rotation and opacity
    project.scene.video_timeline.add(all![
        chain![
            pentagon.scale.to(Vec2::ONE, Duration::from_secs(1)),
            pentagon
                .rotation
                .to(std::f32::consts::PI, Duration::from_secs(2)),
            pentagon.scale.to(-Vec2::ONE, Duration::from_secs(1)),
        ],
        chain![
            triangle.opacity.to(1.0, Duration::from_secs(1)),
            triangle
                .position
                .to(Vec2::new(500.0, 300.0), Duration::from_secs(1)),
            triangle
                .rotation
                .to(360.0_f32.to_radians(), Duration::from_secs(1))
        ],
    ]);

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

examples/export.rs (line 11)

fn main() {
    // 1. Initialize for Export
    let mut project = Project::default()
        .with_fps(30)
        .with_ffmpeg(true)
        .with_title("Export")
        .with_output_path("output")
        .close_on_finish();

    // 2. Setup Nodes
    let circle = Circle::default()
        .with_position(Vec2::new(400.0, 300.0))
        .with_radius(50.0)
        .with_fill(Color::rgb8(0x68, 0xab, 0xdf)); // Blue

    let text = TextNode::default()
        .with_position(Vec2::new(400.0, 50.0))
        .with_text("Export Demo")
        .with_font_size(40.0)
        .with_fill(Color::rgb8(0xf2, 0xf2, 0xf2)); // White

    project.scene.add(&circle);
    project.scene.add(&text);

    // 3. Define Animations (Color and Font Size)
    project.scene.video_timeline.add(all![
        // Circle color and size
        circle
            .fill_paint
            .to(
                Paint::Solid(Color::rgb8(0xf2, 0xf2, 0xf2)),
                Duration::from_secs(2)
            )
            .ease(easings::quad_in_out),
        circle
            .radius
            .to(150.0, Duration::from_secs(2))
            .ease(easings::elastic_out),
        // Text font size
        text.font_size
            .to(50.0, Duration::from_secs(2))
            .ease(easings::cubic_out),
    ]);

    // 4. Export (Renders frames and combines them into out.mkv)
    println!("Starting export to {}...", project.output_path.display());
    project.export().expect("Failed to export");
}

Additional examples can be found in:

• examples/audio_demo.rs
• examples/images.rs
• examples/group_animation.rs
• examples/grid.rs
• examples/camera_demo.rs
• examples/code_animation.rs
• examples/nested_cameras.rs
• examples/math_code.rs
• examples/easing_scope.rs
• examples/signals.rs
• examples/blur_demo.rs
• examples/advanced_flow.rs
• examples/anchors.rs
• examples/mask_demo.rs
• examples/physics_demo.rs
• examples/world_map.rs
• examples/news_feed.rs
• examples/gradient_demo.rs
• examples/explainer.rs

pub fn seek_to(&mut self, target_time: Duration)

Resets the scene and advances it to the specified target time.

This is used for seeking in the interactive preview.

pub fn get_frame_name(&self, frame_index: u32) -> String

Returns the sanitized filename for a specific frame index.

Trait Implementations

impl Default for Project

fn default() -> Self

Returns the “default value” for a type.

impl ProjectRuntimeExt for Project

fn show(self) -> Result<()>

Opens the playback window for the project.

fn export(&mut self) -> Result<()>

Starts an export session for the project.