procedural-film — агентный скилл, который снимает фильм на чистом JavaScript

procedural-film — это agent skill, который превращает любую тему в вертикальный 30-секундный фильм. Каждый пиксель рисуется на canvas ванильным JavaScript, каждый звук синтезируется через Web Audio, поэтому у фильма ноль медиа-ассетов: ни одной картинки, ни одного mp3 в самом видео. На выходе — один самодостаточный HTML-плеер плюс MP4-экспорты. Всё, что нужно для воспроизведения, лежит внутри одного HTML-файла.

Эталонный фильм — examples/butterfly-life, жизненный цикл монарха-бабочки: 17 кадров, 32 секунды, 120 bpm, 1080x1920 при 24 fps. Это вертикальный формат под телефон, отсюда и «phone cut» в экспортах.

• Посмотреть телефонный монтаж: butterfly-life-phone.mp4
• Интерактивный плеер: скачайте butterfly-life.html и откройте в браузере

Что лежит в репозитории

Репозиторий устроен так, что скилл и отработанный пример лежат рядом: симлинк из папки skills агента ведёт внутрь клона, и пример остаётся доступным по пути examples/butterfly-life/ рядом со скиллом. Это удобно — можно в любой момент заглянуть, как выглядит готовый результат «с завода».

Как устроен скилл

Скилл — не один промпт, а полноценный комплект:

• SKILL.md — пайплайн: полная последовательность, по которой агент превращает тему в фильм, от планирования до сдачи
• foundation/ — движок и инструменты, которые копируются в каждый новый проект фильма, чтобы новый фильм не писался с нуля
• templates/ — четыре плановых документа, которые заполняются до того, как начнётся отрисовка кадров
• reference/ — индекс типов кадров, гиды по сценам и музыке, а также кадры из эталонного примера как визуальная цель

Такое разделение превращает творческую задачу («сними фильм») в инженерную: план, шаблоны, референсы, движок, проверки.

Требования

• Node.js 20 или новее
• ffmpeg в PATH
• Chromium для Playwright — ставится после npm install командой npx --prefix examples/butterfly-life/tools playwright install chromium
• Агент, который умеет запускать skills и диспетчеризовать параллельные subagent'ы, например Claude Code

Установка скилла

Клонируйте репозиторий и сделайте симлинк скилла в папку skills вашего агента:

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

Для другого агента сделайте симлинк в его папку skills. Симлинк, а не копия — чтобы обновления скилла подтягивались сразу, а отработанный пример оставался на месте.

Как снять фильм

Попросите агента сделать procedural film на заданную тему, например: «сделай procedural film про жизнь медоносной пчелы». Полный пайплайн описан в skills/procedural-film/SKILL.md.

Рассчитывайте на длинный прогон: один agent на каждый кадр пишет scene-файл на 1000+ строк, затем волны critic'ов ревьюят каждый кадр. Поэтому фильм съедает заметную долю usage-плана — это не «нажать кнопку и получить ролик», а полноценный продакшн-конвейер из планирования, съёмки и нескольких проходов критики.

Зато на выходе не «презентация из картинок», а связный монтаж с ритмом (эталонный фильм идёт под 120 bpm), вертикальным форматом 1080x1920 и синтезированным звуком — всё, что обычно приходится искать в стоках, здесь генерируется кодом.

Как пересобрать фильм про бабочку

npm install --prefix examples/butterfly-life/tools

node examples/butterfly-life/tools/check.cjs

node examples/butterfly-life/tools/render.cjs

• check.cjs запускает gate из шести проверок и выходит с кодом 0, когда всё зелёное
• render.cjs пишет examples/butterfly-life/exports/butterfly-life.mp4
• node examples/butterfly-life/tools/build.cjs пересобирает HTML-плеер

Кредиты

Визуальный стиль и монтаж смоделированы по работе Кевина Нго "The life of a fruit fly". Что именно из неё взято, записано в reference-analysis.md.

Лицензия

MIT. См. LICENSE.