HyperFrames — превратить HTML в видео руками AI-агента

HyperFrames — открытый фреймворк от компании HeyGen с лозунгом «Write HTML. Render video. Built for agents.» Он превращает обычный HTML, CSS, медиафайлы и seekable-анимации в детерминированные MP4-видео: один и тот же вход всегда даёт один и тот же результат, кадр в кадр. Проект распространяется под лицензией Apache 2.0, написан на TypeScript и требует Node.js 22+ и FFmpeg. На GitHub у репозитория почти 50 тысяч звёзд, а сам фреймворк используется в продакшене самой HeyGen, а также командами tldraw и TanStack.

Зачем это нужно

Идея простая: агенты уже отлично пишут HTML. Так почему бы не сделать видео просто ещё одним артефактом, который можно «написать»? Композиция в HyperFrames — это обычный HTML-файл с data-атрибутами для таймингов и треков. Никакого React, никакого собственного формата таймлайна, никакого этапа сборки: index.html проигрывается как есть и открывается прямо в браузере.

Это делает HyperFrames идеальным инструментом для AI-агентов: вместо обучения модели проприетарному редактору вы даёте ей скиллы, набор CLI-команд и хорошо документированный контракт композиций. Дальше агент сам планирует видео, пишет HTML, подключает анимации, медиа, проверяет линтером и рендерит MP4.

Типичные сценарии из README:

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

Быстрый старт

Вместе с AI-агентом

Основной сценарий использования — установить скиллы HyperFrames в свой агент и просто описать желаемое видео:

npx skills add heygen-com/hyperframes

Интерактивный пикер откроется без предвыбранных пунктов — достаточно группы Core Skills: роутер /hyperframes установит каждое рабочее окружение по мере необходимости. Для агентов и неинтерактивных запусков вместо этого используют:

npx hyperframes skills update

Эта команда ставит ровно базовый набор, тогда как --all устанавливает все 20 опубликованных скиллов. После установки достаточно промпта вроде:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

Скиллы учат агента полному производственному циклу: спланировать видео, написать валидный HTML, подключить seekable-анимации, добавить медиа, прогнать линтер, собрать превью и отрендерить результат. Они работают с Claude Code, Cursor, Gemini CLI, Codex и другими агентами с поддержкой skills.

Вручную через CLI

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

Требования — Node.js 22+ и FFmpeg. Локальный рендер идёт через headless Chrome, есть варианты запуска в Docker, облачный рендеринг и распределённый рендер на AWS Lambda.

Скиллы для агентов

HyperFrames поставляет 20 скиллов, которые агент подгружает по мере необходимости. Ключевой — /hyperframes: это роутер и карта возможностей, которую нужно читать первым при любом запросе «сделай мне видео». Он подтверждает бриф и выбирает подходящий workflow.

Рабочие процессы создания видео:

• /product-launch-video — промо-ролик по URL сайта, брифу или сценарию (до ~3 минут);
• /faceless-explainer — объясняющее видео по произвольному тексту, все визуалы придумывает LLM;
• /pr-to-video — GitHub-пул-реквест превращается в видеообзор изменений через gh CLI;
• /embedded-captions — субтитры к готовому видео «говорящей головы»;
• /talking-head-recut — упаковка интервью или подкаста с графическими оверлеями: lower-thirds, кинетические заголовки, PiP;
• /motion-graphics — короткая моушн-графика без закадрового голоса, до 10 секунд: кинетический текст, логотип-стык, анимированный твит;
• /music-to-video — видеоролик, синхронизированный с музыкальным треком;
• /slideshow — презентации и интерактивные деки с фрагментами и навигацией (на выходе — навигируемая презентация, а не видео);
• /general-video — запасной вариант для всего остального, включая режим совместного творчества;
• /remotion-to-hyperframes — односторонний перенос существующей композиции из Remotion в HTML HyperFrames.

Доменные скиллы — атомарные блоки, которые compose-воркфлоу подключают по требованию:

• /hyperframes-core — контракт композиции: data-*-атрибуты таймингов, class="clip", треки, суб-композиции, правила детерминизма;
• /hyperframes-animation — все знания об анимации и runtime-адаптерах (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU);
• /hyperframes-keyframes — seek-safe-авторинг ключевых кадров плюс диагностика hyperframes keyframes;
• /hyperframes-creative — креативное направление: палитры, типографика, нарратив, планирование битов;
• /media-use — «медиа-ОС»: генерация и подбор музыки, звуковых эффектов, изображений, иконок, озвучки через TTS и генеративные модели;
• /hyperframes-cli — цикл разработки: init, lint, check, snapshot, preview, render, publish, doctor, облачный и Lambda-рендеринг;
• /hyperframes-audio — микширование звука: voiceover carve, цепочка эффектов (EQ, компрессор, лимитер, реверберация), автоматизация и сабмикс-шины;
• /hyperframes-registry — поиск и установка блоков из каталога;
• /figma — импорт ассетов, токенов и компонентов из Figma с реконструкцией движения.

Как устроена композиция

Видео описывается прямо в HTML: data-атрибуты задают тайминги, длительности и треки, а seekable-анимации подключаются через адаптеры — GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI или собственный frame-адаптер:

<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>
    // Expose a paused, seekable GSAP timeline for the renderer
    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>

Превью открывается мгновенно в браузере. Рендерер последовательно «прокручивает» каждый кадр в headless Chrome и кодирует результат через FFmpeg — отсюда и детерминизм: то же входные данные дают то же видео, что критично для CI, регрессионных тестов и автоматизированного рендеринга.

Каталог блоков и frame.md

Не обязательно собирать всё с нуля. Каталог готовых блоков и компонентов устанавливается одной командой:

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

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

Стек и сравнение с Remotion

HyperFrames — это не только рендерер, а целый стек: CLI для скаффолдинга и рендеринга; ядро из пакетов Core, Engine и Producer (парсинг композиций, headless Chrome через Puppeteer, кодирование, микширование звука); каталог блоков; скиллы для агентов; браузерный редактор Studio; встраиваемый веб-компонент <hyperframes-player>; WebGL-шейдерные переходы; SDK для распределённого рендеринга на AWS Lambda; и комьюнити-плеграунд hyperframes.dev.

Своим вдохновлением авторы прямо называют Remotion: оба инструмента рендерят видео через headless Chrome и FFmpeg. Главное отличие — модель авторинга. Remotion ставит на React-компоненты и требует бандлера; HyperFrames ставит на чистый HTML, который одинаково легко пишут человек и агент. Анимации в Remotion завязаны на wall-clock-паттерны, где точность по кадрам требует аккуратности, — в HyperFrames всё seekable и покадрово точное благодаря адаптерам. Наконец, лицензия: Apache 2.0 без платы за рендеры и порогов коммерческого использования против source-available-лицензии Remotion.

Что стоит знать

• Проект активно развивается: в репозитории более 4200 коммитов, живые Issues и Discussions, есть Discord.
• При клонировании для разработки учтите Git LFS: золотые регрессионные baseline-ролики в packages/producer/tests весят около 240 МБ; для работы только с исходниками используйте GIT_LFS_SKIP_SMUDGE=1 git clone.
• Скиллы можно поставить выборочно (--skill <name>) или всем набором (--all), а npx hyperframes init обновляет только базовый набор и никогда не дотягивает недостающее самовольно.
• Есть готовый плагин-архив для Codex (bun run package:codex-plugin) и манифест для остальных агентских платформ.

HyperFrames — наглядный пример того, куда движется «агентная» разработка: вместо нового редактора или SaaS-сервиса проект даёт агенту знакомый примитив (HTML), детерминированный инструмент рендеринга и скиллы, которые кодифицируют производственный процесс. Если вам нужно массово генерировать видео из кода — от промо-роликов до видеообзоров пул-реквестов — это один из самых зрелых открытых вариантов на сегодня.

Ссылки:

• Репозиторий: github.com/heygen-com/hyperframes
• Документация: hyperframes.heygen.com
• Плейграунд: hyperframes.dev
• Лицензия: Apache 2.0
• Принимающие команды: ADOPTERS.md