Struct Color 

pub struct Color {
    pub r: u8,
    pub g: u8,
    pub b: u8,
    pub a: u8,
}

32-bit RGBA color.

Fields

r: u8

Red component.

g: u8

Green component.

b: u8

Blue component.

a: u8

Alpha component.

Implementations

impl Color

pub const fn rgb8(r: u8, g: u8, b: u8) -> Color

Creates a new RGB color with 255 alpha.

Examples found in repository

examples/explainer.rs (line 6)

const BG: Color = Color::rgb8(0x0e, 0x0e, 0x12);
const WHITE: Color = Color::rgb8(0xf0, 0xf0, 0xf0);
const DIM: Color = Color::rgb8(0x55, 0x55, 0x66);
const ACCENT: Color = Color::rgb8(0x68, 0xab, 0xdf);
const RED: Color = Color::rgb8(0xe1, 0x32, 0x38);
const YELLOW: Color = Color::rgb8(0xe6, 0xa7, 0x00);
const GREEN: Color = Color::rgb8(0x25, 0xc2, 0x81);
const TEAL: Color = Color::rgb8(0x20, 0xb2, 0xaa);

const CANVAS_W: u32 = 1280;
const CANVAS_H: u32 = 720;
const LEFT: f32 = 40.0;

fn ms(n: u64) -> Duration {
    Duration::from_millis(n)
}
fn secs(n: u64) -> Duration {
    Duration::from_secs(n)
}

// ── Text Helpers ───────────────────────────────────────────────────────────
fn title(text: &str, y: f32) -> TextNode {
    TextNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(LEFT, y))
        .with_text(text)
        .with_font_size(36.0)
        .with_fill(ACCENT)
        .with_font(FONT)
        .with_opacity(0.0)
}
fn h2(text: &str, y: f32) -> TextNode {
    TextNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(LEFT, y))
        .with_text(text)
        .with_font_size(22.0)
        .with_fill(WHITE)
        .with_font(FONT)
        .with_opacity(0.0)
}
fn body(text: &str, y: f32) -> TextNode {
    TextNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(LEFT, y))
        .with_text(text)
        .with_font_size(17.0)
        .with_fill(Color::rgb8(0xcc, 0xcc, 0xdd))
        .with_font(FONT)
        .with_opacity(0.0)
}

examples/news_feed.rs (line 7)

const BG: Color = Color::rgb8(0x0e, 0x0e, 0x12);
const WHITE: Color = Color::rgb8(0xf0, 0xf0, 0xf0);
const DIM: Color = Color::rgb8(0x55, 0x55, 0x66);
const ACCENT: Color = Color::rgb8(0x68, 0xab, 0xdf);
const YELLOW: Color = Color::rgb8(0xe6, 0xa7, 0x00);
const GREEN: Color = Color::rgb8(0x25, 0xc2, 0x81);
const RED: Color = Color::rgb8(0xe1, 0x32, 0x38);

fn show(opacity: &Signal<f32>, d: Duration) -> Box<dyn Animation> {
    opacity.to(1.0, d).ease(easings::cubic_out).into()
}

fn hide(opacity: &Signal<f32>, d: Duration) -> Box<dyn Animation> {
    opacity.to(0.0, d).ease(easings::cubic_in).into()
}

// Helper for boxes to ensure they start completely hidden and slightly scaled down
fn create_box(label: &str, center: Vec2, size: Vec2) -> (Rect, TextNode) {
    let box_center = Vec2::new(center.x, center.y);

    let text_pos = Vec2::new(center.x, center.y);

    let r = Rect::default()
        .with_position(box_center)
        .with_size(size)
        .with_scale(0.95)
        .with_opacity(0.0)
        .with_radius(8.0)
        .with_stroke(ACCENT, 2.0)
        .with_fill(Color::rgb8(0x26, 0x26, 0x2a));

    let t = TextNode::default()
        .with_position(text_pos)
        .with_text(label)
        .with_font_size(18.0)
        .with_font("JetBrains Mono")
        .with_fill(WHITE)
        .with_scale(0.95)
        .with_opacity(0.0);

    (r, t)
}

examples/physics_demo.rs (line 5)

const BG: Color = Color::rgb8(0x0f, 0x0f, 0x14);
const FLOOR_COLOR: Color = Color::rgb8(0x2a, 0x2d, 0x3a);
const ACCENT_RED: Color = Color::rgb8(0xe1, 0x32, 0x38);
const ACCENT_BLUE: Color = Color::rgb8(0x68, 0xab, 0xdf);
const ACCENT_YELLOW: Color = Color::rgb8(0xe6, 0xa7, 0x00);
const ACCENT_TEAL: Color = Color::rgb8(0x20, 0xb2, 0xaa);
const ACCENT_PURPLE: Color = Color::rgb8(0x9b, 0x59, 0xb6);
const ACCENT_EMERALD: Color = Color::rgb8(0x25, 0xc2, 0x81);
const TEXT_DIM: Color = Color::rgb8(0x88, 0x88, 0x99);
const TEXT_BRIGHT: Color = Color::rgb8(0xe8, 0xe8, 0xf0);
const WALL_COLOR: Color = Color::rgb8(0x3a, 0x3d, 0x4a);

examples/gradient_demo.rs (line 80)

const CYAN: Color = Color::rgb8(0x00, 0xf2, 0xfe);
const INDIGO: Color = Color::rgb8(0x4f, 0x46, 0xe5);
const CORAL: Color = Color::rgb8(0xff, 0x5e, 0x3a);
const PINK: Color = Color::rgb8(0xff, 0x2a, 0x68);
const VIOLET: Color = Color::rgb8(0x92, 0x3c, 0xff);
const FUCHSIA: Color = Color::rgb8(0xff, 0x00, 0x7f);
const BG: Color = Color::rgb8(0x0a, 0x0a, 0x12);
const GRID_COLOR: Color = Color::rgba8(0x20, 0x20, 0x38, 60);
const LABEL: Color = Color::rgb8(0x99, 0x99, 0xbb);

// Timing
const FADE_IN: Duration = Duration::from_millis(500);
const FADE_OUT: Duration = Duration::from_millis(300);
const MORPH: Duration = Duration::from_millis(1800);

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

examples/world_map.rs (line 138)

const SKY_BG: Color = Color::rgb8(0xcf, 0xe5, 0xe8);

examples/math_animation.rs (line 17)

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

Additional examples can be found in:

• examples/getting_started.rs
• examples/mask_demo.rs
• examples/polygon.rs
• examples/export.rs
• examples/audio_demo.rs
• examples/shapes.rs
• examples/camera_demo.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

pub const fn rgba8(r: u8, g: u8, b: u8, a: u8) -> Color

Creates a new RGBA color.

Examples found in repository

examples/gradient_demo.rs (line 87)

const GRID_COLOR: Color = Color::rgba8(0x20, 0x20, 0x38, 60);
const LABEL: Color = Color::rgb8(0x99, 0x99, 0xbb);

// Timing
const FADE_IN: Duration = Duration::from_millis(500);
const FADE_OUT: Duration = Duration::from_millis(300);
const MORPH: Duration = Duration::from_millis(1800);

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

examples/explainer.rs (line 90)

fn hline(y: f32) -> Line {
    Line::default()
        .with_start(Vec2::new(LEFT, y))
        .with_end(Vec2::new(LEFT, y))
        .with_stroke(Color::rgba8(255, 255, 255, 25), 1.0)
}
// Shorthand for show/hide
fn show(opacity: &Signal<f32>, d: Duration) -> Box<dyn Animation> {
    opacity.to(1.0, d).ease(easings::cubic_out).into()
}
fn hide(opacity: &Signal<f32>, d: Duration) -> Box<dyn Animation> {
    opacity.to(0.0, d).ease(easings::cubic_in).into()
}

fn main() {
    let mut project = Project::default()
        .with_dimensions(CANVAS_W, CANVAS_H)
        .with_fps(60)
        .with_title("Explainer")
        .with_background(BG)
        .close_on_finish();

    // =====================================================================
    //  S1: TITLE CARD
    // =====================================================================
    let s1_line = hline(100.0);
    let s1_title = TextNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(LEFT, 120.0))
        .with_text("motion-canvas-rs")
        .with_font_size(52.0)
        .with_fill(ACCENT)
        .with_font(FONT)
        .with_opacity(0.0);
    let s1_sub = h2("A GPU-Accelerated Vector Animation Engine", 185.0);
    let s1_built = body(
        "Built on Vello + Typst  —  Inspired by Motion Canvas",
        220.0,
    );
    let s1_desc = body(
        "This animation will teach you how the library works,",
        280.0,
    );
    let s1_desc2 = body(
        "from struct definitions to the GPU rendering pipeline.",
        305.0,
    );

    let s1_logo = SvgNode::default()
        .with_position(Vec2::new(1142.0, 543.0))
        .with_path("examples/images/motion-canvas-rs.svg")
        .with_scale(0.3)
        .with_size(Vec2::new(768.0, 768.0))
        .with_opacity(0.0);

    for n in [&s1_title, &s1_sub, &s1_built, &s1_desc, &s1_desc2] {
        project.scene.add(n);
    }
    project.scene.add(&s1_line);
    project.scene.add(&s1_logo);

    // =====================================================================
    //  S2: THE 5 STEPS
    // =====================================================================
    let s2_h = title("Every program follows 5 steps", 50.0);
    let steps = [
        "1. Create a Project       — your canvas settings",
        "2. Create Nodes           — shapes, text, images",
        "3. Add Nodes to Scene     — what gets drawn",
        "4. Animate the Timeline   — how things move",
        "5. Show or Export         — live window or video",
    ];
    let s2_texts: Vec<TextNode> = steps
        .iter()
        .enumerate()
        .map(|(i, s)| body(s, 120.0 + i as f32 * 35.0))
        .collect();

    project.scene.add(&s2_h);
    for t in &s2_texts {
        project.scene.add(t);
    }

    // =====================================================================
    //  S3: WHAT IS A STRUCT?  +  The Project struct
    // =====================================================================
    let s3_h = title("What is a 'struct'?", 50.0);
    let s3_explain = h2(
        "A struct is a container that groups related data together.",
        95.0,
    );
    let s3_analogy = body(
        "Think of it like a class in Python/JS, but it only holds data.",
        130.0,
    );

    let s3_code = code_block(
        "pub struct Project {
    pub width: u32,          // Canvas width in pixels
    pub height: u32,         // Canvas height in pixels
    pub fps: u32,            // Frames per second
    pub title: String,       // Window title
    pub scene: BaseScene,    // Holds nodes + timelines
    pub background_color: Color,
    pub close_on_finish: bool,
}",
        175.0,
    );

    let s3_note = note(
        "^ This is the actual Project struct from the library.",
        420.0,
    );
    let s3_note2 = body(
        "'pub' means public — anyone can read/write these fields.",
        455.0,
    );
    let s3_note3 = body(
        "u32 = unsigned 32-bit integer,  String = text,  bool = true/false",
        485.0,
    );

    for n in [
        &s3_h,
        &s3_explain,
        &s3_analogy,
        &s3_note,
        &s3_note2,
        &s3_note3,
    ] {
        project.scene.add(n);
    }
    project.scene.add(&s3_code);

    // =====================================================================
    //  S4: WHAT IS impl?  +  Builder pattern
    // =====================================================================
    let s4_h = title("What is 'impl'?", 50.0);
    let s4_explain = h2("impl adds methods (functions) to a struct.", 95.0);
    let s4_analogy = body(
        "Like adding methods to a class. Separated from the data.",
        130.0,
    );

    let s4_code = code_block(
        "impl Project {
    pub fn with_fps(mut self, fps: u32) -> Self {
        self.fps = fps;   // set the value
        self              // return yourself (builder pattern)
    }
    pub fn with_title(mut self, title: &str) -> Self {
        self.title = title.to_string();
        self
    }
}",
        175.0,
    );

    let s4_usage = body("Usage — chain calls to configure:", 430.0);
    let s4_usage_code = code_block(
        "let project = Project::default()
    .with_fps(60)
    .with_title(\"My Animation\")
    .with_dimensions(800, 600)
    .close_on_finish();",
        460.0,
    );

    let s4_note = note(
        "Each .with_*() returns 'self', so you can chain them.",
        590.0,
    );

    for n in [&s4_h, &s4_explain, &s4_analogy, &s4_usage, &s4_note] {
        project.scene.add(n);
    }
    project.scene.add(&s4_code);
    project.scene.add(&s4_usage_code);

    // =====================================================================
    //  S5: WHAT IS A TRAIT?  +  The Node trait
    // =====================================================================
    let s5_h = title("What is a 'trait'?", 50.0);
    let s5_explain = h2(
        "A trait is a contract — like an interface in Java/TypeScript.",
        95.0,
    );
    let s5_analogy = body(
        "Any type that implements a trait promises to provide those methods.",
        130.0,
    );

    let s5_code = code_block(
        "pub trait Node: Send + Sync + 'static {
    fn render(&self, scene: &mut Scene,
              parent_transform: Affine,
              parent_opacity: f32);
    fn update(&mut self, dt: Duration);
    fn state_hash(&self) -> u64;
    fn clone_node(&self) -> Box<dyn Node>;
}",
        175.0,
    );

    let s5_r = note(
        "render()     — draw yourself using current signal values",
        410.0,
    );
    let s5_u = note(
        "update(dt)   — called every frame (for per-frame logic)",
        435.0,
    );
    let s5_s = note(
        "state_hash() — returns a number that changes when you change",
        460.0,
    );
    let s5_c = note("clone_node() — make a deep copy of yourself", 485.0);
    let s5_every = body(
        "Circle, Rect, Line, TextNode, Polygon all implement Node.",
        530.0,
    );

    for n in [
        &s5_h,
        &s5_explain,
        &s5_analogy,
        &s5_r,
        &s5_u,
        &s5_s,
        &s5_c,
        &s5_every,
    ] {
        project.scene.add(n);
    }
    project.scene.add(&s5_code);

    // =====================================================================
    //  S6: NODE GALLERY  (visual demo)
    // =====================================================================
    let s6_h = title("The Built-in Nodes", 50.0);
    let s6_sub = body(
        "Each node uses the builder pattern and stores properties as Signals.",
        90.0,
    );

    let demo_c = Circle::default()
        .with_position(Vec2::new(120.0, 230.0))
        .with_radius(40.0)
        .with_fill(RED)
        .with_opacity(0.0);
    let demo_r = Rect::default()
        .with_position(Vec2::new(293.0, 230.0))
        .with_size(Vec2::new(80.0, 80.0))
        .with_fill(ACCENT)
        .with_radius(8.0)
        .with_opacity(0.0);
    let demo_l = Line::default()
        .with_start(Vec2::new(420.0, 200.0))
        .with_end(Vec2::new(510.0, 270.0))
        .with_stroke(WHITE, 3.0)
        .with_opacity(0.0);
    let demo_p = Polygon::regular(5, 40.0)
        .with_position(Vec2::new(606.0, 230.0))
        .with_fill(YELLOW)
        .with_opacity(0.0);
    let demo_t = TextNode::default()
        .with_position(Vec2::new(765.0, 230.0))
        .with_text("Abc")
        .with_font_size(36.0)
        .with_fill(GREEN)
        .with_font(FONT)
        .with_opacity(0.0);

    let lc = dim("Circle", 95.0, 285.0);
    let lr = dim("Rect", 280.0, 285.0);
    let ll = dim("Line", 445.0, 285.0);
    let lp = dim("Polygon", 580.0, 285.0);
    let lt = dim("TextNode", 735.0, 285.0);

    let s6_box_h = h2("Why Box<dyn Node>?", 340.0);
    let s6_box1 = body("The scene stores different node types in one list:", 375.0);
    let s6_box_code = code_block(
        "pub struct BaseScene {
    pub nodes: Vec<Box<dyn Node>>,  // a list of \"any Node\"
}
// 'Box' = heap-allocated,  'dyn Node' = any type implementing Node
// Like List<INode> in Java or Array<Node> in TypeScript
project.scene.add(circle);  // wrap + add",
        405.0,
    );

    for n in [&s6_h, &s6_sub, &lc, &lr, &ll, &lp, &lt, &s6_box_h, &s6_box1] {
        project.scene.add(n);
    }
    project.scene.add(&demo_c);
    project.scene.add(&demo_r);
    project.scene.add(&demo_l);
    project.scene.add(&demo_p);
    project.scene.add(&demo_t);
    project.scene.add(&s6_box_code);

    // =====================================================================
    //  S7: SIGNALS — The Reactive Core
    // =====================================================================
    let s7_h = title("Signals — The Reactive Core", 50.0);
    let s7_sub = h2("Every animatable property is a Signal<T>.", 95.0);

    let s7_code = code_block(
        "pub struct Signal<T> {
    pub data: Arc<Mutex<SignalData<T>>>,
}
pub struct SignalData<T> {
    pub value: T,  // the actual value (f32, Vec2, Color...)
}",
        140.0,
    );

    let s7_arc = note("Arc = shared pointer. Multiple owners, same data.", 310.0);
    let s7_mutex = note(
        "Mutex = lock. Only one thread reads/writes at a time.",
        335.0,
    );
    let s7_why = body(
        "Why? A node and its animation both need the same property:",
        380.0,
    );

    let s7_diagram_code = code_block(
        "let circle = Circle::default().with_radius(50.0);
// circle.radius is a Signal<f32>

circle.radius.to(100.0, Duration::from_secs(1));
// Creates a SignalTween with a CLONE of circle.radius
// Both point to the SAME underlying value (via Arc)

// The animation WRITES new values each frame
// The node READS them when rendering",
        420.0,
    );

    // Live demo circle
    let sig_demo = Circle::default()
        .with_position(Vec2::new(1000.0, 400.0))
        .with_radius(50.0)
        .with_fill(RED)
        .with_stroke(Color::rgba8(255, 255, 255, 50), 2.0)
        .with_opacity(0.0);
    let sig_lbl = dim("Live Signal demo", 900.0, 150.0);

    for n in [&s7_h, &s7_sub, &s7_arc, &s7_mutex, &s7_why, &sig_lbl] {
        project.scene.add(n);
    }
    project.scene.add(&s7_code);
    project.scene.add(&s7_diagram_code);
    project.scene.add(&sig_demo);

    // =====================================================================
    //  S8: SIGNAL TWEEN — How animations work per-frame
    // =====================================================================
    let s8_h = title("SignalTween — The Animation Engine", 50.0);
    let s8_sub = body(
        ".to() creates a SignalTween that interpolates over time:",
        90.0,
    );

    let s8_code = code_block(
        "pub struct SignalTween<T> {
    data: Arc<Mutex<SignalData<T>>>,  // shared ref to signal
    start_value: Option<T>,           // captured on FIRST update (lazy!)
    target_value: Option<T>,          // where we're going
    duration: Duration,               // how long
    elapsed: Duration,                // how much time passed
    easing: fn(f32) -> f32,           // curve function
}",
        125.0,
    );

    let s8_how = h2("Each frame update:", 340.0);
    let s8_steps = [
        "1. elapsed += dt",
        "2. t_linear = elapsed / duration          (0.0 to 1.0)",
        "3. t_eased  = easing(t_linear)            (curved)",
        "4. value    = lerp(start, target, t)      (interpolate)",
        "5. Write value into Signal                (node sees it)",
        "6. If elapsed >= duration: finished!      (return leftover dt)",
    ];
    let s8_step_texts: Vec<TextNode> = s8_steps
        .iter()
        .enumerate()
        .map(|(i, s)| body(s, 370.0 + i as f32 * 28.0))
        .collect();

    let s8_lazy = note(
        "start_value is captured lazily — so chained tweens read the",
        570.0,
    );
    let s8_lazy2 = note(
        "correct value at their actual start time, not creation time.",
        590.0,
    );

    // Progress bar
    let prog_bg = Rect::default()
        .with_position(Vec2::new(895.0, 150.0))
        .with_size(Vec2::new(400.0, 16.0))
        .with_fill(Color::rgba8(255, 255, 255, 15))
        .with_radius(8.0)
        .with_opacity(0.0);
    let prog_fill = Rect::default()
        .with_position(Vec2::new(695.0, 154.0))
        .with_anchor(Vec2::new(-1.0, 0.5))
        .with_size(Vec2::new(0.0, 16.0))
        .with_fill(ACCENT)
        .with_radius(8.0)
        .with_opacity(0.0);
    let plbl0 = dim("t=0", 700.0, 172.0);
    let plbl1 = dim("t=1", 1070.0, 172.0);
    let tween_ball = Circle::default()
        .with_position(Vec2::new(900.0, 430.0))
        .with_radius(30.0)
        .with_fill(RED)
        .with_opacity(0.0);
    let tween_lbl = dim("radius animating: 30 -> 80", 760.0, 220.0);

    for n in [
        &s8_h, &s8_sub, &s8_how, &s8_lazy, &s8_lazy2, &plbl0, &plbl1, &tween_lbl,
    ] {
        project.scene.add(n);
    }
    project.scene.add(&s8_code);
    for t in &s8_step_texts {
        project.scene.add(t);
    }
    project.scene.add(&prog_bg);
    project.scene.add(&prog_fill);
    project.scene.add(&tween_ball);

    // =====================================================================
    //  S9: TWEENABLE + EASINGS
    // =====================================================================
    let s9_h = title("Tweenable — What Can Be Animated", 50.0);
    let s9_code = code_block(
        "pub trait Tweenable: Clone + Send + Sync {
    fn interpolate(a: &Self, b: &Self, t: f32) -> Self;
    fn state_hash(&self) -> u64;
}
// Implemented for: f32, Vec2, Color, String, Affine, Vec<Vec2>
//   f32:    lerp(a, b, t) = a + (b-a)*t
//   Vec2:   lerp x and y independently
//   Color:  lerp R,G,B,A channels independently
//   String: snap — returns 'a' until t>=1, then 'b'",
        95.0,
    );

    let s9_easing_h = h2("Easing functions curve the linear t:", 310.0);
    let s9_easing_desc = body("Same distance, same duration — different feel.", 340.0);

    let enames = [
        "linear",
        "cubic_in_out",
        "elastic_out",
        "bounce_out",
        "back_out",
    ];
    let ecolors = [WHITE, ACCENT, RED, YELLOW, GREEN];
    let mut eballs: Vec<Circle> = Vec::new();
    let mut elabels: Vec<TextNode> = Vec::new();
    for (i, name) in enames.iter().enumerate() {
        let y = 390.0 + i as f32 * 55.0;
        let b = Circle::default()
            .with_position(Vec2::new(250.0, y))
            .with_radius(12.0)
            .with_fill(ecolors[i])
            .with_opacity(0.0);
        let l = dim(name, LEFT, y - 5.0);
        project.scene.add(&b);
        project.scene.add(&l);
        eballs.push(b);
        elabels.push(l);
    }
    project.scene.add(&s9_h);
    project.scene.add(&s9_code);
    project.scene.add(&s9_easing_h);
    project.scene.add(&s9_easing_desc);

    // =====================================================================
    //  S10: FLOW CONTROLS
    // =====================================================================
    let s10_h = title("Flow Controls — Composing Animations", 50.0);
    let s10_sub = body(
        "Individual tweens are simple. Power comes from composing them.",
        90.0,
    );

    // chain
    let s10_chain_h = h2("chain![ ] — one after another", 140.0);
    let chain_d: Vec<Circle> = (0..3)
        .map(|i| {
            Circle::default()
                .with_position(Vec2::new(LEFT + 30.0 + i as f32 * 60.0, 200.0))
                .with_radius(18.0)
                .with_fill([RED, ACCENT, YELLOW][i])
                .with_opacity(0.0)
        })
        .collect();

    // all
    let s10_all_h = h2("all![ ] — all at the same time", 270.0);
    let all_d: Vec<Circle> = (0..3)
        .map(|i| {
            Circle::default()
                .with_position(Vec2::new(LEFT + 30.0 + i as f32 * 60.0, 330.0))
                .with_radius(18.0)
                .with_fill([RED, ACCENT, YELLOW][i])
                .with_opacity(0.0)
        })
        .collect();

    // sequence
    let s10_seq_h = h2("sequence![ ] — staggered starts", 400.0);
    let seq_d: Vec<Circle> = (0..3)
        .map(|i| {
            Circle::default()
                .with_position(Vec2::new(LEFT + 30.0 + i as f32 * 60.0, 460.0))
                .with_radius(18.0)
                .with_fill([RED, ACCENT, YELLOW][i])
                .with_opacity(0.0)
        })
        .collect();

    let s10_code = code_block(
        "chain![ a, b, c ]           // a then b then c
all![ a, b, c ]             // a + b + c together
sequence![ 200ms, a, b, c ] // staggered
delay![ 500ms, a ]          // wait then play
wait(1s)                    // pause
any![ a, b ]                // race: first wins
loop_anim![ a, 3 ]          // repeat 3 times",
        510.0,
    );

    project.scene.add(&s10_h);
    project.scene.add(&s10_sub);
    project.scene.add(&s10_chain_h);
    project.scene.add(&s10_all_h);
    project.scene.add(&s10_seq_h);
    project.scene.add(&s10_code);
    for d in &chain_d {
        project.scene.add(d);
    }
    for d in &all_d {
        project.scene.add(d);
    }
    for d in &seq_d {
        project.scene.add(d);
    }

    // =====================================================================
    //  S11: TIMELINE + RENDERING
    // =====================================================================
    let s11_h = title("The Timeline — Animation Queue", 50.0);
    let s11_code = code_block(
        "pub struct Timeline {
    pub animations: Vec<Box<dyn Animation>>,
}
impl Timeline {
    fn update(&mut self, mut dt: Duration) {
        while !self.animations.is_empty() {
            let (finished, leftover) = self.animations[0].update(dt);
            if finished {
                self.animations.remove(0); // pop front
                dt = leftover;             // pass leftover to next!
            } else { break; }
        }
    }
}",
        95.0,
    );

    let s11_leftover = note(
        "leftover propagation: if A finishes mid-frame, the remaining",
        390.0,
    );
    let s11_leftover2 = note(
        "dt is immediately given to B. No 'lost frames' at transitions.",
        415.0,
    );

    let s11_render_h = h2("Rendering Pipeline (per frame):", 470.0);
    let s11_steps = [
        "1. Timeline.update(dt)  =>  SignalTween writes to Signals",
        "2. Node.render()        =>  reads signals, draws shapes",
        "3. Vello GPU            =>  compiles scene => wgpu => pixels",
        "4. state_hash()         =>  seahash for hashing scene state, skip if unchanged",
    ];
    let s11_render_texts: Vec<TextNode> = s11_steps
        .iter()
        .enumerate()
        .map(|(i, s)| body(s, 505.0 + i as f32 * 28.0))
        .collect();

    project.scene.add(&s11_h);
    project.scene.add(&s11_code);
    for n in [&s11_leftover, &s11_leftover2, &s11_render_h] {
        project.scene.add(n);
    }
    for t in &s11_render_texts {
        project.scene.add(t);
    }

    // =====================================================================
    //  S12: EVENT LOOP — Why an infinite loop?
    // =====================================================================
    let s12_h = title("Why an Infinite Loop? — The Event Loop", 50.0);
    let s12_sub = body(
        "GPU rendering requires a persistent event loop (winit + wgpu).",
        90.0,
    );
    let s12_code = code_block(
        "event_loop.run(|event, elwt| {
    match event {
        Resumed => {           // GPU surface ready
            renderer.resume(&window);
        }
        AboutToWait => {       // run every frame
            scene.update(dt);  // advance animations
            let hash = scene.state_hash();
            if hash != last_hash {    // dirty?
                window.request_redraw();
            }
        }
        RedrawRequested => {   // GPU draw call
            renderer.render(&scene, w, h);
        }
    }
});",
        130.0,
    );
    let s12_why = note(
        "The window stays open because the GPU surface is tied to",
        490.0,
    );
    let s12_why2 = note(
        "the OS event loop. Without it, the surface is immediately dropped.",
        510.0,
    );
    let s12_hash = body(
        "state_hash() skips re-rendering unchanged frames (dirty-checking).",
        550.0,
    );

    for n in [&s12_h, &s12_sub, &s12_why, &s12_why2, &s12_hash] {
        project.scene.add(n);
    }
    project.scene.add(&s12_code);

    // =====================================================================
    //  S13: HEADLESS EXPORT — GPU without a window
    // =====================================================================
    let s13_h = title("Headless Export: GPU -> PNG -> FFmpeg", 50.0);
    let s13_sub = body(
        "Same GPU rendering, but without a window — output to files.",
        90.0,
    );
    let s13_code = code_block(
        "pub struct Exporter {
    texture: wgpu::Texture,       // GPU-side image
    output_buffer: wgpu::Buffer,  // CPU-readable copy
    renderer: Renderer,           // Vello
}
fn export_frame(&mut self, scene) -> Vec<u8> {
    scene.render(&mut self.scene);           // 1. build shapes
    renderer.render_to_texture(..);          // 2. GPU draws
    encoder.copy_texture_to_buffer(..);      // 3. GPU -> CPU
    output_buffer.map_async(Read, ..);       // 4. read pixels
    return pixels;                           // 5. raw RGBA
}",
        130.0,
    );
    let s13_cache = note(
        "Cache: state_hash per frame. If unchanged, skip GPU entirely.",
        420.0,
    );
    let s13_ffmpeg = note(
        "FFmpeg: raw pixels piped to stdin -> libx264 -> .mkv video.",
        445.0,
    );
    let s13_parallel = body(
        "PNG saving runs on a background thread. Export is pipelined.",
        485.0,
    );

    for n in [&s13_h, &s13_sub, &s13_cache, &s13_ffmpeg, &s13_parallel] {
        project.scene.add(n);
    }
    project.scene.add(&s13_code);

    // =====================================================================
    //  S14: ENGINE UTILITIES
    // =====================================================================
    let s14_h = title("Under the Hood: Utility Modules", 50.0);
    let s14_sub = body(
        "Helper systems that power the engine behind the scenes.",
        90.0,
    );
    let s14_code = code_block(
        "// src/engine/util/
font_manager.rs    // Lazy-loads system fonts via Typst
                   // Global HashMap cache with lazy_static

image_manager.rs   // Loads PNG + SVG (via resvg)
                   // Caches decoded images as Arc<Image>

code_tokenizer.rs  // Syntax highlighting via Syntect
                   // Parses code -> colored spans for CodeNode

hash.rs            // SeaHash: fast, deterministic fingerprints
                   // Position-aware combination
                   // Powers Rayon parallel state hashing

export.rs          // FFmpeg pipe: rawvideo -> libx264
                   // Audio merging with filter_complex
                   // Title sanitization for filenames",
        130.0,
    );
    let s14_lazy = note(
        "lazy_static + Mutex = global singleton, created once, cached forever.",
        495.0,
    );
    let s14_arc = body(
        "Arc<Image> lets multiple nodes share one decoded image without copies.",
        530.0,
    );
    let s14_hash = note(
        "Rayon + SeaHash = Deterministic fingerprints across runs & threads.",
        565.0,
    );

    for n in [&s14_h, &s14_sub, &s14_lazy, &s14_arc, &s14_hash] {
        project.scene.add(n);
    }
    project.scene.add(&s14_code);

    // =====================================================================
    //  S15: FINALE
    // =====================================================================
    let fin = TextNode::default()
        .with_anchor(Vec2::new(-1.0, -1.0))
        .with_position(Vec2::new(LEFT, 200.0))
        .with_text("That's how it works!")
        .with_font_size(48.0)
        .with_fill(ACCENT)
        .with_font(FONT)
        .with_opacity(0.0);
    let fin_steps = [
        "1.  struct          — data container",
        "2.  impl            — methods / builder pattern",
        "3.  trait Node      — interface contract",
        "4.  Box<dyn Node>   — type-erased heap allocation",
        "5.  Signal<T>       — Arc<Mutex> shared reactive state",
        "6.  SignalTween     — per-frame lerp interpolation",
        "7.  Timeline        — sequential queue + leftover dt",
        "8.  Event Loop      — winit + wgpu infinite loop",
        "9.  Exporter        — headless GPU -> PNG/FFmpeg",
        "10. Utilities       — font/image cache, syntax highlight",
    ];
    let fin_texts: Vec<TextNode> = fin_steps
        .iter()
        .enumerate()
        .map(|(i, s)| body(s, 270.0 + i as f32 * 28.0))
        .collect();
    let fin_hint = dim("cargo run --example getting_started", LEFT, 570.0);

    project.scene.add(&fin);
    for t in &fin_texts {
        project.scene.add(t);
    }
    project.scene.add(&fin_hint);

    // =====================================================================
    //  ANIMATION TIMELINE
    // =====================================================================
    // Helper: hide_all takes a vec of opacity signals and fades them out
    let hide_dur = ms(200);

    project.scene.video_timeline.add(chain![
        // ── S1: TITLE ──
        s1_line
            .end
            .to(Vec2::new(500.0, 100.0), ms(500))
            .ease(easings::cubic_out),
        sequence![
            ms(120),
            show(&s1_title.opacity, ms(500)),
            show(&s1_sub.opacity, ms(500)),
            show(&s1_built.opacity, ms(500)),
            show(&s1_logo.opacity, ms(600)),
            show(&s1_desc.opacity, ms(500)),
            show(&s1_desc2.opacity, ms(500)),
        ],
        wait(secs(5)),
        all![
            hide(&s1_title.opacity, hide_dur),
            hide(&s1_sub.opacity, hide_dur),
            hide(&s1_built.opacity, hide_dur),
            hide(&s1_desc.opacity, hide_dur),
            hide(&s1_desc2.opacity, hide_dur),
            hide(&s1_logo.opacity, hide_dur),
            s1_line.end.to(Vec2::new(LEFT, 100.0), hide_dur)
        ],
        wait(ms(150)),
        // ── S2: FIVE STEPS ──
        show(&s2_h.opacity, ms(500)),
        wait(ms(400)),
        sequence![
            ms(250),
            show(&s2_texts[0].opacity, ms(400)),
            show(&s2_texts[1].opacity, ms(400)),
            show(&s2_texts[2].opacity, ms(400)),
            show(&s2_texts[3].opacity, ms(400)),
            show(&s2_texts[4].opacity, ms(400)),
        ],
        wait(secs(8)),
        all![
            hide(&s2_h.opacity, hide_dur),
            hide(&s2_texts[0].opacity, hide_dur),
            hide(&s2_texts[1].opacity, hide_dur),
            hide(&s2_texts[2].opacity, hide_dur),
            hide(&s2_texts[3].opacity, hide_dur),
            hide(&s2_texts[4].opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S3: STRUCT ──
        sequence![
            ms(120),
            show(&s3_h.opacity, ms(500)),
            show(&s3_explain.opacity, ms(400)),
            show(&s3_analogy.opacity, ms(400))
        ],
        wait(ms(500)),
        show(&s3_code.opacity, ms(500)),
        wait(secs(6)),
        sequence![
            ms(300),
            show(&s3_note.opacity, ms(400)),
            show(&s3_note2.opacity, ms(400)),
            show(&s3_note3.opacity, ms(400))
        ],
        wait(secs(6)),
        all![
            hide(&s3_h.opacity, hide_dur),
            hide(&s3_explain.opacity, hide_dur),
            hide(&s3_analogy.opacity, hide_dur),
            hide(&s3_code.opacity, hide_dur),
            hide(&s3_note.opacity, hide_dur),
            hide(&s3_note2.opacity, hide_dur),
            hide(&s3_note3.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S4: IMPL / BUILDER ──
        sequence![
            ms(120),
            show(&s4_h.opacity, ms(500)),
            show(&s4_explain.opacity, ms(400)),
            show(&s4_analogy.opacity, ms(400))
        ],
        wait(ms(500)),
        show(&s4_code.opacity, ms(500)),
        wait(secs(7)),
        show(&s4_usage.opacity, ms(400)),
        show(&s4_usage_code.opacity, ms(500)),
        wait(secs(2)),
        show(&s4_note.opacity, ms(400)),
        wait(secs(5)),
        all![
            hide(&s4_h.opacity, hide_dur),
            hide(&s4_explain.opacity, hide_dur),
            hide(&s4_analogy.opacity, hide_dur),
            hide(&s4_code.opacity, hide_dur),
            hide(&s4_usage.opacity, hide_dur),
            hide(&s4_usage_code.opacity, hide_dur),
            hide(&s4_note.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S5: TRAIT / NODE ──
        sequence![
            ms(120),
            show(&s5_h.opacity, ms(500)),
            show(&s5_explain.opacity, ms(400)),
            show(&s5_analogy.opacity, ms(400))
        ],
        wait(ms(500)),
        show(&s5_code.opacity, ms(500)),
        wait(secs(6)),
        sequence![
            ms(300),
            show(&s5_r.opacity, ms(400)),
            show(&s5_u.opacity, ms(400)),
            show(&s5_s.opacity, ms(400)),
            show(&s5_c.opacity, ms(400))
        ],
        wait(secs(2)),
        show(&s5_every.opacity, ms(400)),
        wait(secs(4)),
        all![
            hide(&s5_h.opacity, hide_dur),
            hide(&s5_explain.opacity, hide_dur),
            hide(&s5_analogy.opacity, hide_dur),
            hide(&s5_code.opacity, hide_dur),
            hide(&s5_r.opacity, hide_dur),
            hide(&s5_u.opacity, hide_dur),
            hide(&s5_s.opacity, hide_dur),
            hide(&s5_c.opacity, hide_dur),
            hide(&s5_every.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S6: NODE GALLERY ──
        sequence![
            ms(120),
            show(&s6_h.opacity, ms(500)),
            show(&s6_sub.opacity, ms(400))
        ],
        wait(ms(400)),
        sequence![
            ms(200),
            all![show(&demo_c.opacity, ms(400)), show(&lc.opacity, ms(400))],
            all![show(&demo_r.opacity, ms(400)), show(&lr.opacity, ms(400))],
            all![show(&demo_l.opacity, ms(400)), show(&ll.opacity, ms(400))],
            all![show(&demo_p.opacity, ms(400)), show(&lp.opacity, ms(400))],
            all![show(&demo_t.opacity, ms(400)), show(&lt.opacity, ms(400))],
        ],
        wait(secs(2)),
        sequence![
            ms(200),
            show(&s6_box_h.opacity, ms(400)),
            show(&s6_box1.opacity, ms(400)),
            show(&s6_box_code.opacity, ms(500))
        ],
        wait(secs(7)),
        all![
            hide(&s6_h.opacity, hide_dur),
            hide(&s6_sub.opacity, hide_dur),
            hide(&demo_c.opacity, hide_dur),
            hide(&demo_r.opacity, hide_dur),
            hide(&demo_l.opacity, hide_dur),
            hide(&demo_p.opacity, hide_dur),
            hide(&demo_t.opacity, hide_dur),
            hide(&lc.opacity, hide_dur),
            hide(&lr.opacity, hide_dur),
            hide(&ll.opacity, hide_dur),
            hide(&lp.opacity, hide_dur),
            hide(&lt.opacity, hide_dur),
            hide(&s6_box_h.opacity, hide_dur),
            hide(&s6_box1.opacity, hide_dur),
            hide(&s6_box_code.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S7: SIGNALS ──
        sequence![
            ms(120),
            show(&s7_h.opacity, ms(500)),
            show(&s7_sub.opacity, ms(400))
        ],
        wait(ms(400)),
        show(&s7_code.opacity, ms(500)),
        wait(secs(5)),
        sequence![
            ms(300),
            show(&s7_arc.opacity, ms(400)),
            show(&s7_mutex.opacity, ms(400))
        ],
        wait(secs(4)),
        show(&s7_why.opacity, ms(400)),
        show(&s7_diagram_code.opacity, ms(500)),
        wait(secs(6)),
        // Live demo
        all![
            show(&sig_demo.opacity, ms(300)),
            show(&sig_lbl.opacity, ms(300))
        ],
        chain![
            sig_demo.radius.to(80.0, ms(700)).ease(easings::elastic_out),
            sig_demo.fill_paint.to(Paint::Solid(TEAL), ms(500)),
            sig_demo
                .position
                .to(Vec2::new(950.0, 350.0), ms(500))
                .ease(easings::cubic_out),
            wait(ms(300)),
            all![
                sig_demo.radius.to(50.0, ms(400)),
                sig_demo.fill_paint.to(Paint::Solid(RED), ms(400)),
                sig_demo.position.to(Vec2::new(900.0, 300.0), ms(400))
            ],
        ],
        wait(secs(3)),
        all![
            hide(&s7_h.opacity, hide_dur),
            hide(&s7_sub.opacity, hide_dur),
            hide(&s7_code.opacity, hide_dur),
            hide(&s7_arc.opacity, hide_dur),
            hide(&s7_mutex.opacity, hide_dur),
            hide(&s7_why.opacity, hide_dur),
            hide(&s7_diagram_code.opacity, hide_dur),
            hide(&sig_demo.opacity, hide_dur),
            hide(&sig_lbl.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S8: SIGNAL TWEEN ──
        sequence![
            ms(120),
            show(&s8_h.opacity, ms(500)),
            show(&s8_sub.opacity, ms(400))
        ],
        wait(ms(400)),
        show(&s8_code.opacity, ms(500)),
        wait(secs(6)),
        show(&s8_how.opacity, ms(300)),
        sequence![
            ms(100),
            show(&s8_step_texts[0].opacity, ms(250)),
            show(&s8_step_texts[1].opacity, ms(250)),
            show(&s8_step_texts[2].opacity, ms(250)),
            show(&s8_step_texts[3].opacity, ms(250)),
            show(&s8_step_texts[4].opacity, ms(250)),
            show(&s8_step_texts[5].opacity, ms(250)),
        ],
        wait(ms(500)),
        sequence![
            ms(100),
            show(&s8_lazy.opacity, ms(300)),
            show(&s8_lazy2.opacity, ms(300))
        ],
        wait(ms(500)),
        // Progress bar demo
        all![
            show(&prog_bg.opacity, ms(200)),
            show(&prog_fill.opacity, ms(200)),
            show(&plbl0.opacity, ms(200)),
            show(&plbl1.opacity, ms(200)),
            show(&tween_ball.opacity, ms(200)),
            show(&tween_lbl.opacity, ms(200))
        ],
        all![
            prog_fill
                .size
                .to(Vec2::new(400.0, 16.0), secs(2))
                .ease(easings::cubic_in_out),
            tween_ball
                .radius
                .to(80.0, secs(2))
                .ease(easings::cubic_in_out),
        ],
        wait(secs(3)),
        all![
            hide(&s8_h.opacity, hide_dur),
            hide(&s8_sub.opacity, hide_dur),
            hide(&s8_code.opacity, hide_dur),
            hide(&s8_how.opacity, hide_dur),
            hide(&s8_lazy.opacity, hide_dur),
            hide(&s8_lazy2.opacity, hide_dur),
            hide(&prog_bg.opacity, hide_dur),
            hide(&prog_fill.opacity, hide_dur),
            hide(&plbl0.opacity, hide_dur),
            hide(&plbl1.opacity, hide_dur),
            hide(&tween_ball.opacity, hide_dur),
            hide(&tween_lbl.opacity, hide_dur),
            hide(&s8_step_texts[0].opacity, hide_dur),
            hide(&s8_step_texts[1].opacity, hide_dur),
            hide(&s8_step_texts[2].opacity, hide_dur),
            hide(&s8_step_texts[3].opacity, hide_dur),
            hide(&s8_step_texts[4].opacity, hide_dur),
            hide(&s8_step_texts[5].opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S9: TWEENABLE + EASINGS ──
        show(&s9_h.opacity, ms(500)),
        show(&s9_code.opacity, ms(500)),
        wait(secs(4)),
        sequence![
            ms(60),
            show(&s9_easing_h.opacity, ms(300)),
            show(&s9_easing_desc.opacity, ms(300))
        ],
        sequence![
            ms(50),
            all![
                show(&eballs[0].opacity, ms(200)),
                show(&elabels[0].opacity, ms(200))
            ],
            all![
                show(&eballs[1].opacity, ms(200)),
                show(&elabels[1].opacity, ms(200))
            ],
            all![
                show(&eballs[2].opacity, ms(200)),
                show(&elabels[2].opacity, ms(200))
            ],
            all![
                show(&eballs[3].opacity, ms(200)),
                show(&elabels[3].opacity, ms(200))
            ],
            all![
                show(&eballs[4].opacity, ms(200)),
                show(&elabels[4].opacity, ms(200))
            ],
        ],
        wait(ms(300)),
        // Race!
        all![
            eballs[0]
                .position
                .to(Vec2::new(1050.0, 390.0), secs(2))
                .ease(easings::linear),
            eballs[1]
                .position
                .to(Vec2::new(1050.0, 445.0), secs(2))
                .ease(easings::cubic_in_out),
            eballs[2]
                .position
                .to(Vec2::new(1050.0, 500.0), secs(2))
                .ease(easings::elastic_out),
            eballs[3]
                .position
                .to(Vec2::new(1050.0, 555.0), secs(2))
                .ease(easings::bounce_out),
            eballs[4]
                .position
                .to(Vec2::new(1050.0, 610.0), secs(2))
                .ease(easings::back_out),
        ],
        wait(ms(500)),
        all![
            eballs[0]
                .position
                .to(Vec2::new(250.0, 390.0), secs(2))
                .ease(easings::linear),
            eballs[1]
                .position
                .to(Vec2::new(250.0, 445.0), secs(2))
                .ease(easings::cubic_in_out),
            eballs[2]
                .position
                .to(Vec2::new(250.0, 500.0), secs(2))
                .ease(easings::elastic_out),
            eballs[3]
                .position
                .to(Vec2::new(250.0, 555.0), secs(2))
                .ease(easings::bounce_out),
            eballs[4]
                .position
                .to(Vec2::new(250.0, 610.0), secs(2))
                .ease(easings::back_out),
        ],
        wait(ms(500)),
        all![
            hide(&s9_h.opacity, hide_dur),
            hide(&s9_code.opacity, hide_dur),
            hide(&s9_easing_h.opacity, hide_dur),
            hide(&s9_easing_desc.opacity, hide_dur),
            hide(&eballs[0].opacity, hide_dur),
            hide(&eballs[1].opacity, hide_dur),
            hide(&eballs[2].opacity, hide_dur),
            hide(&eballs[3].opacity, hide_dur),
            hide(&eballs[4].opacity, hide_dur),
            hide(&elabels[0].opacity, hide_dur),
            hide(&elabels[1].opacity, hide_dur),
            hide(&elabels[2].opacity, hide_dur),
            hide(&elabels[3].opacity, hide_dur),
            hide(&elabels[4].opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S10: FLOW CONTROLS ──
        sequence![
            ms(120),
            show(&s10_h.opacity, ms(500)),
            show(&s10_sub.opacity, ms(400))
        ],
        wait(ms(400)),
        // chain demo
        show(&s10_chain_h.opacity, ms(400)),
        all![
            show(&chain_d[0].opacity, ms(300)),
            show(&chain_d[1].opacity, ms(300)),
            show(&chain_d[2].opacity, ms(300))
        ],
        wait(ms(300)),
        chain![
            chain_d[0]
                .position
                .to(Vec2::new(700.0, 200.0), ms(500))
                .ease(easings::cubic_out),
            chain_d[1]
                .position
                .to(Vec2::new(800.0, 200.0), ms(500))
                .ease(easings::cubic_out),
            chain_d[2]
                .position
                .to(Vec2::new(900.0, 200.0), ms(500))
                .ease(easings::cubic_out),
        ],
        wait(secs(1)),
        // all demo
        show(&s10_all_h.opacity, ms(400)),
        all![
            show(&all_d[0].opacity, ms(300)),
            show(&all_d[1].opacity, ms(300)),
            show(&all_d[2].opacity, ms(300))
        ],
        wait(ms(300)),
        all![
            all_d[0]
                .position
                .to(Vec2::new(700.0, 330.0), ms(500))
                .ease(easings::cubic_out),
            all_d[1]
                .position
                .to(Vec2::new(800.0, 330.0), ms(500))
                .ease(easings::cubic_out),
            all_d[2]
                .position
                .to(Vec2::new(900.0, 330.0), ms(500))
                .ease(easings::cubic_out),
        ],
        wait(secs(1)),
        // sequence demo
        show(&s10_seq_h.opacity, ms(400)),
        all![
            show(&seq_d[0].opacity, ms(300)),
            show(&seq_d[1].opacity, ms(300)),
            show(&seq_d[2].opacity, ms(300))
        ],
        wait(ms(300)),
        sequence![
            ms(250),
            seq_d[0]
                .position
                .to(Vec2::new(700.0, 460.0), ms(500))
                .ease(easings::cubic_out),
            seq_d[1]
                .position
                .to(Vec2::new(800.0, 460.0), ms(500))
                .ease(easings::cubic_out),
            seq_d[2]
                .position
                .to(Vec2::new(900.0, 460.0), ms(500))
                .ease(easings::cubic_out),
        ],
        wait(secs(1)),
        show(&s10_code.opacity, ms(500)),
        wait(secs(8)),
        all![
            hide(&s10_h.opacity, hide_dur),
            hide(&s10_sub.opacity, hide_dur),
            hide(&s10_chain_h.opacity, hide_dur),
            hide(&s10_all_h.opacity, hide_dur),
            hide(&s10_seq_h.opacity, hide_dur),
            hide(&s10_code.opacity, hide_dur),
            hide(&chain_d[0].opacity, hide_dur),
            hide(&chain_d[1].opacity, hide_dur),
            hide(&chain_d[2].opacity, hide_dur),
            hide(&all_d[0].opacity, hide_dur),
            hide(&all_d[1].opacity, hide_dur),
            hide(&all_d[2].opacity, hide_dur),
            hide(&seq_d[0].opacity, hide_dur),
            hide(&seq_d[1].opacity, hide_dur),
            hide(&seq_d[2].opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S11: TIMELINE + RENDERING ──
        show(&s11_h.opacity, ms(500)),
        wait(ms(400)),
        show(&s11_code.opacity, ms(500)),
        wait(secs(7)),
        sequence![
            ms(200),
            show(&s11_leftover.opacity, ms(400)),
            show(&s11_leftover2.opacity, ms(400))
        ],
        wait(secs(4)),
        show(&s11_render_h.opacity, ms(400)),
        sequence![
            ms(200),
            show(&s11_render_texts[0].opacity, ms(350)),
            show(&s11_render_texts[1].opacity, ms(350)),
            show(&s11_render_texts[2].opacity, ms(350)),
            show(&s11_render_texts[3].opacity, ms(350)),
        ],
        wait(secs(7)),
        all![
            hide(&s11_h.opacity, hide_dur),
            hide(&s11_code.opacity, hide_dur),
            hide(&s11_leftover.opacity, hide_dur),
            hide(&s11_leftover2.opacity, hide_dur),
            hide(&s11_render_h.opacity, hide_dur),
            hide(&s11_render_texts[0].opacity, hide_dur),
            hide(&s11_render_texts[1].opacity, hide_dur),
            hide(&s11_render_texts[2].opacity, hide_dur),
            hide(&s11_render_texts[3].opacity, hide_dur)
        ],
        wait(ms(300)),
        // ── S12: EVENT LOOP ──
        sequence![
            ms(120),
            show(&s12_h.opacity, ms(500)),
            show(&s12_sub.opacity, ms(400))
        ],
        wait(ms(500)),
        show(&s12_code.opacity, ms(500)),
        wait(secs(8)),
        sequence![
            ms(200),
            show(&s12_why.opacity, ms(400)),
            show(&s12_why2.opacity, ms(400)),
            show(&s12_hash.opacity, ms(400))
        ],
        wait(secs(5)),
        all![
            hide(&s12_h.opacity, hide_dur),
            hide(&s12_sub.opacity, hide_dur),
            hide(&s12_code.opacity, hide_dur),
            hide(&s12_why.opacity, hide_dur),
            hide(&s12_why2.opacity, hide_dur),
            hide(&s12_hash.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S13: HEADLESS EXPORT ──
        sequence![
            ms(120),
            show(&s13_h.opacity, ms(500)),
            show(&s13_sub.opacity, ms(400))
        ],
        wait(ms(500)),
        show(&s13_code.opacity, ms(500)),
        wait(secs(8)),
        sequence![
            ms(200),
            show(&s13_cache.opacity, ms(400)),
            show(&s13_ffmpeg.opacity, ms(400)),
            show(&s13_parallel.opacity, ms(400))
        ],
        wait(secs(5)),
        all![
            hide(&s13_h.opacity, hide_dur),
            hide(&s13_sub.opacity, hide_dur),
            hide(&s13_code.opacity, hide_dur),
            hide(&s13_cache.opacity, hide_dur),
            hide(&s13_ffmpeg.opacity, hide_dur),
            hide(&s13_parallel.opacity, hide_dur)
        ],
        wait(ms(150)),
        // ── S14: UTILITIES ──
        sequence![
            ms(120),
            show(&s14_h.opacity, ms(500)),
            show(&s14_sub.opacity, ms(400))
        ],
        wait(ms(500)),
        show(&s14_code.opacity, ms(500)),
        wait(secs(8)),
        sequence![
            ms(200),
            show(&s14_lazy.opacity, ms(400)),
            show(&s14_arc.opacity, ms(400))
        ],
        wait(secs(5)),
        all![
            hide(&s14_h.opacity, hide_dur),
            hide(&s14_sub.opacity, hide_dur),
            hide(&s14_code.opacity, hide_dur),
            hide(&s14_lazy.opacity, hide_dur),
            hide(&s14_arc.opacity, hide_dur)
        ],
        wait(ms(300)),
        // ── S15: FINALE ──
        show(&fin.opacity, ms(700)),
        wait(ms(500)),
        sequence![
            ms(150),
            show(&fin_texts[0].opacity, ms(350)),
            show(&fin_texts[1].opacity, ms(350)),
            show(&fin_texts[2].opacity, ms(350)),
            show(&fin_texts[3].opacity, ms(350)),
            show(&fin_texts[4].opacity, ms(350)),
            show(&fin_texts[5].opacity, ms(350)),
            show(&fin_texts[6].opacity, ms(350)),
            show(&fin_texts[7].opacity, ms(350)),
            show(&fin_texts[8].opacity, ms(350)),
            show(&fin_texts[9].opacity, ms(350)),
        ],
        wait(secs(2)),
        show(&fin_hint.opacity, ms(400)),
        wait(secs(6)),
    ]);

    #[cfg(feature = "audio")]
    project
        .scene
        .audio_timeline
        .add(play!(AudioNode::new("background.mp3").with_volume(0.3)));

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

examples/mask_demo.rs (line 24)

fn make_source(w: f32, h: f32, font: f32) -> GroupNode {
    GroupNode::new(vec![
        Box::new(
            Rect::default()
                .with_size(Vec2::new(w, h))
                .with_radius(w * 0.04)
                .with_fill(linear_gradient!(
                    Color::rgb8(0xf4, 0x3f, 0x5e),
                    Color::rgb8(0x8b, 0x5c, 0xf6),
                    Color::rgb8(0x06, 0xb6, 0xd4)
                )),
        ),
        Box::new(
            Circle::default()
                .with_position(Vec2::new(-w * 0.3, 0.0))
                .with_radius(w * 0.12)
                .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 0x88), 3.0),
        ),
        Box::new(
            Circle::default()
                .with_position(Vec2::new(w * 0.3, 0.0))
                .with_radius(w * 0.12)
                .with_stroke(Color::rgba8(0xff, 0xff, 0xff, 0x88), 3.0),
        ),
        Box::new(
            TextNode::default()
                .with_text("MASKED")
                .with_font_size(font)
                .with_fill(Color::WHITE),
        ),
    ])
}

examples/group_animation.rs (line 13)

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

    // Create some child nodes
    let rect = Rect::default()
        .with_position(Vec2::new(0.0, 0.0))
        .with_size(Vec2::new(100.0, 100.0))
        .with_fill(Color::rgba8(100, 100, 255, 255))
        .with_radius(10.0);

    let circle1 = Circle::default()
        .with_position(Vec2::new(-40.0, -40.0))
        .with_radius(20.0)
        .with_fill(Color::rgba8(255, 100, 100, 255));

    let circle2 = Circle::default()
        .with_position(Vec2::new(40.0, 40.0))
        .with_radius(20.0)
        .with_fill(Color::rgba8(100, 255, 100, 255));

    // Create a GroupNode holding them
    let group = GroupNode::default()
        .with_nodes(vec![
            Box::new(rect.clone()),
            Box::new(circle1.clone()),
            Box::new(circle2.clone()),
        ])
        .with_position(Vec2::new(400.0, 300.0));

    // We must add the group to the scene's nodes to render it
    project.scene.add(&group);

    // Define animations and add them to the timeline
    project.scene.video_timeline.add(chain![
        // 1. Move the whole group
        group
            .position
            .to(Vec2::new(200.0, 150.0), Duration::from_secs(2)),
        // 2. Rotate the group
        group
            .rotation
            .to(std::f32::consts::PI, Duration::from_secs(2)),
        // 3. Combined transform (move + scale)
        all![
            group
                .position
                .to(Vec2::new(400.0, 450.0), Duration::from_secs(2)),
            group.scale.to(Vec2::splat(2.0), Duration::from_secs(2)),
            group.opacity.to(0.3, Duration::from_secs(2)),
        ],
        // 4. Reset (at the center)
        all![
            group
                .position
                .to(Vec2::new(400.0, 300.0), Duration::from_secs(1)),
            group.scale.to(Vec2::ONE, Duration::from_secs(1)),
            group.rotation.to(0.0, Duration::from_secs(1)),
            group.opacity.to(1.0, Duration::from_secs(1)),
        ],
    ]);

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

examples/signals.rs (line 19)

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

    // 1. Create independent signals for our "Coordinate System"
    // These are NOT tied to any node yet.
    let x_var = Signal::new(0.0f32);
    let y_var = Signal::new(0.0f32);

    // 2. Create the Axis lines (Fixed)
    let x_axis = Line::default()
        .with_start(Vec2::new(-200.0, 0.0))
        .with_end(Vec2::new(200.0, 0.0))
        .with_stroke(Color::rgba8(255, 255, 255, 100), 2.0);

    let y_axis = Line::default()
        .with_start(Vec2::new(0.0, -200.0))
        .with_end(Vec2::new(0.0, 200.0))
        .with_stroke(Color::rgba8(255, 255, 255, 100), 2.0);

    // Group the axes at the center
    let axes = GroupNode::default()
        .with_nodes(vec![Box::new(x_axis), Box::new(y_axis)])
        .with_position(Vec2::new(400.0, 300.0));

    // 3. Create a representation of the point (P)
    let point = Circle::default()
        .with_radius(8.0)
        .with_fill(Color::rgb8(0xe1, 0x32, 0x38)); // Red

    // 4. Create text labels that show the values
    let x_label = TextNode::default()
        .with_text("X: 0")
        .with_font_size(24.0)
        .with_fill(Color::WHITE);

    let y_label = TextNode::default()
        .with_text("Y: 0")
        .with_font_size(24.0)
        .with_fill(Color::WHITE);

    // 5. Use .bind() to derive node properties from our variables
    // This makes node properties react to x_var and y_var.

    // Circle position follows both
    let y_clone = y_var.clone();
    let circle_pos_link = point.position.bind(x_var.clone(), move |x| {
        Vec2::new(x + 400.0, y_clone.get() + 300.0)
    });

    // X Label follows X but stays at bottom
    let x_label_pos_link = x_label
        .position
        .bind(x_var.clone(), |x| Vec2::new(x + 400.0, 550.0));

    // Y Label stays at left but follows Y
    let y_label_pos_link = y_label
        .position
        .bind(y_var.clone(), |y| Vec2::new(75.0, y + 300.0));

    // Dynamic text update for labels
    let x_text_link = x_label.text.bind(x_var.clone(), |x| format!("X: {:.1}", x));
    let y_text_link = y_label.text.bind(y_var.clone(), |y| format!("Y: {:.1}", y));

    // Add everything to the scene
    project.scene.add(axes);
    project.scene.add(point);
    project.scene.add(x_label);
    project.scene.add(y_label);

    // Add the links as "invisible" nodes that just perform the sync
    project.scene.add(circle_pos_link);
    project.scene.add(x_label_pos_link);
    project.scene.add(y_label_pos_link);
    project.scene.add(x_text_link);
    project.scene.add(y_text_link);

    // 6. Animate our independent variables!
    project.scene.video_timeline.add(chain![
        // Move X
        x_var
            .to(200.0, Duration::from_secs(1))
            .ease(easings::cubic_out),
        // Wait
        wait(Duration::from_millis(500)),
        // Move Y
        y_var
            .to(-150.0, Duration::from_secs(1))
            .ease(easings::back_out),
        // Move both together
        all![
            x_var
                .to(-250.0, Duration::from_secs(2))
                .ease(easings::expo_in_out),
            y_var
                .to(100.0, Duration::from_secs(2))
                .ease(easings::sine_in_out),
        ],
        // Reset
        all![
            x_var.to(0.0, Duration::from_secs(1)),
            y_var.to(0.0, Duration::from_secs(1)),
        ],
        // Final wait to see the result
        wait(Duration::from_secs(1)),
    ]);

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

examples/blur_demo.rs (line 76)

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

Additional examples can be found in:

• examples/advanced_flow.rs
• examples/world_map.rs

pub fn rgb(r: f64, g: f64, b: f64) -> Color

Create a color from three floating point values, each in the range 0.0 to 1.0.

The interpretation is the same as rgb8, and no greater precision is (currently) assumed.

pub fn rgba(r: f64, g: f64, b: f64, a: f64) -> Color

Create a color from four floating point values, each in the range 0.0 to 1.0.

The interpretation is the same as rgba32, and no greater precision is (currently) assumed.

pub fn hlc(h: f64, l: f64, c: f64) -> Color

Create a color from a CIEL*a*b* polar (also known as CIE HCL) specification.

The h parameter is an angle in degrees, with 0 roughly magenta, 90 roughly yellow, 180 roughly cyan, and 270 roughly blue. The l parameter is perceptual luminance, with 0 black and 100 white. The c parameter is a chrominance concentration, with 0 grayscale and a nominal maximum of 127 (in the future, higher values might be useful, for high gamut contexts).

Currently this is just converted into sRGB, but in the future as we support high-gamut colorspaces, it can be used to specify more colors or existing colors with a higher accuracy.

Currently out-of-gamut values are clipped to the nearest sRGB color, which is perhaps not ideal (the clipping might change the hue). See https://github.com/d3/d3-color/issues/33 for discussion.

pub fn hlca(h: f64, l: f64, c: f64, alpha: f64) -> Color

Create a color from a CIEL*a*b* polar specification and alpha.

The a value represents alpha in the range 0.0 to 1.0.

pub fn parse(s: &str) -> Option<Color>

Parses a color from a string.

Currently accepts CSS style hexadecimal colors of the forms #RGB, #RGBA, #RRGGBB, #RRGGBBAA or the name of an SVG color such as “aliceblue”.

pub fn with_alpha_factor(self, alpha: f32) -> Color

👎Deprecated since 0.2.0:

This method has been renamed to multiply_alpha.

Returns the color with the alpha component multiplied by the specified factor.

pub fn multiply_alpha(self, alpha: f32) -> Color

Returns the color with the alpha component multiplied by alpha. The behaviour of this transformation is undefined if alpha is negative.

If the resulting alpha would overflow, this currently saturates (to opaque).

pub fn to_premul_u32(self) -> u32

Returns the color as a packed premultiplied value.

impl Color

Named SVG colors.

pub const ALICE_BLUE: Color

Alice blue (240, 248, 255, 255)

pub const ANTIQUE_WHITE: Color

Antique white (250, 235, 215, 255)

pub const AQUA: Color

Aqua (0, 255, 255, 255)

pub const AQUAMARINE: Color

Aquamarine (127, 255, 212, 255)

pub const AZURE: Color

Azure (240, 255, 255, 255)

pub const BEIGE: Color

Beige (245, 245, 220, 255)

pub const BISQUE: Color

Bisque (255, 228, 196, 255)

pub const BLACK: Color

Black (0, 0, 0, 255)

pub const BLANCHED_ALMOND: Color

Blanched almond (255, 235, 205, 255)

pub const BLUE: Color

Blue (0, 0, 255, 255)

pub const BLUE_VIOLET: Color

Blue violet (138, 43, 226, 255)

pub const BROWN: Color

Brown (165, 42, 42, 255)

pub const BURLYWOOD: Color

Burlywood (222, 184, 135, 255)

pub const CADET_BLUE: Color

Cadet blue (95, 158, 160, 255)

pub const CHARTREUSE: Color

Chartreuse (127, 255, 0, 255)

pub const CHOCOLATE: Color

Chocolate (210, 105, 30, 255)

pub const CORAL: Color

Coral (255, 127, 80, 255)

pub const CORNFLOWER_BLUE: Color

Cornflower blue (100, 149, 237, 255)

pub const CORNSILK: Color

Cornsilk (255, 248, 220, 255)

pub const CRIMSON: Color

Crimson (220, 20, 60, 255)

pub const CYAN: Color

Cyan (0, 255, 255, 255)

pub const DARK_BLUE: Color

Dark blue (0, 0, 139, 255)

pub const DARK_CYAN: Color

Dark cyan (0, 139, 139, 255)

pub const DARK_GOLDENROD: Color

Dark goldenrod (184, 134, 11, 255)

pub const DARK_GRAY: Color

Dark gray (169, 169, 169, 255)

pub const DARK_GREEN: Color

Dark green (0, 100, 0, 255)

pub const DARK_KHAKI: Color

Dark khaki (189, 183, 107, 255)

pub const DARK_MAGENTA: Color

Dark magenta (139, 0, 139, 255)

pub const DARK_OLIVE_GREEN: Color

Dark olive green (85, 107, 47, 255)

pub const DARK_ORANGE: Color

Dark orange (255, 140, 0, 255)

pub const DARK_ORCHID: Color

Dark orchid (153, 50, 204, 255)

pub const DARK_RED: Color

Dark red (139, 0, 0, 255)

pub const DARK_SALMON: Color

Dark salmon (233, 150, 122, 255)

pub const DARK_SEA_GREEN: Color

Dark sea green (143, 188, 143, 255)

pub const DARK_SLATE_BLUE: Color

Dark slate blue (72, 61, 139, 255)

pub const DARK_SLATE_GRAY: Color

Dark slate gray (47, 79, 79, 255)

pub const DARK_TURQUOISE: Color

Dark turquoise (0, 206, 209, 255)

pub const DARK_VIOLET: Color

Dark violet (148, 0, 211, 255)

pub const DEEP_PINK: Color

Deep pink (255, 20, 147, 255)

pub const DEEP_SKY_BLUE: Color

Deep sky blue (0, 191, 255, 255)

pub const DIM_GRAY: Color

Dim gray (105, 105, 105, 255)

pub const DODGER_BLUE: Color

Dodger blue (30, 144, 255, 255)

pub const FIREBRICK: Color

Firebrick (178, 34, 34, 255)

pub const FLORAL_WHITE: Color

Floral white (255, 250, 240, 255)

pub const FOREST_GREEN: Color

Forest green (34, 139, 34, 255)

pub const FUCHSIA: Color

Fuchsia (255, 0, 255, 255)

pub const GAINSBORO: Color

Gainsboro (220, 220, 220, 255)

pub const GHOST_WHITE: Color

Ghost white (248, 248, 255, 255)

pub const GOLD: Color

Gold (255, 215, 0, 255)

pub const GOLDENROD: Color

Goldenrod (218, 165, 32, 255)

pub const GRAY: Color

Gray (128, 128, 128, 255)

pub const GREEN: Color

Green (0, 128, 0, 255)

pub const GREEN_YELLOW: Color

Green yellow (173, 255, 47, 255)

pub const HONEYDEW: Color

Honeydew (240, 255, 240, 255)

pub const HOT_PINK: Color

Hot pink (255, 105, 180, 255)

pub const INDIAN_RED: Color

Indian red (205, 92, 92, 255)

pub const INDIGO: Color

Indigo (75, 0, 130, 255)

pub const IVORY: Color

Ivory (255, 255, 240, 255)

pub const KHAKI: Color

Khaki (240, 230, 140, 255)

pub const LAVENDER: Color

Lavender (230, 230, 250, 255)

pub const LAVENDER_BLUSH: Color

Lavender blush (255, 240, 245, 255)

pub const LAWN_GREEN: Color

Lawn green (124, 252, 0, 255)

pub const LEMON_CHIFFON: Color

Lemon chiffon (255, 250, 205, 255)

pub const LIGHT_BLUE: Color

Light blue (173, 216, 230, 255)

pub const LIGHT_CORAL: Color

Light coral (240, 128, 128, 255)

pub const LIGHT_CYAN: Color

Light cyan (224, 255, 255, 255)

pub const LIGHT_GOLDENROD_YELLOW: Color

Light goldenrod yellow (250, 250, 210, 255)

pub const LIGHT_GRAY: Color

Light gray (211, 211, 211, 255)

pub const LIGHT_GREEN: Color

Light green (144, 238, 144, 255)

pub const LIGHT_PINK: Color

Light pink (255, 182, 193, 255)

pub const LIGHT_SALMON: Color

Light salmon (255, 160, 122, 255)

pub const LIGHT_SEA_GREEN: Color

Light sea green (32, 178, 170, 255)

pub const LIGHT_SKY_BLUE: Color

Light sky blue (135, 206, 250, 255)

pub const LIGHT_SLATE_GRAY: Color

Light slate gray (119, 136, 153, 255)

pub const LIGHT_STEEL_BLUE: Color

Light steel blue (176, 196, 222, 255)

pub const LIGHT_YELLOW: Color

Light yellow (255, 255, 224, 255)

pub const LIME: Color

Lime (0, 255, 0, 255)

pub const LIME_GREEN: Color

Lime green (50, 205, 50, 255)

pub const LINEN: Color

Linen (250, 240, 230, 255)

pub const MAGENTA: Color

Magenta (255, 0, 255, 255)

pub const MAROON: Color

Maroon (128, 0, 0, 255)

pub const MEDIUM_AQUAMARINE: Color

Medium aquamarine (102, 205, 170, 255)

pub const MEDIUM_BLUE: Color

Medium blue (0, 0, 205, 255)

pub const MEDIUM_ORCHID: Color

Medium orchid (186, 85, 211, 255)

pub const MEDIUM_PURPLE: Color

Medium purple (147, 112, 219, 255)

pub const MEDIUM_SEA_GREEN: Color

Medium sea green (60, 179, 113, 255)

pub const MEDIUM_SLATE_BLUE: Color

Medium slate blue (123, 104, 238, 255)

pub const MEDIUM_SPRING_GREEN: Color

Medium spring green (0, 250, 154, 255)

pub const MEDIUM_TURQUOISE: Color

Medium turquoise (72, 209, 204, 255)

pub const MEDIUM_VIOLET_RED: Color

Medium violet red (199, 21, 133, 255)

pub const MIDNIGHT_BLUE: Color

Midnight blue (25, 25, 112, 255)

pub const MINT_CREAM: Color

Mint cream (245, 255, 250, 255)

pub const MISTY_ROSE: Color

Misty rose (255, 228, 225, 255)

pub const MOCCASIN: Color

Moccasin (255, 228, 181, 255)

pub const NAVAJO_WHITE: Color

Navajo white (255, 222, 173, 255)

pub const NAVY: Color

Navy (0, 0, 128, 255)

pub const OLD_LACE: Color

Old lace (253, 245, 230, 255)

pub const OLIVE: Color

Olive (128, 128, 0, 255)

pub const OLIVE_DRAB: Color

Olive drab (107, 142, 35, 255)

pub const ORANGE: Color

Orange (255, 165, 0, 255)

pub const ORANGE_RED: Color

Orange red (255, 69, 0, 255)

pub const ORCHID: Color

Orchid (218, 112, 214, 255)

pub const PALE_GOLDENROD: Color

Pale goldenrod (238, 232, 170, 255)

pub const PALE_GREEN: Color

Pale green (152, 251, 152, 255)

pub const PALE_TURQUOISE: Color

Pale turquoise (175, 238, 238, 255)

pub const PALE_VIOLET_RED: Color

Pale violet red (219, 112, 147, 255)

pub const PAPAYA_WHIP: Color

Papaya whip (255, 239, 213, 255)

pub const PEACH_PUFF: Color

Peach puff (255, 218, 185, 255)

pub const PERU: Color

Peru (205, 133, 63, 255)

pub const PINK: Color

Pink (255, 192, 203, 255)

pub const PLUM: Color

Plum (221, 160, 221, 255)

pub const POWDER_BLUE: Color

Powder blue (176, 224, 230, 255)

pub const PURPLE: Color

Purple (128, 0, 128, 255)

pub const REBECCA_PURPLE: Color

Rebecca purple (102, 51, 153, 255)

pub const RED: Color

Red (255, 0, 0, 255)

pub const ROSY_BROWN: Color

Rosy brown (188, 143, 143, 255)

pub const ROYAL_BLUE: Color

Royal blue (65, 105, 225, 255)

pub const SADDLE_BROWN: Color

Saddle brown (139, 69, 19, 255)

pub const SALMON: Color

Salmon (250, 128, 114, 255)

pub const SANDY_BROWN: Color

Sandy brown (244, 164, 96, 255)

pub const SEA_GREEN: Color

Sea green (46, 139, 87, 255)

pub const SEASHELL: Color

Seashell (255, 245, 238, 255)

pub const SIENNA: Color

Sienna (160, 82, 45, 255)

pub const SILVER: Color

Silver (192, 192, 192, 255)

pub const SKY_BLUE: Color

Sky blue (135, 206, 235, 255)

pub const SLATE_BLUE: Color

Slate blue (106, 90, 205, 255)

pub const SLATE_GRAY: Color

Slate gray (112, 128, 144, 255)

pub const SNOW: Color

Snow (255, 250, 250, 255)

pub const SPRING_GREEN: Color

Spring green (0, 255, 127, 255)

pub const STEEL_BLUE: Color

Steel blue (70, 130, 180, 255)

pub const TAN: Color

Tan (210, 180, 140, 255)

pub const TEAL: Color

Teal (0, 128, 128, 255)

pub const THISTLE: Color

Thistle (216, 191, 216, 255)

pub const TOMATO: Color

Tomato (255, 99, 71, 255)

pub const TRANSPARENT: Color

Transparent (0, 0, 0, 0)

pub const TURQUOISE: Color

Turquoise (64, 224, 208, 255)

pub const VIOLET: Color

Violet (238, 130, 238, 255)

pub const WHEAT: Color

Wheat (245, 222, 179, 255)

pub const WHITE: Color

White (255, 255, 255, 255)

pub const WHITE_SMOKE: Color

White smoke (245, 245, 245, 255)

pub const YELLOW: Color

Yellow (255, 255, 0, 255)

pub const YELLOW_GREEN: Color

Yellow green (154, 205, 50, 255)

Trait Implementations

impl Clone for Color

fn clone(&self) -> Color

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for Color

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl Default for Color

fn default() -> Color

Returns the “default value” for a type.

impl From<[u8; 3]> for Color

fn from(rgb: [u8; 3]) -> Color

Converts to this type from the input type.

impl From<[u8; 4]> for Color

fn from(rgba: [u8; 4]) -> Color

Converts to this type from the input type.

impl From<Color> for Paint

fn from(c: Color) -> Self

Converts to this type from the input type.

impl Hash for Color

fn hash<__H>(&self, state: &mut __H)

where __H: Hasher,

Feeds this value into the given Hasher.

fn hash_slice<H>(data: &[Self], state: &mut H)

where H: Hasher, Self: Sized,

Feeds a slice of this type into the given Hasher.

impl Ord for Color

fn cmp(&self, other: &Color) -> Ordering

This method returns an Ordering between self and other.

fn max(self, other: Self) -> Self

where Self: Sized,

Compares and returns the maximum of two values.

fn min(self, other: Self) -> Self

where Self: Sized,

Compares and returns the minimum of two values.

fn clamp(self, min: Self, max: Self) -> Self

where Self: Sized,

Restrict a value to a certain interval.

impl PartialEq for Color

fn eq(&self, other: &Color) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl PartialOrd for Color

fn partial_cmp(&self, other: &Color) -> Option<Ordering>

This method returns an ordering between self and other values if one exists.

fn lt(&self, other: &Rhs) -> bool

Tests less than (for self and other) and is used by the < operator.

fn le(&self, other: &Rhs) -> bool

Tests less than or equal to (for self and other) and is used by the <= operator.

fn gt(&self, other: &Rhs) -> bool

Tests greater than (for self and other) and is used by the > operator.

fn ge(&self, other: &Rhs) -> bool

Tests greater than or equal to (for self and other) and is used by the >= operator.

impl Tweenable for Color

fn interpolate(a: &Self, b: &Self, t: f32) -> Self

Interpolates between a and b by factor t (0.0 to 1.0).

fn state_hash(&self) -> u64

Returns a hash of the current value for change detection.

impl Copy for Color

impl Eq for Color

impl StructuralPartialEq for Color