Animate — скилл

Скилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4

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

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

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

  • Запускает на вашей машине Node, Chromium из Playwright и ffmpeg и пишет файлы роликов в папку проекта
  • Ищет факты в интернете и снимает скриншоты страниц, ссылку на которые вы дали
  • Реплики озвучки уходят во внешний сервис ElevenLabs, если вы подключили его коннектор
Все причины и проверки

cth9191/animate

Установка

Работает в

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

npx skillfoxx add skills/animate

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

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

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

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

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

  • Запускает на вашей машине Node, Chromium из Playwright и ffmpeg и пишет файлы роликов в папку проекта
  • Ищет факты в интернете и снимает скриншоты страниц, ссылку на которые вы дали
  • Реплики озвучки уходят во внешний сервис ElevenLabs, если вы подключили его коннектор

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

Что делает

Animate делает короткие анимационные ролики целиком из кода: один холст `canvas`, процедурная графика и музыка, кадры считаются детерминированно, а готовое видео собирают в MP4 через Chromium из Playwright и ffmpeg. Скилл запускается командой вроде `/animate a 45-second history of the bicycle, cut paper`. Он задает несколько вопросов про тему, форматы, голос, стиль и вашу музыку, показывает галерею стилей и только после трех согласований берется за анимацию. Согласований три. Сначала сюжет: формат ролика и пронумерованная таблица сцен, факты проверены поиском в интернете. Потом внешний вид: два-четыре кадра в полный размер, а для нового стиля парные сравнения с вашими образцами. Затем раскадровка: каждая сцена одним ключевым кадром, со звуком и переходом в следующую, а вы одобряете или отклоняете панели по номерам. После этого скилл анимирует утвержденные панели, собирает файл `index.html`, размечает озвучку по словам и рендерит видео. Готовность скилл измеряет: скрипт `review.mjs` проверяет, что склейки попадают в сетку ритма, как распределена громкость, не обрезан ли текст и не налезает ли он на интерфейс телефона. Один ролик выходит сразу в форматах 9:16, 1:1, 4:5 и 16:9, каждый скомпонован отдельно. Свою музыку скилл раскладывает по ударам и режет сцены по ним, а реальные экраны вашего продукта снимает со страницы и анимирует внутри выбранного стиля.

Для кого. Маркетологам, дизайнерам и основателям, которым нужны короткие объясняющие ролики и вертикальные рекламные видео, и разработчикам, готовым собирать их из кода в Claude Code.

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

  • Нужен ролик на 20–60 секунд с историей, объяснением принципа или запуском продукта, а After Effects и студии нет
  • Видео должно выйти сразу вертикальным, квадратным и широким, чтобы не обрезать кадр под каждую площадку
  • Есть готовый трек, и сцены нужно резать по его ударам, а самый громкий момент поставить на кульминацию
  • Надо повторить стиль по вашим образцам: скилл замеряет палитру, линию, текстуру и ритм склеек и сохраняет стиль в проекте

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

  • Нужно смонтировать записанное видео из готовых клипов: Animate рисует кадры кодом и не работает с отснятым материалом, для монтажа в каталоге есть video-use
  • Нужна трехмерная сцена: стиль на WebGL с лучевой трассировкой автор пока обещает, а семь готовых стилей двумерные
  • Вы не можете поставить Node 18 или новее, Chromium для Playwright и ffmpeg: без них скилл сообщает команду установки и останавливается
  • Нужен ролик за пару минут: сначала идут вопросы и три согласования, и только потом сборка

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

/animate 45-секундный ролик о том, как работает хеш-таблица, в математическом стиле, формат 16:9

Ограничения

Версия 0.4.0, лицензия MIT. Скилл рассчитан на Claude Code: в описании проекта других агентов нет.

Для работы нужны Node 18 или новее, Playwright с Chromium (`npm i -g playwright && npx playwright install chromium`) и ffmpeg в PATH. Для голоса дополнительно нужен Python с `faster-whisper`, который определяет время каждого слова; без него моменты слов оцениваются приблизительно.

Голос реплик берется из коннектора ElevenLabs в Claude либо из вашей записи, коннектор нужно включить отдельно в настройках Claude. Трехмерный стиль на WebGL значится как планируемый, а скрипты экспорта и проверки уже умеют работать с WebGL на видеокарте и предупреждают, если доступна только программная отрисовка.

Скилл не может прослушать собранную звуковую дорожку и говорит об этом в отчете, поэтому звук стоит прослушать самому. Каждое утверждение на экране сверяется поиском в интернете и записывается с источником в бриф.

Как отключить. Если ставили плагином, выполните `/plugin uninstall animate@animate`. Если копировали папку вручную, удалите `~/.claude/skills/animate/`. Ролики остаются в вашем проекте в папке `pieces/`, их удаляйте сами.

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

Какие стили есть из коробки?

Семь: вырезанная бумага, перекрестная штриховка тушью, ризограф, блокнот, математический стиль в духе manim, пиксельный и изометрический. Восьмой вариант собирается по вашим образцам: видео, кадрам или странице.

Как сделать видео с моей музыкой?

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

Что показывает проверка готового ролика?

Скрипт `review.mjs` выдает контактные листы по сценам и измеряет: попадание склеек в сетку, ход громкости по сюжету, положение главного героя в кадре, тишину перед кульминацией и ее самый громкий момент, а также обрезанный и налезающий текст.

Можно ли вставить в ролик экраны моего сайта?

Да. Скилл снимает страницу скриптом `capture.mjs` или берет файлы логотипов и анимирует настоящие экраны внутри выбранного стиля. Скриншоты кладутся в папку `assets/` ролика.

Где лежат результаты работы?

Ролики создаются в вашем проекте в папке `pieces/<имя>/`. В ней появляются бриф, журнал, исходники сцен, собранный `index.html`, а в `renders/` итоговый `final.mp4` и версия для публикации `share.mp4`.

Обсуждение

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

Скиллы

Два скилла Claude Code для видео целиком из кода: рисованная акварельная анимация и кинетическая типографика

СкиллРасширенный доступ380Звезды репозитория

Скилл для Claude Code и Codex, который превращает тему в озвученный анимационный ролик-объяснение на Remotion с субтитрами и главами

СкиллРасширенный доступ2,8 тыс.Звезды репозитория

Пятнадцать скиллов для Claude Code: запуск продукта, анимированные графики и рилсы целиком из кода, без After Effects

СкиллРасширенный доступ476Звезды репозитория

Скилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами

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

Скилл превращает китайский текст истории или набор упорядоченных картинок в вертикальную рисованную анимацию, немой видеоряд в стиле дневникового комикса

СкиллРасширенный доступ2,3 тыс.Звезды репозитория

Скилл превращает статью, README или сайт в вертикальный промо-ролик на HyperFrames: сначала бриф и согласование, потом ресурсы, сборка и проверка

СкиллРасширенный доступ470Звезды репозитория

Сравнение с похожими

Записи с тем же главным запросом: чем они отличаются.

ЗаписьОфициальныйЗвезды репозиторияГлавное отличие
Animate (эта запись)нет1 066
Claude Motion Designнет720моушен-ролики чистым кодом на HTML, Playwright и ffmpeg без After Effects и Remotion
anything2explainerнет2 835превращает тему в озвученный ролик-объяснение на Remotion с субтитрами и главами
video-useнет30 032монтирует готовое видео: вырезает паузы, цветокоррекция, субтитры

Коротко о README

В репозитории описаны шаги работы скилла от вопросов до выдачи ролика, таблица стилей, состав набора (грамматика сюжета, ядро рендера, инструменты, правила ремесла, озвучка, музыка, форматы), требования и два способа установки. Есть список команд инструментов и пример ролика на шестьдесят секунд с историей ИИ. К каждому стилю приложены правила, образец и небольшой демонстрационный ролик.

Бейдж для README

Исходный SKILL.md

---
name: animate
description: Make a short procedural animation in any style — an explainer, a history, a little story — as a single-file canvas video with a synthesized score, rendered to MP4. Ships with styles (cut paper, crosshatch ink, riso print, sketchbook, manim-style math, pixel art, isometric line art) and makes new ones from the user's references. Walks the user through intake, then three check-ins (story, look, storyboard) before animating, and proves the result with measured review checks. Use when the user asks for an animated video, short, explainer or reel made in code, or wants a look matched from references.
argument-hint: "[what the video is about] [style or reference]"
---

# Animate

You make short animated videos in code: one `<canvas>`, drawn and scored procedurally, deterministic frame by frame, rendered with a headless browser and ffmpeg. The story follows a grammar studied from strong short-form animation; the look is a **style** — a plug-in kit chosen from [styles/](styles/README.md) or made from the user's references with [new-style.md](new-style.md).

**Requirements:** Node 18+, Playwright with Chromium (`npm i -g playwright && npx playwright install chromium`), ffmpeg on PATH. Check them first; if one is missing, tell the user the install command and stop. For a voice-over, Python with `faster-whisper` (`pip install faster-whisper`) times every word; without it the word times are estimated.

All paths below are relative to this skill's base directory. Pieces live in the user's project at `pieces/<name>/` (create `pieces/` if needed); styles the user makes live in `<project>/styles/<name>/`.

## Non-negotiables

1. **No animating before the storyboard is approved.** The check-ins exist because a wrong story or look costs a full build.
2. **Look at references before drawing anything** — the user's, or the style's `sample.png` and demo. Then check every key frame against [grammar/FRAME.md](grammar/FRAME.md) and the style's own checklist in its `STYLE.md`.
3. **Every factual claim on screen is checked with a web search** and listed with its source in the brief.

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

Foxx AIAnimate
Foxx AI

Я Foxx AI и уже разобрал этот инструмент. Спросите про установку, настройку или что угодно еще, отвечу простыми словами.