106.9K+Download
Skip to the usage guide
Motion Canvasby VideoZero

Motion Canvas Skill.

Write Motion Canvas scenes with generators, reactive signals and reusable nodes.

  • TypeScript
  • Canvas Animation
Download OpenDesignView Usage Guide
Source Review · motion-canvasSKILL.md
Task Write Motion Canvas scenes with generators, reactive signals and reusable nodes. Produces Motion Canvas scene code using the project's existing setup. Before You Start Bring an existing Motion Canvas project, its installed version and a scene brief with the action order. Decide which values should be shared signals and which moments need named timing events.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Write Motion Canvas scenes with generators, reactive signals and reusable nodes

Build Motion Canvas scenes using generator timing, reactive signals, node references, shapes and explicit scene transitions.

Source-based workflowNot an execution benchmark

The Working Approach

motion-canvas is a framework reference for writing Motion Canvas scenes in TypeScript. It explains generator-driven sequencing, reactive signals, references and the scene hierarchy, then shows how to combine them with shapes, text, paths and media.

The source includes practical state and timing mechanics: saving and restoring nodes, waiting for named events, running background threads and ending a custom transition. It is useful when an agent already knows the scene to build and needs the correct framework concepts to express it.

Expected Deliverables

  • Motion Canvas scene code using the project's existing setup.
  • Reusable signals, components and timing sequences.
  • A project ready for its configured preview and rendering workflow.
See the Example Brief

From Brief to Review

  1. 01
    Define scene objects

    Create the needed shapes and text, assign references and place them in a clear node hierarchy.

  2. 02
    Connect state to timing

    Use signals for values that change and generator functions for the sequence. Use all() for actions that run together and yield* for a sequence that waits for an animation to finish. Named waitUntil() events can align a scene with a narration cue.

  3. 03
    Check transitions and output

    Add the incoming scene's nodes before starting slideTransition(), so they do not pop in afterward. A custom useTransition() returns an end function that must be called after the transition animation. Inspect the configured preview or render and preserve project-specific output settings.

02 When to Use It

When to Use It

Bring an existing Motion Canvas project, its installed version and a scene brief with the action order. Decide which values should be shared signals and which moments need named timing events.

A Good Fit

  • A code animation needs precise sequencingGenerators and named timing events make the relationship between actions explicit.
  • Several objects share a changing valueComputed signals can derive geometry from one source rather than manually updating every node.

Limits to Check

  • The framework must be availableThe Skill is a reference, not a bundled working Motion Canvas runtime.
  • It is separate from editor automationSeeking, screenshots and HTTP render control belong to the companion motion-canvas-agent Skill.
  • Reference examples need project checksThe existing framework version and output configuration should govern how examples are adapted.

Bring These Inputs

  • Scene briefDescribe the visible objects, action order and explanation or story.
  • Project setupProvide the current Motion Canvas source and installed version.
  • Timing and outputSpecify duration, events, frame size and required render format.

03 Decisions That Matter

Decisions That Matter

  1. Reactive scene relationships

    A computed signal can keep dependent dimensions synchronized.

  2. Readable sequencing

    Generator code makes waits, parallel actions and transitions visible in the source.

  3. Reusable components

    Custom nodes and saved states support repeated visual elements and reversible actions.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Describe the visible objects, action order and explanation or story.

Upstream Source File
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use motion-canvas to build a short scene in my existing project showing three packets moving through a queue. Give each packet a stable identity and derive the queue spacing from one signal. Introduce the labels before the action, move packets sequentially, and keep the count synchronized with the visible state. Use a named event for the final explanation hold. Preserve the installed framework version and current render settings. Deliver the scene code and inspect the transition into and out of it, especially any object that appears only after the transition has finished.

Inspect the Result

Check the actual output against these observable criteria.

  • Check signal relationships and stable object references.
  • Verify sequence order, background threads and transition completion.
  • Inspect the configured preview and actual rendered output separately.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
VideoZero
Repository
VideoZero/skills
Skill File
SKILL.md
License
Apache-2.0
Reviewed Snapshot
2026-11-02 · 670ff96af614
Editorial Source Summary
Write Motion Canvas scenes with generators, reactive signals and reusable nodes.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

What do generator functions contribute?

They describe time-based scene actions through yields, waits and composed animation operations. The source uses them as the main sequencing mechanism.

What are signals used for?

Signals hold changing values and can derive other values reactively, such as a shape's size from a shared radius.

Does this include screenshot automation?

The framework reference covers scene authoring. The companion motion-canvas-agent Skill documents an HTTP control and screenshot bridge for a running editor.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md