HyperFrames: видео из HTML-кода для AI-агентов
HeyGen открыла исходный код HyperFrames — фреймворка, который превращает HTML, CSS и анимации в детерминированные MP4-видео с помощью AI-агентов.
Видео как код: HeyGen открыла HyperFrames
HyperFrames — open-source фреймворк для превращения HTML, CSS, медиафайлов и анимаций в детерминированные MP4-видео. Его можно использовать локально через CLI, через AI-агентов или как ядро рендеринга в облачных редакторах. Репозиторий на GitHub уже набрал почти 44 000 звёзд по состоянию на начало сентября 2026 года, а среди команд, использующих его в продакшне, HeyGen называет tldraw и TanStack.
Как это работает
Фреймворк берёт HTML-страницу с элементами, содержащими временны́е атрибуты, и команда рендеринга пошагово обходит её кадр за кадром в безголовом Chrome, а затем кодирует результат через FFmpeg.
Фреймворк рассматривает каждый HTML-элемент как «клип» (clip). Через простые data-*-атрибуты вы описываете таймлайн прямо в разметке.
Рендер надёжен: HyperFrames запрашивает у проекта каждый точный кадр, а не зависит от живого воспроизведения — это гарантирует, что медленная машина не пропустит моменты в итоговом видео.
Быстрый старт через CLI
# Создать новый проект
npx hyperframes init my-video
cd my-video
# Превью в браузере с live reload
npx hyperframes preview
# Рендер в MP4
npx hyperframes render
Интеграция с AI-агентами
HyperFrames — это open-source фреймворк для рендеринга видео от HeyGen, который позволяет AI-агентам создавать видео с помощью HTML, CSS и JavaScript. Вместо ручного монтажа в таймлайн-редакторе, разработчики и AI-инструменты генерируют видеокомпозиции через код.
Это полезно для создания продуктовых видео, социальных клипов, анимированных объяснений, визуализаций данных, субтитров, оверлеев и других веб-ориентированных видеоформатов.
HyperFrames особенно удобен для пользователей, работающих с AI-агентами — Claude Code, Cursor, Gemini CLI или Codex. Эти инструменты могут создавать, редактировать, предпросматривать и рендерить видео прямо из текстовых промптов.
Для подключения навыков к агенту достаточно одной команды:
npx skills add heygen-com/hyperframes
После установки можно сразу описывать нужное видео на естественном языке.
20 навыков — рабочие сценарии «из коробки»
Ключевые дополнения включают облачный рендеринг (через инфраструктуру HeyGen, AWS Lambda и Google Cloud Run), единую команду check, которая заменила несколько старых проверок и теперь одновременно анализирует разметку, ошибки рантайма и WCAG-контраст, а также систему навыков, выросшую до 20 скиллов с роутером, устанавливающим рабочие процессы по требованию.
| Навык | Сценарий использования |
|---|---|
/hyperframes | Роутер — читается первым, определяет тип задачи |
/product-launch-video | Промо-видео продукта по URL или брифу |
/faceless-explainer | Объяснение темы без продукта — только текст |
/pr-to-video | GitHub Pull Request → видео-changelog |
/motion-graphics | Короткая motion-графика (~до 10 сек) |
/music-to-video | Видео в такт музыкальному треку |
/slideshow | Презентация / pitch deck с навигацией |
/talking-head-recut | Монтаж интервью с графическими оверлеями |
/general-video | Любой другой сценарий — универсальный fallback |
/remotion-to-hyperframes | Миграция Remotion-композиций на HyperFrames |
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.Рабочий процесс агента
graph LR
A[Описание видео] --> B[Агент пишет HTML/CSS/JS]
B --> C[Lint и Preview]
C --> D{Результат OK?}
D -- Да --> E[Render в MP4]
D -- Нет --> B
E --> F[Готовый MP4-файл]
HyperFrames vs Remotion
Фреймворк HyperFrames от HeyGen решает ключевое противоречие в производстве видео: профессиональные инструменты требуют долгого освоения, а простые — лишены гибкости.
Remotion, построенный на архитектуре React, подходит командам, уже работающим со стеком React — особенно тем, кто генерирует большие объёмы видео по табличным данным. HyperFrames, напротив, отлично справляется с быстрым созданием отдельных качественных видео и легко интегрируется с AI-агентами.
Как объясняет инженер HeyGen Джошуа Сюй, выбор обусловлен ключевым наблюдением: LLM-модели обучены на HTML и обладают обширными знаниями о веб-коде, тогда как React+Remotion занимает ничтожную долю обучающих данных.
| Параметр | HyperFrames | Remotion |
|---|---|---|
| Язык | HTML / CSS / JS | React (JSX) |
| Целевая аудитория | AI-агенты, разработчики | React-разработчики |
| Лучший сценарий | Единичные качественные видео | Пакетная генерация по данным |
| Лицензия | Apache 2.0 | Remotion License |
| Рендер | Headless Chrome + FFmpeg | Puppeteer + FFmpeg |
| GitHub Stars (сент. 2026) | ~44 000 | — |
«Это не просто новый инструмент — это новая категория. Переносив производство видео в мир HTML, понятный агентам и разработчикам, HeyGen открывает дверь к автоматизированному программному видео в масштабах, которых мы ещё не видели.»
Медиа-движок и аудио
Встроенный «медиа-ОС» разрешает любую потребность в медиаресурсах — фоновая музыка, звуковые эффекты, изображения, иконки, логотипы, голос, цветокоррекция. Все файлы фиксируются локально и отслеживаются через общий аудиодвижок и манифест.
HeyGen также выпустила плагин для Codex, импорт из Figma, локальный семантический поиск по каталогу медиа и frame.md — видео-ориентированную версию дизайн-системы, из которой агент может компоновать видео.
Почему это важно
HyperFrames — это не просто новый инструмент, это новая категория. Перенеся производство видео в мир Git-отслеживаемого, понятного агентам HTML, HeyGen открывает путь к автоматизированному программному видео в беспрецедентном масштабе.
Фреймворк уже активно развивается: при первой публикации CLI был на версии 0.6.x, сейчас он достиг 0.8.27 — за это время вышло 152 релиза.