Искра
Анимация и 3D

Моушн-ролик кодом: агент, браузер и ffmpeg

Тема 3926 мин чтения + 2,5 часа на заданиеРевизия 29 октября 2026

Лонч-ролики, шоурилы и промо интерфейсов, которые заполнили ленты осенью 2026 с подписью «один промпт», собраны не видео-моделью. Их написал агент как программу, а браузер превратил программу в кадры. Для дизайнера это лучший путь к промо продукта: текст остаётся чётким, интерфейс настоящим, правка «заголовок появился рано» стоит одно число и перерендер. Честная цена «одного промпта» — бриф на несколько тысяч знаков, папка референсов и круг критики. Эта тема показывает весь сетап по частям, чтобы первый ролик не выглядел как чужое демо.

Как это устроено: кадр как функция времени

Модель не умеет выдавать mp4. Она пишет веб-страницу, где всё движение подчинено одной функции: «нарисуй состояние на момент t». Безголовый браузер вызывает её 900 раз для 15 секунд при 60 fps, снимает каждый кадр, а ffmpeg склеивает кадры в файл.

Ключевое слово — seek. Ничего не крутится на таймере: кадр 240 рисуется сам по себе, без проигрывания первых 239. Отсюда три правила, которые агент должен соблюдать, иначе рендер «поплывёт»:

  • никаких CSS-переходов, setTimeout и requestAnimationFrame в режиме рендера, только позиция таймлайна;
  • никакого Math.random(), только шум с фиксированным seed, чтобы два рендера совпадали покадрово;
  • шрифты и картинки загружены до первого кадра.

Без указаний агент берёт путь без зависимостей: один index.html, Playwright снимает кадры, ffmpeg кодирует. Этого хватает для большинства роликов. Если нужен фреймворк, назови его явно, иначе агент его проигнорирует, даже установленный.

0,0 с

Оранжевый круг по центру тёмного кадра, внизу подпись «01 логотип»

1,6 с

Тот же контейнер вытянулся в оранжевую кнопку с надписью «Начать», курсор над ней

4,0 с

Маленький зелёный круг с галочкой по центру

5,0 с

Большая оранжевая карточка «Выручка за неделю» с тёмными столбцами разной высоты
Ролик из списка состояний в одном HTML-файле: единственный контейнер меняет размер, скругление и цвет по пружинам, а звук и случайность отсутствуют. Каждый кадр нарисован отдельным вызовом seek(t) в headless Chrome и склеен ffmpeg. Последний кадр совпадает с первым, поэтому ролик зацикливается без рывка. · HTML + headless Chrome + ffmpeg, собрано для материала
Промпт
логотип → кнопка CTA → поле email (печатается) → лоадер → галочка → дашборд, график рисует себя → логотип
Путь Что это Когда брать
Чистый HTML + Playwright + ffmpeg страница с функцией seek, снятая покадрово первый ролик, полный контроль, ноль лицензий
HyperFrames HTML и CSS с таймлайнами GSAP, CSS, Lottie, Three.js в детерминированный mp4; есть скиллы для агента ролики из веб-компонентов, подписи, переходы из каталога; лицензия Apache-2.0
Remotion видео как React-код, кадр из useCurrentFrame(); официальные скиллы remotion-dev/skills шаблонные и данные-зависимые ролики, если команда уже на React; бесплатно только до 3 человек в компании

Где код проигрывает: фотореалистичные сцены, сложные персонажи, органика. Там нужна съёмка или видео-модель из темы «Генерация и монтаж видео с ИИ». Код выигрывает на продуктовых роликах, UI-моушне, историях из данных, типографике и лонч-эксплейнерах.

Сетап: почему чат даёт «среднее» видео

Чат-приложение умеет написать анимацию. Отрендерить её, послушать и посмотреть на собственные кадры умеет только агент с терминалом (тема «CLI и терминальные ИИ-агенты»). Этот цикл обратной связи и есть разница между вирусными роликами и ответами «ну, средненько».

Установка занимает десять минут. Нужны Node, ffmpeg и Python, папка проекта, Playwright с Chromium. Скиллы Remotion или HyperFrames ставятся по желанию:

brew install node ffmpeg python
mkdir motion-studio && cd motion-studio && npm init -y
npm i -D playwright && npx playwright install chromium
npx skills add heygen-com/hyperframes
claude

Дальше положи в корень CLAUDE.md (тема «Терминальные агенты: настройка под себя»). Агент читает его при каждом запуске, и домашние правила не нужно повторять:

## Контракт рендера
- window.seek(t) рисует кадр t, ничего другого картинкой не управляет
- без CSS transitions, setTimeout и requestAnimationFrame в режиме рендера
- только шум с seed, никакого Math.random

## Вид
- запрещено: заголовок по центру на градиенте, всё затуханием, подписи по углам, свечение на UI
- один акцидентный шрифт, один шрифт UI, один акцент
- что-то новое на экране каждые 2–4 секунды

## Звук
- музыка и эффекты синтезируются в коде, если трек не дан; громкость -14 LUFS

## Перед тем как показать мне
- отрендери по кадру на каждый бит в контакт-лист, оцени, почини три худших

Уровень усилий модели ставь выше дефолта: средний для мелких правок, высокий для нового ролика, максимальный, когда первые три секунды должны вытянуть лонч.

Бриф: производственный документ вместо настроения

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

РОЛИК     одна фраза, которую зритель унесёт; аудитория; длительность; форматы
АССЕТЫ    настоящий логотип, настоящие скриншоты UI, шрифты и цвета бренда, звук
ВИД       что взять из референса, какие штампы запрещены
ЖЁСТКО    никогда не выдумывать экраны продукта и цифры
СДАТЬ     сториборд, контакт-лист, финальное видео, постер-кадр, исходники

Три добавленные строки часто решают всё: адрес продукта, требование взять настоящие скриншоты и ассеты с сайта, «обязательно с музыкой». Агент сам сходит на сайт, соберёт всё и закончит за полчаса. Год назад похожий ролик у подрядчика стоил больше тысячи долларов. Держи одну сессию на бренд: второй ролик в том же проекте выходит быстрее, потому что рендер, звук и экспорт уже существуют. Ключи API — в .env, в промпте только по имени (тема «Безопасность вайбкодинг-проекта»).

Референс: чужая грамматика вместо дефолтного вида

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

Референсы трёх видов работают лучше всего: один кадр из ролика, который нравится; короткий клип, который агент сам нарежет ffmpeg; папка твоих прошлых работ, которую никто не скопирует. Искать на whatships.com, в разделе motion на Dribbble и в лонч-роликах конкурентов. Из референса берётся грамматика, никогда не сюжеты, логотипы и тексты.

Референс: ./refs/launch.mp4
1. Вытащи ffmpeg по кадру каждые 0,5 с и изучи их
2. Напиши docs/style_guide.md: палитра в hex, шрифты, длины кадров, переходы, камера, зерно
3. Напиши docs/shotlist.md для ролика на [длительность] с о [предмет] в этом стиле
4. Бери грамматику, никогда сюжеты, логотипы и тексты
5. Покажи оба файла и жди моего «ок» до любого кода

Для продуктового ролика пусть агент сам вытащит экраны с живого сайта, а список ассетов просмотри сам. Если чего-то нет, агент должен остановиться и спросить, а не нарисовать убедительную подделку. Библиотеку не навязывай: опиши вид и ограничения, технику пусть выберет модель.

Список состояний: одна форма, которая не режется

«Зум, морф, добавь частицы» — список активности. Сториборд говорит, что зритель знает на каждой секунде. Самый сохраняемый промпт осени 2026 — именно спецификация состояний: один контейнер меняет размер, скругление и цвет от состояния к состоянию, курсор ведёт каждое изменение настоящими кликами, последний кадр совпадает с первым, и ролик зацикливается.

логотип → кнопка CTA → поле email (печатается) → лоадер → галочка успеха → дашборд → график рисует себя → тултип → палитра ⌘K → тост → логотип

У каждого бита есть состояние входа, состояние выхода и причина. Если агент не может объяснить, зачем нужен четвёртый кадр, четвёртый кадр вырезается. Сюжетный вариант того же приёма: агент кодит мультяшный видеоредактор с таймлайном и кнопкой экспорта, а потом ставит весь ролик внутри него. Фальшивый UI работает как съёмочный павильон, где у каждого элемента известное состояние.

Пружины и звук: движение с массой

Кривая easing скользит из А в Б. Движение с массой разгоняется, чуть перелетает и оседает. Пружины в замкнутой форме дают это ощущение и остаются функцией времени, так что seek не ломается. Когда значение меняет цель несколько раз (курсор, ширина контейнера), складывай по пружине на каждое изменение, а не перезапускай. Тогда кадр 812 рендерится без симуляции первых 811.

У каждого класса объектов своё правило: мелкий UI щёлкает почти без перелёта, панели оседают, камера плывёт почти невидимо, заголовки приземляются жёстко и держатся, пока читаются, маскоты подпрыгивают нарочно. Если перелетает всё, ничего не выглядит точным.

Звук идёт на тех же часах, что и картинка. Саундтрек и эффекты можно синтезировать прямо в коде: в одном известном ролике 23 перехода привязаны к 120 BPM. Со своим треком сначала измерь его, потом анимируй:

python beats.py song.wav > beats.json   # librosa: bpm, биты, сильные доли, удары

Смены состояний на биты, большие моменты на сильные доли, клики и свисты на удары. Тест вслепую: закрой глаза и послушай ролик. Если у звука нет формы без картинки, саунд-дизайн не закончен. Войсовер и голос — в теме «Генерация голоса и аудио».

Критик: агент смотрит на собственные кадры

Модель читает картинки, значит, может проверить то, что только что отрендерила. Эта привычка — общее у всех роликов, которые разошлись. Авторы честно писали: 163 вызова модели и семь часов работы на короткую акварельную анимацию. Смотреть полный экспорт десять раз подряд не нужно. Пусть ffmpeg соберёт улики:

ffmpeg -i out/film.mp4 -vf "fps=1,scale=320:-1,tile=6x5" reviews/sheet.png
Сетка из восьми стоп-кадров ролика с таймкодами от 0,0 до 5,6 секунды: круг, кнопка, поле ввода, лоадер, галочка, дашборд, снова круг. Внизу команда ffmpeg, которой сетка собрана.
Контакт-лист того же ролика: по кадру на бит, на одной картинке. По нему видно, что в кадре 2,4 с текст в поле ещё не напечатался, а 3,2 с ловит контейнер на середине морфа. Это и есть «улики», которые агент умеет читать. · ffmpeg, собрано для материала

Потом дай агенту задачу критика с зубами:

Оценивай только отрендеренные кадры, забудь, что ты хотел сделать
Оценка 1–10: хук за 2 с, читаемость с телефона, движение, разнообразие, синхрон со звуком, точность бренда
Перечисли 3 худших дефекта с таймкодом, доказательством и локальной правкой
Почини эти секунды, перерендери их, повторяй, пока каждая оценка не 8+

Что искать: наезжающий друг на друга текст, элементы, которые скользят там, где должны тормозить, подписи по углам, мыльный масштабированный шрифт, мёртвый бит без события, рывок на точке зацикливания. Это тот же принцип, что в теме «Оценка и критика результатов ИИ», только критерии моушна.

Скилл: следующий ролик одной фразой

Если единственная запись о ролике живёт в чате, тебе повезло с сессией. Решения должны лежать в файлах, которые следующий запуск прочитает:

motion-studio/
  brief.md         цель и факты о продукте
  style_guide.md   палитра, шрифты, движение, запрещённые дефолты
  shotlist.md      биты, состояния, таймкоды, назначение
  assets/          утверждённые логотипы, экраны, звук
  src/             композиция с seek и код движения
  reviews/         контакт-листы и заметки о дефектах
  out/             по экспорту на формат

Ночным запускам нужны ворота. Один автор надиктовал бриф за пять минут, лёг спать и проснулся к готовому клипу на 142 секунды. Его промпт занимал около 9 500 знаков:

ВОРОТА 1  референсы и ассеты продукта утверждены
ВОРОТА 2  стайл-гайд и список кадров утверждены
ВОРОТА 3  статичные кадры для каждого шота, раскритикованы
ВОРОТА 4  аниматик 960×540 с черновым звуком
ВОРОТА 5  полный проход, полировка, звук
ВОРОТА 6  форматы, проверка цикла, постер-кадр, README

Между воротами агент работает часами сам. Отсутствующий скриншот интерфейса — блокер, а неясный референс — вопрос или один тестовый кадр, а не 900 отполированных неправильных. Форматы: каждое соотношение сторон идёт из одного таймлайна, никогда из кропа. Вертикаль получает крупнее шрифт и меньше элементов, квадрат — плотнее паузы, широкий — больше пространства.

Заверни всё это в скилл (тема «Терминальные агенты: настройка под себя»), и следующий ролик становится одной строкой:

/motion-reel для [URL], 20 с, вертикальный, референс ./refs/frame.png

Гибридный приём для сложных сцен — «сгенерировать и обвести»: видео-модель рендерит базовые кадры с персонажами и физикой, а агент перерисовывает весь ролик кодом поверх. Зритель видит только слой, нарисованный кодом.

HyperFrames: монтажка, которую агент знает изнутри

Всё, что выше, можно собрать руками: страница с seek, Playwright, ffmpeg. HyperFrames от HeyGen берёт эту обвязку на себя. Это открытый фреймворк, где ролик — папка с HTML-файлами, а агент получает скиллы с правилами рендера. Ему не нужно угадывать, как сделать кадр детерминированным: правила уже в скилле, а проверки ловят ошибки до рендера.

Для дизайнера здесь три плюса. Первый — монтажный стол в браузере: таймлайн, дорожки, ключевые кадры. Второй — каталог готовых переходов, подписей и графиков. Третий — цена: сам фреймворк бесплатный, лицензия Apache-2.0 разрешает коммерческие проекты. Платишь только за агента. Голоса и аватары HeyGen и облачный рендер списывают кредиты HeyGen, и только когда ты сам их просишь.

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

Каждая сцена — HTML-файл в папке compositions/, главный файл — index.html. Атрибуты data-start и data-duration говорят, когда элемент на экране. Движение задаёт таймлайн GSAP, который стоит на паузе: HyperFrames сам перематывает его на нужный кадр. Это тот же seek из начала темы, только контракт уже написан. Кроме GSAP поддерживаются CSS-анимации, Web Animations, Lottie, Three.js и Anime.js.

Отсюда главное отличие от Remotion. Сайт, HTML-прототип или готовая анимация на GSAP почти без переделки становятся сценой. Для Remotion их пришлось бы переписать на React. HeyGen сравнили оба инструмента на одном брифе для Claude Code. Remotion написал 10 файлов на TypeScript и поставил около 950 МБ зависимостей. HyperFrames обошёлся четырьмя HTML-файлами и не поставил ничего. По времени вышло одинаково, около 12 минут. Прогон был один, так что о качестве он ничего не говорит. Зато видно, с чем ты останешься на руках. Remotion старше, у него больше шаблонов и ответов на форумах. Если команда пишет на React, бери его.

Три входа: приложение, свой агент, чат

Вход Что нужно Что получаешь
Studio — десктоп-приложение Mac, Windows или Linux, бесплатный аккаунт HeyGen чат с агентом, превью и редактор в одном окне, терминал не нужен
Свой агент в папке Node 22+, ffmpeg, плагин или скиллы проект на диске, рендер на своём компьютере, браузерный редактор
Коннектор в Claude.ai или ChatGPT аккаунт HeyGen, тариф чата с кастомными коннекторами ролик без установки, рендер в облаке HeyGen; коннектор в бете

Studio сам ставит выбранного агента: Claude Code, Codex, GitHub Copilot или бесплатный OpenCode. Через коннектор нет папки проекта и редактора, поэтому точные правки делай локально. Все три входа создают одинаковый проект, так что начать в одном и продолжить в другом можно.

Для Claude Code поставь плагин. Для Codex, Cursor и Gemini CLI подойдут скиллы, в выборе отметь Core Skills:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
npx skills add heygen-com/hyperframes

Основные скиллы — /hyperframes, /hyperframes-cli, /hyperframes-registry и /media-use. Последний добывает музыку, голос, расшифровку и вырезает фон. По запросу подключаются /figma, /slideshow и /remotion-to-hyperframes. Начинай запрос с вызова скилла: /hyperframes в Claude Code и Cursor, $hyperframes в Codex. Без него агент пишет «видео на HTML» по памяти и не загружает правила фреймворка.

Браузерный редактор

npx hyperframes preview в папке проекта открывает редактор в браузере. Агент работает в терминале, а ты правишь руками в тех же файлах.

Браузерный редактор HyperFrames в тёмной теме. Слева список сцен intro, outro, steps и index с миниатюрами. В центре превью кадра на чёрном фоне с оранжевым свечением: подпись «Как кадр становится видео» и три шага с крупными оранжевыми номерами 01, 02, 03 — «Агент пишет HTML», «Браузер снимает кадры», «ffmpeg собирает mp4». Справа пустая панель Design. Внизу таймлайн с дорожками Bg Glow, Intro, Steps, Outro и Progress, курсор на пятой секунде.
Десятисекундный ролик в шрифте и цветах «Искры» из трёх сцен, открытый командой npx hyperframes preview. Слева сцены, ассеты, код и каталог, в центре превью, справа панель Design. Снизу таймлайн: сцены идут внахлёст, у свечения фона видны ключевые кадры позиции, клипы двигают, режут и растягивают, как в монтажке. · HyperFrames, браузерный редактор, снято для материала

Что тут делать руками:

  • Поправить кадр. Останови превью на проблемном месте и кликни элемент. Если элементы наложились, выбери нужный во вкладке Layers. Текст, цвет, размер и положение меняются в Design.
  • Сдвинуть тайминг. Клип на таймлайне тащится целиком, край меняет длительность, клавиша S режет клип на месте курсора.
  • Добавить движение. Клавиша K ставит ключевой кадр на выделенном элементе.
  • Отдать агенту. Крупное меняет агент: сюжет, порядок сцен, структуру. Кнопка Describe a change to the agent (⌘K) собирает готовый запрос, его останется вставить в терминал.

Одна ловушка. Опция Auto-record manual edits as keyframes включена по умолчанию, поэтому правка на курсоре превращается в анимацию. Когда чинишь то, что должно быть одинаковым весь ролик, выключи её на панели таймлайна.

В приложении Studio те же файлы и больше способов сказать агенту, что не так. Можно обвести место на кадре, оставить комментарий к моменту или выделить элемент и копить правки пачкой. В чате @ прикрепляет файл, стиль подписей или голос, # вызывает инструмент вроде раскадровки или удаления фона. Панель Script показывает речь из ролика текстом: вычёркиваешь слова, и агент вырезает их из видео. Для Script нужна расшифровка от HeyGen, она входит не во все тарифы.

Каталог: не изобретать переход заново

В каталоге больше 440 блоков и компонентов: переходы, подписи, нижние плашки, графики, карты, курсоры, 3D. Они ставятся в проект исходным кодом, который агент перепишет под твой бит. Искать удобно на hyperframes.heygen.com/catalog или из терминала:

npx hyperframes catalog crossfade
npx hyperframes add flash-through-white

В промпте называй блок точно, как в каталоге: data-chart, code-typing, caption-highlight. Так ты закрепляешь технику, а содержимое агент всё равно возьмёт из брифа. Для 3D проси Three.js через адаптер. CSS-перспектива на сценах со светом выглядит плоской.

Команды, которые агент гоняет сам

Эти команды полезно знать в лицо: агент запускает их по ходу работы, и по названию видно, на каком он шаге.

npx hyperframes capture https://example.com   # скриншоты, цвета, шрифты и тексты сайта
npx hyperframes beats                         # биты трека в beats/*.json
npx hyperframes lint                          # ошибки в разметке сцен
npx hyperframes check                         # lint + проверка в браузере, вёрстка, контраст
npx hyperframes snapshot --at 0,2,5           # кадры на 0, 2 и 5 секунде в PNG
npx hyperframes render --quality draft        # быстрый черновой рендер
npx hyperframes render --output final.mp4     # финальный mp4
npx hyperframes doctor                        # что не так с Node, ffmpeg и Chrome

snapshot — готовый инструмент для круга критики из раздела выше: агент снимает кадры и смотрит на них сам. Рендер умеет не только mp4. WebM и MOV сохраняют прозрачность для плашек поверх видео, GIF подходит для документации. Голос без аккаунта HeyGen генерируется локально моделью Kokoro, но русских голосов у неё нет. Для русского войсовера готовь дорожку отдельно (тема «Генерация голоса и аудио») и клади её в проект файлом.

Локальный рендер не отправляет проект в HeyGen. CLI шлёт анонимную статистику команд без содержимого роликов, отключается она командой npx hyperframes telemetry disable.

Как просить, чтобы не переделывать

Документация HyperFrames честно говорит: одной фразы хватает, остальное агент решит сам. Подробности нужны там, где результат должен совпасть с замыслом. Рабочий каркас запроса из их же гайда:

/hyperframes
ролик 8 с, 1920×1080
бит 1 (0–4 с): ...  бит 2 (4–5 с): ...  бит 3 (5–8 с): ...
текст на экране дословно в кавычках
техника: блоки code-typing и vfx-shatter из каталога
без войсовера, без картинок и видеофайлов

Шесть правил, которые экономят круги правок:

  • Текст в кавычках. Текст без кавычек агент перескажет своими словами.
  • Тайминг без нахлёста. «Счётчик исчез к 4,2 с, в 4,2 с появляется READY» вместо «в 4 с счётчик исчезает и появляется READY».
  • Цели числом. «Свечение 35% непрозрачности» вместо «свечение слабее». Относительные правки качаются туда-сюда.
  • Одна правка за проход. Поменял три вещи разом — непонятно, какая помогла.
  • Пути к ассетам. «assets/logo.svg» вместо «мой логотип».
  • Без «4K 60 fps» для соцсетей. По умолчанию 1920×1080 и 30 fps, этого хватает, и рендер быстрее.

И две тонкости формулировок. «Без войсовера» не значит «без звука»: для тишины пиши «без аудио». Готовый текст для озвучки задавай с тильдой, «~45 секунд». Длину ролика тогда задаёт речь, иначе агент обрежет или растянет твои слова. Ориентир — около 130 слов в минуту для английской речи.

Четыре задачи, которые уже решают кодом

Схема выше не абстракция. Ниже четыре рабочих сетапа с кодом и честными итогами, чтобы было с чего начать.

Промо сайта из его же скринкастов

Кейс из практики автора материала: ролик-кейс на 103 секунды для сайта Urbi по одной ссылке. Агент получил адрес сайта, скилл website-to-hyperframes и требование «только настоящие экраны, с музыкой, без войсовера». Сейчас отдельного скилла для этого нет: сайт захватывает команда npx hyperframes capture, и /hyperframes сам её вызывает, если дать ему адрес. Дальше агент работал сам:

  1. Захватил сайт: скриншоты по скроллу, токены цвета и шрифты, Lottie-анимации, описание каждого ассета в одном файле.
  2. Записал 22 скринкаста страниц в headless Chrome. Часы страницы замедлил в четыре раза, чтобы плавный скролл, Lottie и видео на сайте легли в честные 60 fps.
  3. Вырезал из записей заморозки фильтром freezedetect, оставив по 60 мс каждой паузы. Так склейка никогда не попадает на середину движения.
  4. Нарезал футаж по списку: вход, длительность, скорость. Саундтрек собрал из Apple Loops на 90 BPM. Смена кадра на бит, смена сцены на бар.
  5. Описал монтаж списком шотов и сгенерировал из него HTML-композиции HyperFrames.
# где кадр не меняется: ffmpeg печатает freeze_start и freeze_end
ffmpeg -i footage/home.mp4 -vf "freezedetect=n=0.0015:d=0.12" -map 0:v -f null -

# cuts.json: один шот = источник, вход, длительность и скорость
{ "out": "mv03.mp4", "src": "dense/home.mp4", "in": 26.3, "dur": 2.967, "rate": 1.2 }

# shots.json: тот же шот в монтаже = длина в барах, переход, панч-ин
{ "file": "mv03.mp4", "bars": 1, "tr": "whip", "zoom": [1.4, "50% 18%"] }
Сетка из двенадцати кадров ролика с таймкодами от 0:02 до 1:41: фиолетово-жёлтая 3D-скульптура, она же на главной сайта в окне браузера, экраны с графиками, тёмная секция «We Support All Industries», три телефона с мобильной версией, изометрические плитки и планшет с картой
Контакт-лист ролика по одному кадру на девять секунд. Весь футаж — записи живого сайта, собранные агентом за одну сессию. По листу видно и сильное: настоящие экраны, один шрифт, одна жёлтая точка на кадр. И слабое: ровная подача без единого рискованного решения. · HyperFrames + headless Chrome + ffmpeg, кейс автора материала
Промпт
Сделай ролик-кейс на полторы минуты для [URL]. Только настоящие экраны сайта, с музыкой, без войсовера. Покажи сториборд до кода

Честные итоги. Три рендера за два часа. Агент сам нашёл по снапшотам и починил три дефекта: подпись наехала на телефон, «px» уехал на отдельную строку, у короткой подписи остался пустой хвост. Что не вышло: поддомен не загрузился в headless Chrome и выпал из «стены страниц», звуковых эффектов нет, а самый слабый шот там, где на сайте мало движения. Ровный и грамотный ролик, который пока не похож на твой. Характер даёт бриф и референс из разделов выше, и это ровно то, чего в задаче по одной ссылке не было.

Тот же приём в лёгкой форме: Playwright записывает по короткому клипу на каждое из восьми состояний продукта, ffmpeg добавляет карточки с текстом и склеивает. Автор такого демо получил 56 секунд за полчаса. Одна длинная запись у него не удалась: энкодер отставал на модалках и плавном скролле. Пиши по клипу на бит.

Монтаж говорящей головы

Агент не смотрит видео, он читает текст. Поэтому монтаж живой записи строится на расшифровке с таймкодами слов: ffmpeg находит тишину, Whisper или ElevenLabs отдают слова со временем, агент помечает дубли, фальстарты и «э-э», собирает список склеек, ffmpeg режет и ставит субтитры. Так устроен video-use: все дубли упакованы в текст на 12 КБ вместо сорока пяти миллионов токенов кадров, картинку агент запрашивает только в точках решения. OpenCutAgent делает то же внутри Premiere: сначала «мягко» ставит цветные маркеры на таймлайн вместо склеек, чтобы ты проверил, и только потом режет.

ffmpeg -i take.mp4 -af silencedetect=noise=-35dB:d=0.6 -f null - 2> silence.log
whisper take.mp4 --model medium --word_timestamps True --output_format json

Где ломается: неверно распознанное слово даёт неверную склейку, так что список склеек просматривай целиком. Субтитры через subtitles= требуют ffmpeg с libass, в сборке из Homebrew его может не быть. Тогда остаются мягкие субтитры отдельной дорожкой. Работай на копии проекта: перестроить секвенцию агент может, вернуть прежнюю — нет.

Интерактивная презентация

Презентация кодом — это один HTML-файл со сценой 16:9, навигацией с клавиатуры и свайпом, прогресс-баром и анимацией по шагам. Скилл frontend-slides сначала показывает три стилевых превью: безопасное, смелое из библиотеки и дикое, а деку собирает после твоего выбора. Для докладов с заметками спикера берут Slidev: Markdown на входе, Mermaid-схемы становятся SVG, агент сам прогоняет и чинит слайды.

Два правила от тех, кто прошёл этот путь. Первое: черновик в простом Markdown, стиль в самом конце. Второе: каждая заметка спикера заканчивается строкой «Переход:», по ней агент проверяет, что история сшита. Правки удобно оставлять комментариями прямо в превью, потом одна команда «закрой все комментарии». Реальный доклад занял 31 коммит за пять дней, тестовая дека — три промпта и шесть минут.

Где ломается: первый проход почти никогда не точен, закладывай три-пять кругов со скриншотом каждого слайда. Экспорт в PDF теряет анимацию. Коллеги без терминала не смогут править деку. И агент дорисовывает факты: в одном тесте он угадал ник на GitHub и выдумал число строк кода. Цифры и имена — только из твоего брифа.

Лонч-ролик в Remotion за час

Ролик на 30 секунд: логотип, стек с лучами, кинетический текст, фон из кривых Лиссажу, музыка. Первая пригодная версия за 41 минуту, ещё полчаса полировки, против четырёх-шести часов в After Effects по оценке автора. Что сработало: расплывчатые промпты давали неверные раскладки, координаты сетки и номера кадров их чинили, кернинг правился по скриншотам. Звук пропадал, пока рендер не запустили с --codec h264. Не для персонажной анимации, тяжёлого композитинга и тонкой работы с ключами.

Что здесь на самом деле важно

Промпт — примерно десятая часть результата, остальное делает обвязка вокруг (тема «Своя обвязка»). Seek — единственное правило, которое нельзя гнуть: любой кадр рендерится сам по себе, одинаково каждый раз. Только настоящие ассеты продукта: агент может придумать движение камеры и никогда не должен придумывать твой дашборд. Круг критики — шаг, который пропускают, потому что первый рендер ощущается прогрессом, и шаг, который был у каждого ролика, который разошёлся.

Примеры команд для практики

Куда вставлятьClaude Code, Codex CLI или Gemini CLI в папке проекта
Сделай динамичный моушн-ролик на 15 секунд, который показывает, какой ты сильный моушн-дизайнер, как шоурил для резюме. Выложись полностью»

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

Ролик на 20 с для [URL продукта]. Возьми настоящие скриншоты, логотип и ассеты с сайта, составь список и покажи мне. Чего нет — спроси, не рисуй. Обязательно с музыкой
Отрендери контакт-лист по кадру в секунду, оцени по шести критериям из CLAUDE.md и почини три худших дефекта. Покажи лист до и после
Из того же таймлайна собери три формата: 16:9, 1:1 и 9:16. В вертикали шрифт крупнее и элементов меньше, никаких кропов
Заверни папку проекта в скилл /motion-reel: на вход URL, длительность, формат и референс, на выход все шесть ворот с остановкой на утверждение
Запиши скринкасты всех страниц [URL] в headless Chrome с замедленными часами страницы, вырежи заморозки через freezedetect, нарежь по клипу на бит под 90 BPM и покажи список шотов до монтажа
В take.mp4 найди тишину и расшифруй слова с таймкодами. Помечай дубли, фальстарты и слова-паразиты, собери список склеек с таймкодами и покажи мне. Режь только после моего «ок»
Собери презентацию на 12 слайдов из draft.md одним HTML-файлом: навигация с клавиатуры, прогресс-бар, факты и цифры только из файла. Сделай скриншот каждого слайда и почини наезды до того, как покажешь
Куда вставлятьClaude Code с плагином HyperFrames или Codex и Cursor со скиллами, в папке проекта
Лонч-ролик по сайту
/hyperframes Ролик на 30 с, 1920×1080, для [URL продукта]. Возьми с сайта настоящие экраны, палитру и тексты, ничего не выдумывай. Структура: хук с проблемой, три бита с экраном и подписью в одну строку, финальная карточка с логотипом и «[призыв]». Музыка тихая, без войсовера. Сначала покажи раскадровку стоп-кадрами и жди моего «ок»
Моушн-графика по битам
/hyperframes Ролик 8 с, 1920×1080. Бит 1 (0–4 с): тёмный терминал печатает «[команда]» по символу, потом курсор мигает. Бит 2 (4–5 с): терминал разлетается на осколки. Бит 3 (5–8 с): белый текст на чёрном влетает по слову: «[слоган]». Используй блоки code-typing и vfx-shatter из каталога. Без войсовера, без картинок и видеофайлов
Подписи к говорящей голове
/hyperframes Возьми assets/interview.mp4, расшифруй речь на русском с таймкодами слов и добавь подписи в стиле caption-highlight по нижней трети. Акцентное слово каждой фразы выдели цветом [hex]. Само видео не меняй
Точечная правка
Кадр и движение в сцене intro уже правильные, их не трогай. Поменяй только заголовок: 120 px, межбуквенный 2%, появляется к 0,6 с и держится до 3 с
Проверка перед сдачей
Прогони npx hyperframes check, сними snapshot на каждой смене сцены и посмотри на кадры сам. Перечисли три худших дефекта с таймкодом, почини, перерендери черновиком и покажи кадры до и после
Перенос из Remotion
Поставь скилл remotion-to-hyperframes и перенеси композицию из ./remotion-project. Что не переносится честно, не переводи, а выпиши списком. Сравни оба рендера покадрово и покажи расхождения
Куда вставлятьClaude.ai или ChatGPT с подключённым коннектором HyperFrames
Сделай вертикальный ролик на 15 с для [продукт]. Аудитория: [кто]. Настроение: [три слова]. Покажи [главный экран или действие] и закончи фразой «[слоган]»»

Коннектор в бете. Ролик рендерится в облаке HeyGen, папки проекта не будет.

Мини-задание

Собери папку motion-studio по схеме выше и положи туда моушн-гайд из темы «Анимация с ИИ». Выбери один референс-кадр и свой продукт или проект из портфолио. Проведи агента через первые четыре ворот: ассеты, стайл-гайд со списком кадров, статичные кадры, аниматик. Потом отрендери ролик на 10–15 секунд и прогони один круг критики по контакт-листу. Сравни первый рендер и рендер после правок: разница и есть ответ на вопрос, зачем нужен критик.

Время: 2–3 часа
Готово, если: ролик на 10–15 секунд отрендерен в mp4 из кода, прошёл хотя бы один круг критики по контакт-листу, и все решения лежат в файлах проекта, а не в чате

Источники

  1. HyperFramesgithub.com

    HTML и CSS в детерминированный mp4: браузер перематывает таймлайн, ffmpeg кодирует; Apache-2.0

  2. HyperFrames: Make your first videohyperframes.heygen.com

    Три входа: приложение Studio, свой агент со скиллами, коннектор в чате

  3. HyperFrames: Edit in the browser editorhyperframes.heygen.com

    Панели редактора, таймлайн, горячие клавиши, автозапись ключевых кадров

  4. HyperFrames: Ask for a great videohyperframes.heygen.com

    Каркас запроса, дословный текст, цели числом, одна правка за проход

  5. HyperFrames: CLI guidehyperframes.heygen.com

    preview, lint, check, snapshot, render, capture и остальные команды

  6. HyperFrames vs Remotionhyperframes.heygen.com

    Один бриф в двух фреймворках и честное сравнение от авторов HyperFrames

  7. HyperFrames FAQhyperframes.heygen.com

    Что бесплатно, что списывает кредиты HeyGen, телеметрия

  8. Kokoro-82M: Voiceshuggingface.co

    Языки локальной модели озвучки; русского в списке нет

  9. Remotion: Agent Skillsremotion.dev

    Официальные скиллы Remotion для Claude Code и других агентов

  10. Remotion Licensegithub.com

    Бесплатно для физлиц и компаний до 3 человек, дальше нужна лицензия

  11. GSAP 3.13: free for everyonegsap.com

    GSAP и все бывшие платные плагины бесплатны, включая коммерческое использование

  12. Playwright: Screenshotsplaywright.dev

    Безголовый браузер снимает кадр страницы

  13. librosa.beat.beat_tracklibrosa.org

    Детекция темпа и битов трека для синхронизации движения со звуком

  14. FFmpeg Filters: freezedetect, silencedetectffmpeg.org

    Поиск застывших кадров и тишины для автоматической нарезки

  15. video-usegithub.com

    Монтаж по расшифровке: дубли упакованы в текст, картинка только в точках решения; MIT

  16. OpenCutAgentgithub.com

    Панель Premiere Pro под управлением агента: тишина, дубли, маркеры вместо склеек

  17. frontend-slidesgithub.com

    Скилл для презентаций одним HTML-файлом; три стилевых превью до сборки; MIT

  18. Erik Zaadi: Skill Issueerikzaadi.com

    Доклад на Slidev как скилл агента: строка «Переход» в заметках, 31 коммит за пять дней

  19. Omri Lavi: Letting Claude Code do the talkingomrilavi.com

    Slidev и агент: черновик в Markdown, стиль в конце, правки комментариями в превью

  20. Eric Mono: product demo with Claude Code, Playwright and FFmpegdev.to

    По клипу на состояние продукта вместо одной длинной записи

  21. Mejba Ahmed: Remotion in Codexmejba.me

    Лонч-ролик за 41 минуту: координаты сетки и номера кадров вместо прилагательных

Нашёл ошибку или устаревший факт? Напиши: hey@iskra.guide