Motion Canvas

Motion Canvas

Base Scene Template

import {makeScene2D} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {

});

Generator Functions & Animation Flow

• function* defines a generator function
• yield pauses until next frame
• yield* delegates to another generator (composition)

export default makeScene2D(function* (view) {
  const circle = createRef();
  view.add();

  yield* circle().position.x(300, 1);
  yield* circle().position.x(-300, 1);
});

Reusable animation pattern:

function* flicker(circle: Circle, duration: number): ThreadGenerator {
  const colors = ['#e13238', '#e6a700', '#99C47A'];
  for (const color of colors) {
    circle.fill(color);
    yield* waitFor(duration);
  }
}
yield* flicker(myCircle(), 0.5);

Signals System

import {createSignal} from '@motion-canvas/core';

const radius = createSignal(3);

radius();            // Get → 3
radius(5);           // Set → 5
yield* radius(4, 2); // Tween to 4 over 2 seconds

Computed signals:

const area = createSignal(() => Math.PI * radius() * radius());

Signals in JSX:

 radius() * 2} height={() => radius() * 2} />
yield* radius(200, 1); // Circle updates automatically

Vector signals:

const position = Vector2.createSignal(Vector2.up);
yield* position(Vector2.zero, 1);

Reset to default:

import {DEFAULT} from '@motion-canvas/core';
signal(DEFAULT);             // Instant reset
yield* signal(DEFAULT, 2);   // Tween to default

References (Refs)

createRef (single node):

const circle = createRef();

yield* circle().scale(2, 0.3);

makeRef (arrays):

const circles: Circle[] = [];
{range(10).map(index => (
  
))}
yield* all(...circles.map(c => c.scale(1.5, 0.5)));

createRefMap (keyed):

const labels = createRefMap();

yield* labels.a().text('Updated A', 0.3);

Scene Hierarchy

view.add();               // Add to view
container().add();         // Add to node
container().insert(, 0);   // Insert at index
circle().remove();                   // Remove
container().removeChildren();        // Remove all children
circle().reparent(newParent());      // Move to new parent

Z-order: moveUp(), moveDown(), moveToTop(), moveToBottom(), moveTo(2)

Querying:

import {is} from '@motion-canvas/2d';
const textNodes = view.findAll(is(Txt));
const firstCircle = view.findFirst(is(Circle));

Save / Restore State

yield* circle().save();
yield* all(circle().position.x(300, 1), circle().scale(2, 1));
yield* circle().restore(1); // Animate back to saved state

Time Events & Waiting

import {waitFor, waitUntil, useDuration} from '@motion-canvas/core';

yield* waitFor(2);                    // Wait 2 seconds
yield* waitUntil('voice-line-2');     // Wait for named event
const dur = useDuration('segment');   // Get event duration

Utilities

Random: useRandom(42) → .nextInt(10, 100), .nextFloat(0, 1) Logging: useLogger() → .debug(), .info(), .warn(), .error(); also debug('msg') Hooks: useScene() → .getSize(); useTime() Range: range(5) → [0,1,2,3,4]; range(2,5) → [2,3,4] Threads:

// Spawn a background thread (do NOT yield — spawn starts it automatically)
const task = spawn(function* () {
  yield* loop(Infinity, function* () {
    yield* circle().rotation(360, 2);
    circle().rotation(0);
  });
});

// Cancel a running thread
cancel(task);

// Wait for a thread to finish
yield* join(task);

yield a(); // run a without waiting for a
yield* waitFor(0.5); // wait 0.5s
yield* b(1); // run b

Shape Components

Circle:

Rect:

Line:

Polygon:

Grid:

import {Grid} from '@motion-canvas/2d';

Animate with start/end (0-1) for drawing/erasing effects.

Path (SVG path data):

import {Path} from '@motion-canvas/2d';

Supports morphing: yield* path().data(newPathData, 1);

Filters

import {blur, brightness, grayscale, sepia, contrast, saturate, hue, invert} from '@motion-canvas/2d';

yield* rect().filters([blur(0), grayscale(1)], 1); // Animated

See [Filters](references/FILTERS.md) for full details.

Gradients

import {Gradient} from '@motion-canvas/2d';

const grad = new Gradient({
  type: 'linear',
  from: [-100, 0], to: [100, 0],
  stops: [{offset: 0, color: '#e13238'}, {offset: 1, color: '#68ABDF'}],
});

See [Gradients](references/GRADIENTS.md) for radial and conic types.

Path Components

Ray: ` — animate with start(1,1) / end(0,1) **CubicBezier:** **QuadBezier:** **Spline:** — smooth curves **Knot:** new Knot([x,y], sharpness)` — adjust curve sharpness within Spline

Text Rendering

See [Txt](references/TXT.md) for full details.

Custom Components

export class Switch extends Node {
  @initial(false) @signal()
  public declare readonly initialState: SimpleSignal;

  public constructor(props?: SwitchProps) {
    super({...props});
  }

  public *toggle(duration: number) { /* animation logic */ }
}

Decorators (import from @motion-canvas/2d): @signal(), @initial(value), @colorSignal(), @vector2Signal()

import {Node, NodeProps, initial, signal} from '@motion-canvas/2d';

Scene Transitions

import {slideTransition, fadeTransition, Direction} from '@motion-canvas/core';
yield* slideTransition(Direction.Left);

All transitions (from @motion-canvas/core):

• slideTransition(Direction.Left) — slide in from direction
• fadeTransition(duration?) — cross-fade
• zoomInTransition(area, duration?) — zoom into a BBox area
• zoomOutTransition(area, duration?) — zoom out from a BBox area
• waitTransition(duration?) — wait without visual transition

Directions: Top, Bottom, Left, Right, TopLeft, TopRight, BottomLeft, BottomRight

Custom:

import {useTransition} from '@motion-canvas/core';
const transition = useTransition(ctx => { /* current */ }, ctx => { /* previous */ });
yield* transition(1);

Advanced Patterns

Conditional: if (cond()) yield* a(); else yield* b(); Reactive: val() > 150 ? 'red' : 'blue'} /> State machines: while/switch pattern with enum states

References

• [Setup](references/SETUP.md) — Project creation, installation, troubleshooting
• [Flow Control](references/FLOW_CONTROL.md) — all, any, chain, delay, sequence, loop
• [Tweening](references/TWEENING.md) — Property tweens, easing, interpolation
• [Springs](references/SPRINGS.md) — Physics-based spring animations
• [Transforms](references/TRANSFORMS.md) — Coordinates, positioning, matrix operations
• [Presentation Mode](references/PRESENTATION_MODE.md) — Slide-based playback
• [Txt](references/TXT.md) — Text rendering, dynamic text, multi-line
• [Layout](references/LAYOUT.md) — Flexbox, cardinal directions, offset
• [LaTeX](references/LATEX.md) — Mathematical equations
• [Media](references/MEDIA.md) — Images, icons, video
• [SVG](references/SVG.md) — Animatable SVG component
• [Icons](references/ICONS.md) — Iconify icon usage and catalog
• [Camera](references/CAMERA.md) — Pan, zoom, follow
• [Filters](references/FILTERS.md) — blur, brightness, contrast, grayscale, sepia, hue, saturate, invert
• [Gradients](references/GRADIENTS.md) — Linear, radial, conic gradient fills
• [Effects](references/EFFECTS.md) — createEffect, createDeferredEffect
• [Rendering](references/RENDERING.md) — Rendering settings and output configuration
• [Sounds](references/SOUNDS.md) — Programmable sound playback (@alpha)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: VideoZero
• Source: VideoZero/skills
• License: Apache-2.0
• Homepage: https://videozero.ai

Install and usage instructions live in the source repository linked above.