# Motion Canvas

> Create programmatic vector animations with TypeScript using the Motion Canvas library. Use when building animated explainer videos, tutorials, data visualizations, or presentations with synchronized audio; when the user asks about Motion Canvas, makeScene2D, scenes and generators, signals and tweening, 2D components (LaTeX, Code, Txt, Circle, Rect, Layout, Img, Video, SVG), the editor, exporting video or image sequences, or plugin authoring. Covers technique guides (code-block, compositing, shaders, 3D, parallax) and package/component docs.

- Skill: `udnisap/motion-canvas` (Agent Skill, multi-file: 51 files)
- Install (CLI): `npx skillmds add udnisap/motion-canvas`
- Raw SKILL.md: https://api.skillmd.com/api/skills/udnisap/motion-canvas/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: udnisap (https://skillmd.com/u/udnisap)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/udnisap/motion-canvas

---


# Motion Canvas

TypeScript library for creating animated videos programmatically using generator functions.

## Project Setup

```bash
npm init @motion-canvas@latest    # Create new project
npm install && npm start          # Run dev server at localhost:9000
```

**Project structure:**
```
my-project/
├── src/
│   ├── project.ts         # Main project config
│   └── scenes/            # Animation scenes
├── vite.config.ts
└── package.json
```

## Core Concepts

### 1. Project Configuration

```ts
// src/project.ts
import {makeProject} from '@motion-canvas/core';
import scene1 from './scenes/scene1?scene';  // Note: ?scene suffix required

export default makeProject({
  scenes: [scene1],
  // audio: audioFile,  // Optional: sync animations to voiceover
});
```

### 2. Scenes

Scenes use generator functions - `yield*` pauses to render frames:

```tsx
import {makeScene2D, Circle, Rect, Txt} from '@motion-canvas/2d';
import {createRef, all, waitFor, waitUntil} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();

  view.add(<Circle ref={circle} size={100} fill="#e13238" />);

  yield* circle().position.x(300, 1);  // Move right over 1 second
  yield* waitFor(0.5);                  // Pause 0.5 seconds
  yield* circle().position.x(0, 1);    // Move back
});
```

### 3. Nodes (Visual Elements)

```tsx
// Shapes
<Circle size={100} fill="#e13238" />
<Rect width={200} height={100} fill="blue" radius={10} />
<Line points={[[0,0], [100,100]]} stroke="white" lineWidth={4} />

// Text
<Txt text="Hello" fontSize={48} fill="white" fontFamily="Arial" />

// Media
<Img src={imagePath} width={400} />
<Video ref={videoRef} src={videoPath} />

// Code blocks with syntax highlighting
<Code code={`const x = 1;`} fontSize={24} />
```

### 4. References

Store node references for animation:

```tsx
const circle = createRef<Circle>();
view.add(<Circle ref={circle} />);
yield* circle().scale(2, 1);  // Call with () to access node
```

### 5. Signals (Reactive Values)

```ts
const radius = createSignal(3);
const area = createSignal(() => Math.PI * radius() * radius());  // Computed

// Animate signal
yield* radius(5, 2);  // Change from 3 to 5 over 2 seconds
// area() automatically updates
```

### 6. Animation Patterns

**Sequential:**
```ts
yield* animation1();
yield* animation2();
```

**Parallel:**
```ts
yield* all(
  circle().position(100, 1),
  circle().fill('red', 1),
);
```

**Staggered:**
```ts
yield* sequence(0.1, anim1(), anim2(), anim3());  // 0.1s delay between each
```

**Looping:**
```ts
yield* loop(5, i => circle().rotation(360, 1));
```

### 7. Time Events (Audio Sync)

```ts
yield* waitUntil('intro-end');     // Pause until marker in editor timeline
yield* circle().scale(2, useDuration('grow'));  // Duration from timeline
```

### 8. Layouts (Flexbox)

```tsx
<Layout layout direction="row" gap={20} alignItems="center">
  <Circle size={50} />
  <Rect width={100} height={50} />
</Layout>
```

### 9. Scene Transitions

```ts
yield* slideTransition(Direction.Left);
yield* fadeTransition(0.5);
yield* zoomInTransition();
```

### 10. Code Animations

```tsx
const codeRef = createRef<Code>();
view.add(<Code ref={codeRef} code={initialCode} />);

yield* codeRef().code('new code', 1);                    // Replace all
yield* codeRef().code.replace(range, 'replacement', 1); // Replace range
yield* codeRef().selection(codeRef().findFirstRange('text'), 0.5);  // Highlight
```

## Common Easing Functions

```ts
import {easeInOutCubic, easeOutBack, linear} from '@motion-canvas/core';
yield* node().scale(2, 1, easeOutBack);  // Overshoot effect
```

## Rendering

Click **RENDER** in editor UI. Configure in Video Settings tab:
- Resolution, frame rate, background color
- Frame range, color space
- FFmpeg plugin for video output

## References

- [API Reference](references/api-reference.md) - Comprehensive API documentation
- [Patterns](references/patterns.md) - Common animation patterns and examples

## Documentation

Two entry points: use **technique docs** for deep how-to and runnable snippets; use **topic index** for package/component map and short guides.

### Technique-based (docs/)

Task-specific technique guides with "When to use", import maps, and runnable snippets.

- [docs/index.md](docs/index.md) — Technique index (technique → doc), dependency diagram, "For AI agents" notes. Use to find which doc covers a topic (e.g. code highlighting → 07, compositing → 09).
- [docs/agent-quickref.md](docs/agent-quickref.md) — "I need to do X" lookup: task → doc + 1-line snippet. Load the linked doc for full imports and snippets.

| Doc | When to read |
|-----|--------------|
| [docs/01-setup-and-project.md](docs/01-setup-and-project.md) | Project, Vite, scenes, audio |
| [docs/02-scenes-and-flow.md](docs/02-scenes-and-flow.md) | Scenes, waitUntil, all/chain/loop, cancel/join |
| [docs/03-signals-and-refs.md](docs/03-signals-and-refs.md) | createSignal, createComputed, createRef, makeRef |
| [docs/04-2d-components.md](docs/04-2d-components.md) | Shapes, Line, Txt, Img, Path, Grid, Ray |
| [docs/05-layouts.md](docs/05-layouts.md) | Layout, direction, grow, gap |
| [docs/06-code-block.md](docs/06-code-block.md) | CodeBlock: edit, insert, selection |
| [docs/07-code-highlighting.md](docs/07-code-highlighting.md) | Code, LezerHighlighter, CODE, append/prepend |
| [docs/08-transitions-and-easing.md](docs/08-transitions-and-easing.md) | slideTransition, zoomIn/Out, ease, map/arcLerp |
| [docs/09-compositing-and-masking.md](docs/09-compositing-and-masking.md) | compositeOperation, clip, cache, blur |
| [docs/10-images-and-media.md](docs/10-images-and-media.md) | Img, Gradient, video, SVG, Path |
| [docs/11-custom-shaders.md](docs/11-custom-shaders.md) | Custom GLSL, fragment shaders, uniforms |
| [docs/12-three-and-3d.md](docs/12-three-and-3d.md) | Three.js / WebGL in scene |
| [docs/13-parallax-and-camera.md](docs/13-parallax-and-camera.md) | Parallax, FOV, zoomInTransition(BBox) |
| [docs/14-deferred-and-buffers.md](docs/14-deferred-and-buffers.md) | GBuffer, LBuffer, multiply/lighter |
| [docs/15-advanced-patterns.md](docs/15-advanced-patterns.md) | createRefMap/Array, Ray, CubicBezier, tween(fn), reparent |

### Topic-based (docs/topics/)

Package list, component list, and feature guides (getting started, scenes, signals, editor, rendering, plugin, examples). Byte-size topic files.

- [docs/topics/index.md](docs/topics/index.md) — Package table, component table, feature guide links. Use for package/component lookup and short reads.

### Repos (runnable examples)

Runnable examples and optional docs site are included as **git submodules** under `repos/` (e.g. `repos/examples`). See [docs/topics/examples.md](docs/topics/examples.md) for how to run them. Clone the skill with `git clone --recurse-submodules` or run `git submodule update --init --recursive` after clone to populate `repos/`.