Animate — скилл Claude Code, который рисует короткие анимационные ролики кодом на canvas

Animate — это скилл для Claude Code, который делает короткие анимированные ролики целиком кодом. Внутри один элемент canvas, который рисуется и озвучивается процедурно. Кадр за кадром результат один и тот же, поэтому рендер получается воспроизводимым. Готовый ролик собирается в MP4 через headless-браузер и ffmpeg.

Смысл подхода простой. Видеоряд не импортируется из библиотеки анимации, а рисуется кодом по правилам, которые задаёт автор ролика. Отсюда два следствия. Во-первых, можно получить любой вид графики — от вырезанной бумаги до изометрии. Во-вторых, звук тоже синтезируется в коде, а не берётся из стоковой библиотеки.

Репозиторий открыт под лицензией MIT, у него 563 звезды и 91 форк.

Как устроен процесс

Скилл сначала задаёт несколько вопросов. Потом он просит человека утвердить три дешёвые вещи, и только после этого тратит время на анимацию.

Проверки на последнем шаге — не формальность. Инструмент измеряет то, что человек обычно пропускает глазами: например, совпадают ли монтажные склейки с битами трека.

Семь встроенных стилей

Стиль устроен как подключаемый модуль. Грамматика сюжета, тайминг, звук, рендерер и инструменты остаются одинаковыми. Стиль отдаёт только набор для рисования.

Стиль выбирается в файле ролика одной строкой — "style": "riso".

Свой стиль по своим референсам

Если ни один готовый стиль не подходит, скилл делает новый. Человек даёт референсы: видео, картинки или веб-страницу. Дальше идёт процедура:

1. Скилл измеряет палитру, толщину линии, текстуру, характер движения и ритм склеек.
2. Он рисует 1–2 кадра в новом стиле рядом с референсами. Сравнение делает инструмент tools/compare.mjs.
3. Человек ставит лайк.
4. Стиль сохраняется в папку styles/<name>/ внутри проекта, и дальше его используют все следующие ролики.

Референсные файлы остаются на машине человека. Они никуда не отправляются.

В каждой папке стиля лежат STYLE.md с правилами, палитрой, привычками движения и чек-листом кадра, файл kit.js, картинка sample.png и небольшой демо-ролик.

Что уже встроено

• Грамматика сюжета в папке grammar. Это 8 форматов для коротких роликов. История — это хронология, соединённая переливами формы. Миссия режется по битам. Плюс общие правила для любого ролика: одна константа, один цвет — один смысл, тишина перед кульминацией и самая громкая точка именно на ней, конец — это начало, изменённое. И чек-лист того, что должно быть в каждом отдельном кадре.
• Набор кода в папке kit. Случайность с фиксированным зерном и линия, которая «кипит» каждые две секунды. Камеры. Рендерер с переходами через смену формы: старый мир сжимается на одном объекте, объект перетекает в свою копию из нового мира, новый мир раскрывается из него. Дальше — раскадровка, синтезатор и блок нормализации громкости под телефон.
• Инструменты в папке tools. Сборка: собирает один самодостаточный index.html из ролика, набора кода и стиля. Тестовые плитки. Кадры. Раскадровка. Экспорт: кадры в WAV, затем в отдельные дорожки, затем в MP4. Проверка: контактные листы и измерения, включая обрезанный и налезающий друг на друга текст. Сравнение кадра с референсом. Замер референса. Галерея. И проверка хешей кадров, которая показывает, что правка набора кода не сломала ролик — картинки остались пиксель в пиксель теми же.
• Правила мастерства в файле craft.md. Это всё, что авторы проекта узнали, пока делали свои ролики. Например: устойчивый пад задаёт громкость всей секции, а не отдельные звуки. Или: камера ставит точку мира на точку экрана.
• Озвучка. Скилл пишет текст, берёт по одной записи на каждую строку через коннектор ElevenLabs или берёт вашу запись. Локально, через faster-whisper, он определяет, когда произнесено каждое слово, и подгоняет картинку под слова. Если строку перезаписать, картинка пересчитается сама.
• Своя музыка. Дайте трек — скилл разберёт биты: темп, такты, сильные удары, дропы. Монтаж идёт по битам песни, а кульминация попадает на самый громкий акцент. Если трека нет, скилл напишет партитуру кодом.
• Реальный продукт. Скилл сделает скриншоты вашего сайта или возьмёт файлы логотипа и вставит настоящие экраны внутрь выбранного стиля.
• Все форматы из одного ролика. Форматы 9:16, 1:1, 4:5 и 16:9 раскладываются под каждую форму заново, а не вырезаются из одного кадра.
• Дорогое на вид движение. Пружины в аналитическом виде внутри набора кода и по желанию размытие движения для гладких стилей.
• Параллельная сборка. Длинные ролики делятся на сцены, по одному файлу на агента, и склеиваются при сборке.

В планах разработчиков — стиль motion-дизайна на WebGL: трассировка лучей для трёхмерной картинки, размытие между кадрами, свечение. Инструменты экспорта и проверки уже умеют запускать такие ролики на видеокарте и предупреждают, если доступно только программное рисование.

Установка

Требования: Claude Code, Node 18+, Playwright с Chromium и ffmpeg в PATH. Шрифты — локальные системные, с подстановками для Windows, macOS и Linux. Для озвучки нужен Python с faster-whisper, а для голоса — коннектор ElevenLabs в Claude (Настройки → Коннекторы).

npm i -g playwright && npx playwright install chromium

Как плагин:

/plugin marketplace add cth9191/animate
/plugin install animate@animate

Или скопировать папку скилла вручную: plugins/animate/skills/animate/ в ~/.claude/skills/animate/.

Примеры запросов

Скилл вызывается одной командой /animate и дальше обычным текстом:

/animate a 45-second history of the bicycle, cut paper
/animate how a hash map works, in the math style
/animate a short about our API in the style of these screenshots: ./refs/
/animate a 20s launch reel for https://my-product.com, cut to ./audio/song.mp3, vertical and square
/animate a narrated 45s explainer of how DNS works, math style, 16:9, voice from ElevenLabs

Ролики создаются в проекте в папке pieces/<name>/. Инструментами можно пользоваться и напрямую:

SKILL=~/.claude/skills/animate            # or the plugin's install path
node $SKILL/tools/build.mjs pieces/my-piece
node $SKILL/tools/tile.mjs pieces/my-piece tile.png 24 48 96
node $SKILL/tools/still.mjs pieces/my-piece 2.5,9,14 frames.png --scale 0.5
node $SKILL/tools/storyboard.mjs pieces/my-piece
node $SKILL/tools/beats.mjs pieces/my-piece/audio/track.wav pieces/my-piece --start 12
node $SKILL/tools/capture.mjs https://my-product.com pieces/my-piece/assets/home.png
node $SKILL/tools/voice.mjs pieces/my-piece
node $SKILL/tools/export.mjs pieces/my-piece --share --formats 9:16,1:1,16:9
node $SKILL/tools/review.mjs pieces/my-piece
node $SKILL/tools/measure/refs.mjs references/my-look/
node $SKILL/tools/compare.mjs references/my-look/a.png pieces/my-piece 2.5 compare.png --auto-trim

Собранный index.html открывается в браузере для просмотра. По клику слышно партитуру, а параметр ?t=12.5 останавливает картинку на нужном моменте.

Пример из репозитория

В папке examples/history-of-ai/ лежит готовый ролик длиной 60 секунд в стиле вырезанной бумаги. В нём 15 эпох — от вопроса Тьюринга «Могут ли машины мыслить?» 1950 года до Claude Code 2025 года. Маленькая оранжевая искра за каждую эпоху получает по одному лучу. В ролике 13 переходов через смену формы, одна резкая склейка на кульминации и партитура, написанная кодом.

Собрать его можно одной командой:

node plugins/animate/skills/animate/tools/build.mjs plugins/animate/skills/animate/examples/history-of-ai

Главная инструкция скилла лежит в файле SKILL.md. Лицензия — MIT.