HyperFrames: как агенты рендерят видео из HTML — обзор 2026

01Что такое HyperFrames и зачем это агентам

HyperFrames — это открытый рендер-движок HTML-нативных видео плюс инструменты вокруг него: CLI, каталог готовых блоков, набор агентских skill-ов, браузерная студия и путь распределённого рендера через AWS Lambda. Проект развивает HeyGen — та же команда, что делает платформу генерации видео с аватарами, но HyperFrames живёт отдельно как open-source движок без платы за рендер.

Ключевое отличие от классических видеоредакторов и от React-подходов — авторский формат. Композиция это HTML-файл: элемент <div id="stage" data-composition-id="launch" data-width="1920" data-height="1080"> задаёт сцену, а у каждого клипа есть data-start, data-duration и data-track-index. Анимация подключается через GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI или собственный адаптер — движок перематывает время покадрово, поэтому результат воспроизводим: один и тот же вход даёт один и тот же файл.

Отдельный слой — frame.md: перевод вашего design.md в набор правил для «камеры». Токены и правила остаются теми же, но переписываются так, чтобы агент собирал промо-ролик, не подтягивая веб-хром и не угадывая масштаб. Готовые шаблоны дизайна (Biennale Yellow, BlockFrame, Blue Professional и другие) лежат в каталоге на hyperframes.dev/design.

02Как устроен рендер: от HTML до MP4

Пайплайн линейный и короткий. Сначала парсер читает композицию и строит таймлайн из data-атрибутов, затем движок seek-ит каждый кадр в headless Chrome, после чего кадры уходят в FFmpeg на кодирование и сведение аудио. Никакого обязательного шага сборки: index.html играет как есть и открывается в браузере напрямую.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="intro.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.5" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

03Стек и пакеты: что чем загружается

Проект разложен на пакеты: ядро с парсером, линтером и адаптерами, движок захвата страницы, продюсер полного пайплайна, браузерная студия, веб-компонент плеера, шейдерные переходы и SDK для Lambda. Версии всех пакетов синхронны — 0.8.160 на 15.10.2026, что упрощает обновление. Недельные загрузки npm показывают, какие части реально ставят чаще: CLI и ядро.

04Три пути установки: агент, skills, CLI

Самый быстрый старт — через агента. Для Claude Code проект публикует плагин с маркетплейсом, для остальных агентов (Codex, Cursor, Gemini CLI, OpenCode, IBM Bob) — набор из 21 skill-а, который ставится командой npx skills add. Агент получает не просто библиотеку, а производственный цикл: план ролика, валидный HTML, привязка анимаций, медиа, линт, превью и рендер.

node -v && ffmpeg -version | head -1

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

npx skills add heygen-com/hyperframes

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

npx hyperframes add data-chart
npx hyperframes add flash-through-white

05HyperFrames против Remotion

HyperFrames прямо называет Remotion источником вдохновения: оба инструмента рендерят видео через headless Chrome и FFmpeg. Разница в ставке на формат авторинга. Remotion делает ставку на React-компоненты и сборщик, HyperFrames — на обычный HTML, который одинаково легко пишут и человек, и агент. По зрелости экосистемы Remotion пока впереди: он старше (репозиторий создан в 2020 году) и его облачный рендер развит лучше.

06Плюсы и ограничения

• Простой контракт с агентом. Композиция — обычный HTML, значит агент не выучивает новый DSL: он пишет разметку и data-атрибуты.
• Детерминизм. Покадровая перемотка вместо wall-clock анимаций даёт одинаковый файл на одинаковом входе — пригодно для регресс-тестов и CI.
• Нет обязательной сборки. index.html открывается в браузере и сразу играет; превью с живой перезагрузкой есть в CLI.
• Чистая лицензия. Apache-2.0 без платы за рендеры и порогов коммерческого использования.
• Готовые блоки и каталог. Переходы, титры, графики и карты ставятся одной командой вместо ручной вёрстки.
• Масштабирование. Путь AWS Lambda позволяет рендерить параллельно и управлять задачами из ноутбука или CI.

• Молодость проекта. Первый релиз — март 2026, версия всё ещё 0.8.x: API может меняться между минорными версиями, ста бить по конвейеру.
• Требования к окружению. Node.js 22+ и FFmpeg обязательны; для векторного и медийного контура студии нужен браузерный рантайм.
• Экосистему придётся собирать самому. Каталог и шаблоны дизайна есть, но библиотека готовых композиций меньше, чем у React-подходов.
• Рендер — это Chrome. Тяжёлые 3D-сцены и большие видео требуют ресурсов: локальный рендер упирается в CPU, облачный — в настройку Lambda.
• Платная часть — платформа HeyGen. Сам движок бесплатный, но аватары, озвучка и корпоративные функции живут в платформе — тарифы уточняйте на официальном сайте.

07Как мы это проверяли