HeyGen выкатила HyperFrames для сборки видео из веб-верстки
Обычный HTML-контейнер с парой CSS-классов и скриптом на GSAP теперь официально считается монтажным столом. Команда HeyGen выложила в открытый доступ HyperFrames — фреймворк, который переводит верстку, векторную графику и веб-анимации в детерминированные видеофайлы формата MP4. Идея проста: вместо того чтобы мучить нейросети текстовыми запросами и гадать, куда поплывут пиксели на двадцатом кадре, визуальный продакшен перекладывают на рельсы фронтенда. Здесь работают привычные браузерные технологии, а собирать сцены поручают автономным ассистентам вроде Claude Code, Cursor или Codex.
В основе пайплайна лежит строгая математическая точность. Браузер без графического интерфейса headless Chrome отрисовывает страницу кадр за кадром с нужной частотой, после чего утилита FFmpeg склеивает полученные изображения со звуковой дорожкой. Такой подход исключает случайности генеративного видео: одинаковый код разметки на входе всегда гарантирует попиксельно идентичный результат на выходе. Сами сцены формируются стандартными HTML-элементами. Управление таймингом и слоями вшито прямо в разметку через расширенные атрибуты: тег получает параметры data-start, data-duration, индекс слоя data-track-index и настройки громкости. Чтобы анимированные элементы не рассинхронизировались при покадровом захвате, разработчики HyperFrames связали запуск скриптов с глобальным объектом временных шкал window.__timelines.
Визуальный стек не ограничивает моушн-дизайнера примитивными трансформациями. Внутри композиции работают библиотеки GSAP, Anime.js, Three.js для трехмерной сцены, анимации Lottie и нативный веб-интерфейс CSS WAAPI. Если верстка умеет что-то крутить, переливать шейдерами или масштабировать на экране смартфона, это без искажений переносится в итоговый видеопоток.
Инструменты для автономных агентов
Вся система заточена под управление кодовыми агентами. HyperFrames содержит 21 встроенный навык под управлением корневого диспетчера /hyperframes. Бот получает текстовое описание задачи, анализирует контекст и самостоятельно вызывает нужные сценарии генерации:
/product-launch-video— сборка продуктовых презентаций и рекламных роликов длительностью до 3 минут на основе структуры посадочной страницы или сценарного брифа;/faceless-explainer— производство смысловых эксплейнеров с акцентом на кинетическую типографику и инфографику по исходному тексту;/pr-to-video— автоматическое создание видеодайджеста с разбором изменений в пулл-реквесте на GitHub;/embedded-captionsи/talking-head-recut— добавление плашек, субтитров и нижней трети к готовым видео с говорящими головами;/motion-graphics— генерация коротких дизайн-ориентированных заставок и моушн-ассетов до 10 секунд;/music-to-video— монтаж визуального ряда с автоматической расстановкой ключевых точек под ритмический рисунок трека;/slideshow— верстка презентационных питч-деков с пошаговой навигацией;/remotion-to-hyperframes— утилита миграции готовых проектов из React-среды Remotion в формат чистого HTML.
За узкопрофильные операции отвечают доменные модули. Команда разработки предусмотрела отдельные навыки для управления ключевыми кадрами /hyperframes-keyframes, базовой логикой анимации /hyperframes-animation, креативным стилем /hyperframes-creative, медиатекой /media-use и сведением звука /hyperframes-audio. Связать макеты с кодом помогает модуль прямого импорта из векторного редактора /figma, а готовые визуальные блоки берутся из встроенного реестра /hyperframes-registry.
Экосистема проекта опирается на две вещи: каталог компонентов и специальную спецификацию Frame.md. Последняя развивает концепцию DESIGN.md, упаковывая стилевые токены проекта — сетки, шрифтовые пары, отступы и палитры — в правила, которые понимает AI-агент при сборке видеокадров. В готовом каталоге лежат блоки, которые обычно долго верстать с нуля: анимированные графики data-chart, оверлеи интерфейсов популярных соцсетей и шейдерные эффекты переходов вроде экранной вспышки flash-through-white.
Для локальной работы с проектом потребуется среда Node.js версии 22 или новее и установленный в системе FFmpeg. Консольный интерфейс фреймворка управляется тремя базовыми командами: npx hyperframes init разворачивает файловую структуру, npx hyperframes preview поднимает локальный веб-сервер с мгновенным обновлением экрана при правке кода, а npx hyperframes render запускает компиляцию видеофайла. Для масштабного продакшена предусмотрен облачный рендеринг: пакет готов к развертыванию на бессерверных мощностях AWS Lambda или в инфраструктуре самого сервиса HeyGen.
Нас в этой истории привлекает прагматичный сдвиг парадигмы. Рутинный моушн вроде продуктовых карточек, анонсов в соцсетях и отчетных графиков окончательно превращается в обычный код. Дизайнеру больше не придется вручную двигать ключи в тяжелых редакторах ради смены пары цифр: достаточно настроить дизайн-токены в Frame.md, а сборку десятков вариантов доверить скрипту.
