Hyperframes: как смонтировать видео с анимацией и субтитрами через Codex. Пошагово

Монтаж отнимает много времени. Нужно убрать оговорки и паузы, добавить субтитры, сделать графику, расставить всё по секундам. Для коротких видео и рекламы это каждый раз заново.

Hyperframes решает это иначе. Это проект с открытым кодом, где видео описывается как HTML-страница: анимации, текст, камера, субтитры. На странице проекта он назван так: «Пишите HTML, получайте видео, сделано для агентов». А вёрстку пишет кодинг-агент, в примере это Codex. Вы объясняете словами, что должно появиться и когда, а агент расшифровывает речь, режет, рисует анимацию и сам проверяет результат.

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

Что получится

Из сырой записи на камеру агент делает готовое видео. В примере исходник чуть больше минуты, на выходе видео примерно на полминуты с вырезанными паузами. В нём графика слева, объёмные 3D-анимации справа, субтитры внизу, лицо в скруглённой рамке с тенью на фоне и веер из движущихся видео.

Так же агент собирает длинные обучающие видео: два файла (камера и запись экрана) он превращает в смонтированное видео с карточками-разделителями. А ещё вертикальные короткие видео и рекламу. Для примера возьмём короткое вступление к обучающему видео: задачу целиком можно повторить.

Что понадобится

• Приложение Codex для компьютера. В нём работает агент. В примере выбрана модель GPT-6 Astra.
• Репозиторий Hyperframes. Адрес берём со страницы проекта на GitHub.
• Видеофайл. Исходная запись, с которой будет работать агент.
• Ключ сервиса транскрибации. В примере ElevenLabs. Подойдёт и локальная замена, о ней ниже.

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

Перед установкой полезно понять цепочку. Всё, что делает агент, укладывается в пять действий:

• Транскрибация. Агент узнаёт, что и когда сказано, с точностью до миллисекунды. Без этого невозможно привязать анимации и субтитры к словам.
• Нарезка. Убираются оговорки, ошибки и паузы.
• План сцен. Сцены называются битами. Агент читает текст, понимает смысл и решает, что будет на экране в каждый момент: графика, музыка, звуки.
• Сборка. Агент пишет HTML и анимирует его. Отсюда объёмные элементы, текст и моушн-дизайн.
• Проверка. Агент пересматривает результат, делает скриншоты, сверяет с текстом, правит и снова проверяет. Так повторяется, пока всё не совпадёт.

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

Шаг 1. Создаём проект

Создайте на компьютере пустую папку. В примере она называется hyperframes demo. Затем в Codex в левой колонке откройте новый проект, выберите локальный, дайте имя и укажите эту папку. Агент будет работать только внутри неё, и именно сюда лягут проекты, исходники и готовые файлы.

Шаг 2. Подключаем Hyperframes

Откройте страницу Hyperframes на GitHub и скопируйте адрес. По описанию репозитория, лицензия Apache-2.0, а в папках есть плагины для Claude Code, Codex и Cursor.

Вставьте адрес в чат нового проекта и попросите подтянуть репозиторий. Текст задачи в примере такой:

Подтяни этот репозиторий Hyperframes, чтобы я мог просить тебя монтировать видео. Убедись, что все зависимости установлены, и добавь в проект навыки, которые нужны, чтобы это работало.

Дальше агент работает сам. Он находит навыки для создания видео, анимации, звука и рендера. Проверяет, что на компьютере есть Node.js, Python и FFmpeg. Доустанавливает Bun и Whisper. Собирает исходники и рендерит короткое тестовое видео. В папке проекта появляются каталоги hyperframes, video-projects, renders, файл AGENTS.md и другие.

Шаг 3. Подключаем транскрибацию

По умолчанию агент ставит локальную Whisper. Это бесплатно, но медленнее. В примере выбран платный сервис ElevenLabs: он быстрее. По цене в примере говорится, что начального тарифа около 5 долларов в месяц хватает надолго.

Зарегистрируйтесь в сервисе. Слева внизу откройте Developers, затем API Keys и создайте новый ключ.

При создании можно ограничить права ключа. Если ему нужна только расшифровка речи, оставьте доступ к Speech to Text. Остальное (звуки, музыка, изображения и видео) можно разрешить, если пригодится.

Ключ это пароль, его нельзя никому показывать. Скопируйте его и вернитесь в Codex. Попросите агента сделать две вещи: завести файл для секретов и записать правило в AGENTS.md. Это файл, где описано, как устроен проект.

Когда расшифровываешь речь, используй ElevenLabs. Создай файл .env, чтобы я положил туда ключ. И запиши в agents.md правило: для транскрибации всегда использовать ElevenLabs.

Агент отвечает, что ElevenLabs теперь по умолчанию, создаёт приватный .env и вносит правило. В файле появляется строка ELEVENLABS_API_KEY=. Вставьте ключ после знака равенства и сохраните. Если файл в Codex не даёт вводить текст, откройте его в приложении по умолчанию, вставьте ключ там и сохраните.

Шаг 4. Ставим цель и пишем большой промт

Теперь подготовьте видеофайл и скопируйте путь к нему. В чате наберите /goal. Эта команда ставит агенту цель, и он продолжает работать, пока не достигнет её.

Дальше вставьте путь к файлу и опишите задачу. В примере промт получился огромным: он последовательно описывает каждый эпизод и обещает проверку. Вот его главные части:

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

Дальше идёт стиль и каждая сцена:

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

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

Лицо с камеры сделай вертикальным скруглённым кадром с тенью на фоне, который я вставил, фон затемни на 50%.

Из папки с моими видео возьми четыре-шесть последних видео, разложи их веером, трёхмерные, с тенью, слегка поворачиваются. Все видео должны реально играть одновременно.

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

Чем точнее описана каждая сцена, тем ближе результат. Первая версия в примере была готова через 18 минут 56 секунд: видео в 4K, 30 кадров в секунду.

Шаг 5. Смотрим результат и правим

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

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

Вторая версия пришла через 10 минут и вышла лучше: текст крупнее, объём заметнее. Третий проход занял около 7 минут 38 секунд: агента попросили для сравнения сделать в первые две секунды полноэкранную анимированную заставку. Появилась надпись «Isn't it crazy?», а слово «crazy» лежит на стеклянной панели. Каждый вариант сохраняется отдельным проектом.

Шаг 6. Мелкие правки в студии

Hyperframes открывает локальную студию. Это редактор с таймлайном, слоями, параметрами элемента и предпросмотром. В нём можно выделить элемент, например заголовок, и вручную поменять размер шрифта, а потом экспортировать. Для длинного видео это быстрее, чем снова писать промт ради одной мелочи.

Как закрепить результат

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

Если вы работаете из России

Сам Hyperframes открытый и ставится на ваш компьютер. Ограничения в окружении: Codex, модели OpenAI и ElevenLabs из России могут быть недоступны напрямую или требовать обходных путей. Проверьте актуальные условия у себя.

Что можно заменить:

• Транскрибация. Whisper работает локально и бесплатно. Агент в примере сам ставит её при установке. Она медленнее, но не требует внешнего сервиса.
• Агент. В репозитории есть плагины для Claude Code, Codex и Cursor, то есть Hyperframes не привязан к одному агенту. Значит, он может работать и с другим кодинг-агентом. Если подключить агента на открытой модели на своём сервере, зависимость от иностранных сервисов исчезает. Но такой вариант в примере не показан: качество монтажа и сборки анимации зависит от модели, и это нужно проверять.

Что важно знать до старта

• Первая версия не идеальна. Нужна проверка человека и минимум один круг правок. Агент проверяет кадры и звук, но вкус остаётся за вами.
• Промт должен быть подробным. Ясные описания сцен и расположения дают лучший результат. Если дать общую задачу, агент решит сам, и это может не понравиться.
• Ключи это пароли. Храните их только в .env, не показывайте и не публикуйте. Ограничивайте права ключа теми функциями, которые нужны.
• Агент работает с вашими файлами. Он берёт папку с видео, достаёт исходники и пишет файлы в проект. Давайте ему только нужные папки.
• Платные сервисы. ElevenLabs платный, а работа агента расходует лимиты вашей подписки. Следите за расходами.
• Работа занимает время. Одна версия в примере считалась от 7 до 19 минут.

Что дальше

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

Мы в Агентехе учим сотрудников ставить агентов на повторяющуюся работу: от видео и презентаций до отчётов, и превращать удачные запросы в навыки. Как устроено обучение.