106.9K+Download
Skip to the usage guide
Motion Canvas Agentby VideoZero

Motion Canvas Agent Skill.

Seek, inspect, screenshot and render a running Motion Canvas editor.

  • Motion Canvas
  • Scene Review
Download OpenDesignView Usage Guide
Source Review · motion-canvas-agentSKILL.md
Task Seek, inspect, screenshot and render a running Motion Canvas editor. Produces A local control bridge attached to a Motion Canvas project. Before You Start Start with an existing Motion Canvas project and permission to add both integration plugins. Keep its editor open, then identify the frames and output settings the agent should inspect.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Seek, inspect, screenshot and render a running Motion Canvas editor

Control a local Motion Canvas editor through HTTP for exact-frame screenshots, scene-graph inspection, settings and render actions.

Source-based workflowNot an execution benchmark

The Working Approach

motion-canvas-agent connects an agent to a running Motion Canvas editor through a local HTTP API. It can seek to a frame, capture a screenshot, inspect the scene graph, change preview or render settings and trigger an export. The browser still runs the player and renderer.

The integration uses two files: a Vite server plugin and a client plugin inside the Motion Canvas project. Requests travel through the development server to the open browser. This makes exact-frame inspection scriptable, but it requires a live editor connection rather than acting as an independent headless renderer.

Expected Deliverables

  • A local control bridge attached to a Motion Canvas project.
  • Frame-specific screenshots and scene-graph inspection data.
  • Requested render actions and recorded preview/render settings.
See the Example Brief

From Brief to Review

  1. 01
    Connect both plugin sides

    Add the server plugin to Vite and the client plugin to the Motion Canvas project. Start the development server and open the editor in a browser.

  2. 02
    Inspect a known frame

    Check connection status, set the intended size and seek to an exact frame. Capture it and compare scene-graph values with the visible result.

  3. 03
    Render with explicit settings

    Inspect errors and distinguish preview settings from rendering settings. Trigger the requested export and verify its actual artifact after completion.

02 When to Use It

When to Use It

Start with an existing Motion Canvas project and permission to add both integration plugins. Keep its editor open, then identify the frames and output settings the agent should inspect.

A Good Fit

  • An agent needs exact-frame evidenceThe API exposes seeking and screenshot capture without relying on manually timed browser playback.
  • A scene's visible state is unclearThe recursive graph reports node types, positions, sizes and text to support visual diagnosis.

Limits to Check

  • An open browser is requiredThe server relays to the running player and renderer; a disconnected editor cannot provide the intended control.
  • The endpoint should remain localThe source warns against exposing the development control API to the network.
  • A render request is not completionAn accepted API action still needs output-file and playback verification.

Bring These Inputs

  • Existing projectProvide the Motion Canvas project and permission to add the two integration files.
  • Inspection targetsName the scenes, frame numbers and visual conditions to check.
  • Output settingsSpecify frame size, range, rendering frame rate and destination.

03 Decisions That Matter

Decisions That Matter

  1. Repeatable captures

    The same frame can be revisited after a code correction.

  2. State visibility

    Scene-graph inspection complements screenshots with concrete node values.

  3. Separated settings

    Preview and rendering controls can be inspected instead of assuming they are identical.

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

Provide the Motion Canvas project and permission to add the two integration files.

Upstream Source File
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/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-agent to inspect my running Motion Canvas sequence after the plugin is connected. Confirm the editor connection, then capture the first frame, the packet handoff and the final frame at the requested 1920 by 1080 size. Inspect the scene graph where the packet appears clipped and check the error endpoint. Keep the API bound locally. Record preview and rendering frame rates separately, then trigger the approved render range. Report the actual exported file only after it exists and plays; do not treat the render endpoint's acknowledgment as a completed export.

Inspect the Result

Check the actual output against these observable criteria.

  • Confirm the browser connection before seeking or capturing.
  • Compare screenshot frame metadata with the requested frame.
  • Verify output settings, errors and the completed render artifact.

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
Seek, inspect, screenshot and render a running Motion Canvas editor.

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

Can it run without a browser?

The documented architecture requires the Motion Canvas editor to be open. The client plugin exposes the live player and renderer through the server bridge.

Does it write animation scenes?

Its main role is control and inspection. The companion motion-canvas Skill covers framework concepts and scene authoring.

Can I expose the API on a shared server?

The source explicitly recommends localhost-only operation. The control endpoints should not be exposed as a production network service.

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-agent/SKILL.md