HyperFrames: прайс и акции превращаются в MP4 из HTML и CSS

Что это за проект

Репозиторий называется heygen-com/hyperframes, его ведёт HeyGen. Лицензия Apache 2.0 подтверждается файлом LICENSE. По ленте коммитов GitHub последнее обновление главной ветки и свежие релизы датированы 4 октября 2026 года, последний релиз на момент проверки v0.8.121. Проект живой и обновляется несколько раз в день.

Первая строка README описывает суть так: HTML, CSS, медиа и анимации, которые можно «перемотать» на любой момент, превращаются в детерминированные MP4. Использовать можно локально через командную строку, из ИИ-агентов со скиллами или как ядро рендера в хостинговых процессах.

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

Ролик это HTML-файл. На корневом элементе задаются размеры (data-width, data-height) и время начала, у дочерних элементов свои data-start и data-duration. Внутри лежат заголовки, картинки, видеофрагменты, аудиодорожки. Анимацию можно писать на GSAP, CSS-анимациях, Lottie, Three.js, Anime.js или Web Animations API. В примере из README таймлайн GSAP создаётся на паузе и регистрируется в window.__timelines.

Детерминированность объясняется просто. Рендерер переходит к точному моменту анимации, снимает кадр, переходит к следующему. В реальном времени ролик при этом не проигрывается. Из кадров FFmpeg собирает видео. В документации сказано и про оговорку: различия браузера, шрифтов и видеокарты всё равно могут сдвинуть точные пиксели. Для воспроизводимости на разных машинах у команды render есть флаг --docker.

Для массового выпуска важны переменные. В composition объявляются значения по умолчанию, а при рендере их переопределяет JSON: флаг --variables принимает объект, --variables-file читает файл. Есть и режим --batch: один выходной файл на строку массива переменных. Из таблицы с сотней строк выходит сотня роликов.

Что это даёт малому бизнесу

Идея простая. Верстальщик делает шаблон под ваш бренд: шрифты, цвета, логотип, анимацию появления. Данные лежат в таблице или в каталоге. Скрипт берёт строки, подставляет их в шаблон и складывает MP4 в папку.

Типичные сценарии, где контент меняется, а форма нет:

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

Размер ролика задаётся в самом шаблоне, поэтому под Reels, историю или квадрат в ленту делаются отдельные версии. В документации CLI есть и форматы вывода кроме MP4: WebM, MOV, GIF, PNG-последовательность и HLS. Готовые файлы дальше можно отдать автопостингу, как в материале про публикацию в Telegram, MAX и VK по контент-плану.

Чем отличается от Remotion

В статье про Remotion я описывал тот же класс задач: шаблон один раз, данные из таблицы, пачка роликов. Идея схожа, и README HyperFrames прямо говорит, что проект вдохновлён Remotion. Оба инструмента рендерят видео через headless Chrome и FFmpeg.

Отличия, которые подтверждаются документацией HyperFrames:

• в Remotion ролик пишется компонентами React, в HyperFrames обычным HTML с CSS и атрибутами времени;
• у HyperFrames нет шага сборки, файл index.html можно открыть в браузере как есть, у Remotion нужен бандлер;
• лицензия HyperFrames Apache 2.0 без платы за рендер и порогов для коммерческого использования, у Remotion по тому же документу бесплатно для физлиц и компаний до трёх человек, выше платно;
• облачный рендер Remotion назван более зрелым, у HyperFrames есть локальный путь и AWS Lambda.

Сам документ сравнения написан командой HyperFrames, поэтому условия Remotion перед выбором стоит перечитать на их сайте. Если у вас уже есть команда на React, Remotion может подойти лучше. Если нужны простые HTML-шаблоны, которые легко править, смотрите на HyperFrames.

Что важно учесть

Шаблон нужно сверстать. Конструктора с кнопкой здесь нет: кто-то должен написать HTML и анимацию, подобрать шрифты и проверить длинные названия товаров, чтобы текст не вылезал за кадр.

Рендер требует окружения. По README нужны Node.js 22 и выше и FFmpeg. Chrome CLI сам не скачивает, для этого есть npx hyperframes browser ensure, а проверить готовность машины можно командой npx hyperframes doctor. На сервере рендер займёт процессор, а на длинных роликах и память.

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

Время рендера одного ролика и нагрузку на сервер в документации я не нашёл, это измеряется на вашем шаблоне. Проект до версии 1.0 и меняется быстро, версии лучше фиксировать.

Что можно сделать уже сейчас

Попробовать локально. Команды npx hyperframes init my-video, потом preview и render дают первый MP4 за несколько минут, если стоят Node, FFmpeg и Chrome.

Собрать таблицу. Определите один повторяющийся ролик, например прайс недели или акцию. Заведите таблицу с колонками под каждое меняющееся поле. Чем строже колонки, тем проще шаблон.

Решить, куда ролик идёт. Reels, MAX, Telegram, VK или всё сразу. От этого зависят размеры и длительность. Подписи к роликам удобно готовить по схеме из материала про репёрпосинг контента.

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

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

Нужно ли платить за рендер?

По README, лицензия Apache 2.0 и никаких платежей за рендер и порогов для коммерческого использования нет. Оплачиваются сервер и работа по настройке. У HeyGen есть и размещённый облачный рендер с кредитами, но локальный рендер, как сказано в их документации, кредиты не тратит.

Правда ли, что один вход всегда даёт один и тот же ролик?

Так заявлено в README. Для строгой повторяемости используйте Docker, потому что шрифты и видеокарта на разных машинах могут сместить пиксели.

Нужно ли уметь программировать?

Для первого шаблона нужна вёрстка и немного JavaScript для анимации. Когда шаблон готов, менять данные может менеджер, правя таблицу.

Коротко о главном

HyperFrames превращает вёрстку в видео и подходит там, где однотипных роликов много: прайс, акции, карточки, афиши, поздравления. Шаблон делается один раз, данные идут из таблицы, на выходе файлы под Reels, MAX и Telegram.

Если хотите поток роликов из вашей таблицы или каталога, посмотрите услугу контент и ролики из одного материала. Напишите мне в Telegram кодовое слово «ШАБЛОН», подскажу, какие ролики стоит автоматизировать первыми.