SkillFoxx

VideoZero Skills

Three Motion Canvas skills: a code animation reference, HTTP editor control and 12 animation principles for an agent.

  • 77 ★ on the repository
  • Last commit
  • Apache-2.0
Skill

Extended access

Why this level

  • The editor control skill opens a local HTTP API that seeks, changes settings and starts renders.
All reasons and checks

videozero/skillsAuthor:VideoZero

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/videozero-skills

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The editor control skill opens a local HTTP API that seeks, changes settings and starts renders.

This is third-party code. Review the repository files before installing.

What it does

VideoZero Skills is a set of three skills for creating animated videos in Motion Canvas, where scenes are written in code. The `motion-canvas` skill is a reference: components, signals, refs, layout, transitions, filters, gradients, camera, LaTeX, media and 18 reference documents. The `motion-canvas-agent` skill gives an agent HTTP control of a running editor. The agent seeks to any frame, takes screenshots, inspects the scene graph, changes resolution, frame rate and background, and starts and aborts rendering. This way it checks its own animation by sight. The `animation-basics` skill recalls the 12 principles of animation and timing hints: squash and stretch, anticipation, staging and others.

Who it is for. Developers and explainer video authors who write animation in Motion Canvas and want an agent to check frames itself.

Good fit when

  • A Motion Canvas scene is being written and the agent needs exact component and signal names.
  • The agent should seek to frame 120 and take a screenshot to see the result of an edit.
  • You need to inspect the scene graph and find a node that moved off screen.
  • A render starts with another frame rate and range without opening the UI.
  • The animation lacks life and hints on animation principles help choose timing.

Not a fit when

  • The animation is not made in Motion Canvas: the reference and API cover only it.
  • You need a ready video editor with a timeline and mouse.
  • The project cannot be extended with `agent-plugin.ts` and `agent-client.ts` files: HTTP control does not work without them.

Example request

Make a scene of three blocks that appear one by one with spring animation, seek to frame 90 and show a screenshot.

Limitations

Editor control works only after manual setup: copy `assets/agent-plugin.ts` to the project root and `assets/agent-client.ts` to `src/`, connect `agentPlugin` in `vite.config.ts` and `agentClient` in `project.ts`, then run `npm start` and open `http://localhost:9000` in a browser. The API listens on the local address `http://localhost:9000/__agent`. For screenshots the agent needs an open browser tab with the editor. The skills are reference material and rely on the Motion Canvas documentation.

How to disable. Delete the installed `motion-canvas`, `motion-canvas-agent` and `animation-basics` folders from the skills directory. Remove `agent-plugin.ts`, `agent-client.ts` and the hookups in `vite.config.ts` and `project.ts` from the project.

FAQ

How do I install the VideoZero skills?

Run `npx skills add videozero/skills`. All three are installed: `motion-canvas`, `motion-canvas-agent` and `animation-basics`.

What can the editor HTTP API do?

The address `http://localhost:9000/__agent` accepts `/seek`, `/play`, `/pause`, `/screenshot`, `/settings`, `/render` and `/scene-graph`. Seeking, screenshots, resizing, starting a render and reading the scene graph are plain `curl` requests.

How do I connect the plugin to a project?

Copy `assets/agent-plugin.ts` to the root and `assets/agent-client.ts` to `src/`. Then add `agentPlugin({screenshotDir: './screenshots'})` to Vite plugins and `agentClient()` to `makeProject`.

What is in the motion-canvas reference?

Components, signals, refs, layout, transitions, filters, gradients, camera, LaTeX, media and 18 reference documents on springs, SVG, sounds, presentation mode and rendering.

Why the animation-basics skill?

It reminds the agent of the 12 animation principles and timing hints, for example squash and stretch conserving area, anticipation and staging: one action at a time and pauses for the viewer.

Discussion

No questions or reviews yet.

Skills

Over 50 open skills for motion graphics, animation and video: kinetic typography, charts, explainers, TikTok and Reels, WebGL, Manim

SkillMinimal access1.4K

Seventeen skills for motion graphics: an agent builds looping 3D scenes, titles and clips with Remotion, Three.js and Python.

SkillExtended access1.6K

Two skills for short films where every frame and the music are computed in code on canvas, with no images or keys, rendered to MP4

PluginExtended access62

Motion Video Skill

motion-video-skill

1080p beat-synced video: HyperFrames and GSAP, voice-over, karaoke captions, sound effects and music. Provider keys are kept in the CLI configuration

SkillBroad access142

Twelve skills that make an agent build single-file HTML animations: slides, protocol diagrams, architecture diagrams and demos for screen recording

SkillExtended access1.8K

Nine motion design skills for Claude Code: timing, color, composition, After Effects, Remotion, logos and backgrounds.

PluginMinimal access229

README in short

The repository provides reference documentation and tooling for programmatic animation. Additional material is on archive.canvascommons.io.

README badge

Original SKILL.md

---
name: motion-canvas-agent
description: Agent tooling for Motion Canvas — seek, screenshot, scene graph inspection, settings control, and rendering via HTTP API. Use when an agent needs to visually verify, screenshot, inspect or render a running Motion Canvas editor. Requires a browser with the editor open.
---

# Motion Canvas Agent Plugin

Full programmatic control of a running Motion Canvas editor via HTTP. Seek to any frame, capture screenshots, inspect the scene graph, change resolution/fps/background, and trigger rendering — all without browser automation.

## Architecture

```
Agent (curl/script)  ──HTTP──▶  Vite Server (agent-plugin.ts)  ──HMR WS──▶  Browser (agent-client.ts)
                                      │                                           │
                                      ▼                                           ▼
                                screenshots/                               Player + Renderer
                                (PNG files)                                + ProjectMetadata
```

## Setup

### 1. Copy plugin files into your project

- `assets/agent-plugin.ts` → project root
- `assets/agent-client.ts` → `src/`

### 2. vite.config.ts

```ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
import {agentPlugin} from './agent-plugin';

export default defineConfig({
  plugins: [
    motionCanvas(),
    agentPlugin({screenshotDir: './screenshots'}),
  ],
});
```

### 3. project.ts

```ts
import {makeProject} from '@motion-canvas/core';

Report a problem