Как сделать видео с ИИ и кодом

Every-frame-is-code, или motion-kit, помогает агенту создавать моушн-графику в HTML/JS и рендерить её в MP4. ИИ здесь пишет сценарий и код сцены, а браузер рисует кадры. Это подходит для объясняющих роликов, схем, кинетической типографики и коротких заставок.

Этот гайд текстовый: ролик вы создаёте и смотрите на своём компьютере. Встроенного плеера и загрузки видео на портал нет.

1. Выберите небольшую историю

Для первого опыта возьмите 15–20 секунд и один тезис. Например: показать, как задача проходит через «идея → код → проверка». Укажите размер кадра, длительность и необходимость звука. Вертикальный и горизонтальный форматы требуют разных композиций, поэтому формат выбирают до рисования.

2. Подключите motion-kit

Инструкции находятся в репозитории every-frame-is-code. Для проекта с поддержкой .agents/skills:

git clone https://github.com/kiselas/every-frame-is-code .agents/skills/motion-kit

Если агент не поддерживает skills, сохраните kit в проекте и попросите сначала прочитать 00-agent-brief.md и инструкции по сцене и рендерингу.

3. Сначала сценарий, потом анимация

Используй motion-kit. Создай 20-секундную объясняющую сцену 1080×1920.
Тема: идея превращается в код, затем проходит проверку.
Три коротких этапа, крупные подписи, без музыки и сторонних картинок.
Сначала покажи таймлайн сцен с длительностями.
Затем создай HTML, отрендери контактный лист и исправь читаемость.

Не добавляйте движение только ради движения. Подпись должна успевать читаться, а переход — объяснять связь между сценами.

4. Проверяйте кадр по времени

Архитектура kit строится вокруг кадра как функции времени: draw(ctx, t). Один и тот же момент должен выглядеть одинаково при прямом переходе к нему и при последовательном просмотре. Накопление состояния между кадрами мешает воспроизводимому рендерингу.

Перед полным экспортом попросите агента проверить ключевые моменты на контактном листе: начало, переходы, максимальную плотность объектов и финал. Откройте HTML и убедитесь, что текст не перекрыт и объекты не выходят за границы кадра.

5. Экспортируйте по инструкции kit

Для MP4 нужны Node.js, Chrome и ffmpeg. Используйте раздел Rendering актуального README и 12-render-qa.md; параметры рендера должны совпадать с размером, частотой кадров и длительностью сцены. Сначала сделайте короткий пробный экспорт, затем полный.

Если film.html находится в корне kit, из каталога render можно выполнить:

npm install
node render.mjs ../film.html ../part.mp4 --from 0 --to 5 --draft
node render.mjs ../film.html ../film.mp4

Для другого расположения HTML подставьте его фактический путь. Первая команда рендера проверяет короткий фрагмент, вторая собирает полный файл.

После экспорта проверьте именно MP4: начало и конец, читаемость текста и синхронизацию звука, если он добавлен. Наличие файла ещё не означает, что ролик выглядит хорошо.

Практика

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