SkillFoxx
Telegram

VideoZero Skills

Три скилла для Motion Canvas: справочник по анимации в коде, HTTP-управление редактором и 12 принципов анимации для агента.

  • 77 ★ репозитория
  • Последний коммит
Скилл

Расширенный доступ

Почему такой уровень

  • Скилл управления редактором открывает локальный HTTP API, который перематывает, меняет настройки и запускает рендер.
Все причины и проверки

videozero/skillsАвтор:VideoZero

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/videozero-skills

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

  • Скилл управления редактором открывает локальный HTTP API, который перематывает, меняет настройки и запускает рендер.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

VideoZero Skills — набор из трех скиллов для создания анимированных роликов в Motion Canvas, где сцены пишутся кодом. Скилл `motion-canvas` служит справочником: компоненты, сигналы, ссылки, раскладка, переходы, фильтры, градиенты, камера, LaTeX, медиа и 18 справочных документов. Скилл `motion-canvas-agent` дает агенту управление запущенным редактором по HTTP. Агент перематывает на любой кадр, делает скриншоты, смотрит дерево сцены, меняет разрешение, частоту кадров и фон, запускает и останавливает рендер. Так он проверяет собственную анимацию глазами, а не вслепую. Скилл `animation-basics` напоминает 12 принципов анимации и подсказки по времени: сжатие и растяжение, предвосхищение, постановка и другие.

Для кого. Разработчикам и авторам объясняющих роликов, которые пишут анимацию в Motion Canvas и хотят, чтобы агент сам проверял кадры.

Подходит, если

  • Пишется сцена Motion Canvas, и агенту нужны точные названия компонентов и сигналов.
  • Агент должен перемотать на кадр 120 и снять скриншот, чтобы увидеть результат правки.
  • Надо проверить дерево сцены и найти узел, который уехал за экран.
  • Рендер запускается с другой частотой кадров и диапазоном, не открывая интерфейс.
  • Анимации не хватает живости, и подсказки по принципам анимации помогут выбрать тайминг.

Не подходит, если

  • Анимация делается не в Motion Canvas: справочник и API рассчитаны только на него.
  • Нужен готовый видеоредактор с таймлайном и мышью.
  • Проект нельзя дополнять файлами `agent-plugin.ts` и `agent-client.ts`: без них управление по HTTP не работает.

Пример запроса к агенту

Сделай сцену из трех блоков, которые по очереди появляются с пружинной анимацией, перемотай на кадр 90 и покажи скриншот.

Ограничения

Управление редактором работает только после ручной настройки: нужно скопировать `assets/agent-plugin.ts` в корень проекта и `assets/agent-client.ts` в `src/`, подключить `agentPlugin` в `vite.config.ts` и `agentClient` в `project.ts`, затем запустить `npm start` и открыть `http://localhost:9000` в браузере. API слушает локальный адрес `http://localhost:9000/__agent`. Для скриншотов агенту нужна открытая вкладка браузера с редактором. Скиллы справочные и опираются на документацию Motion Canvas.

Как отключить. Удалите установленные папки `motion-canvas`, `motion-canvas-agent` и `animation-basics` из каталога скиллов. Из проекта уберите `agent-plugin.ts`, `agent-client.ts` и подключения в `vite.config.ts` и `project.ts`.

Частые вопросы

Как поставить скиллы VideoZero?

Выполните `npx skills add videozero/skills`. Установятся все три: `motion-canvas`, `motion-canvas-agent` и `animation-basics`.

Что умеет HTTP API редактора?

Адрес `http://localhost:9000/__agent` принимает `/seek`, `/play`, `/pause`, `/screenshot`, `/settings`, `/render` и `/scene-graph`. Перемотка, скриншот, смена размера, запуск рендера и чтение дерева сцены идут обычными запросами `curl`.

Как подключить плагин к проекту?

Скопируйте `assets/agent-plugin.ts` в корень, `assets/agent-client.ts` в `src/`. Затем добавьте `agentPlugin({screenshotDir: './screenshots'})` в плагины Vite и `agentClient()` в `makeProject`.

Что в справочнике motion-canvas?

Компоненты, сигналы, ссылки, раскладка, переходы, фильтры, градиенты, камера, LaTeX, медиа и еще 18 справочных документов по пружинам, SVG, звукам, режиму презентации и рендеру.

Зачем скилл animation-basics?

Он напоминает агенту 12 принципов анимации и подсказки по времени, например сжатие и растяжение с сохранением площади, предвосхищение и постановку: одно действие за раз, паузы для зрителя.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Более 50 открытых скиллов для моушн-графики, анимации и видео: кинетическая типографика, графики, объяснялки, TikTok и Reels, WebGL, Manim

СкиллМинимальный доступ1,4 тыс.

Семнадцать скиллов для motion-графики: агент рисует зацикленные 3D-сцены, заставки и ролики через Remotion, Three.js и Python.

СкиллРасширенный доступ1,6 тыс.

Два скилла: короткие фильмы, где каждый кадр и музыка вычисляются кодом на canvas, без картинок и ключей, рендер в MP4

ПлагинРасширенный доступ61

Motion Video Skill

motion-video-skill

Видео 1080p с синхронизацией по ударам: HyperFrames и GSAP, озвучка, караоке-субтитры, звуки и музыка. Ключи провайдеров хранятся в конфигурации CLI

СкиллШирокий доступ141

Двенадцать скиллов, по которым агент собирает однофайловые HTML-анимации: слайды, схемы протоколов, архитектурные диаграммы и демо для записи экрана

СкиллРасширенный доступ1,8 тыс.

Девять скиллов по моушн-дизайну для Claude Code: тайминг, цвет, композиция, After Effects, Remotion, логотипы и фоны.

ПлагинМинимальный доступ226

Коротко о README

Репозиторий дает справочную документацию и инструменты для программной анимации. Дополнительные материалы лежат на сайте archive.canvascommons.io.

Бейдж для README

Исходный 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';

Сообщить о проблеме