HyperFrames от HeyGen — видео как код для ИИ-агентов и Codex

HyperFrames — опенсорсный фреймворк от HeyGen, который превращает HTML, CSS и JavaScript в готовое видео в формате MP4. Ролик описывается так же, как веб-страница, а собирает, предпросматривает и рендерит его ИИ-агент — например, прямо в Codex.

Что такое HyperFrames

HyperFrames решает одну конкретную задачу: дать ИИ-агенту способ делать видео на языке, который агент понимает лучше всего. Кодинг-агенты плохо кликают мышкой в Premiere или After Effects, зато отлично пишут разметку и скрипты. HyperFrames переводит производство видео в код, и агент работает с роликом как с обычным проектом.

Ключевые факты:

• Открытый код, лицензия Apache 2.0.
• Принцип «один файл на вход — видео на выход».
• Рендер детерминированный: одна и та же композиция всегда даёт один результат, кадр в кадр.
• Работает локально через CLI, из кодинг-агентов через скиллы или как движок рендера внутри большого пайплайна.

Это не про аватаров. Классический HeyGen делает говорящие головы из текста; HyperFrames собирает саму композицию ролика: титры, анимацию, подписи, графику, переходы.

Как это работает: видео как код

Композиция — это HTML-документ. Тайминг живёт прямо в разметке, в data-атрибутах. Анимацию считает GSAP и другие runtime-адаптеры, а финальный MP4 собирает FFmpeg.

Минимальная композиция выглядит так:

<div id="root" data-composition-id="my-video"
     data-start="0" data-width="1920" data-height="1080">

  <h1 id="title" class="clip"
      data-start="0" data-duration="5" data-track-index="0">
    Привет, HyperFrames!
  </h1>

  <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: -50, duration: 1 }, 0);
    window.__timelines = window.__timelines || {};
    window.__timelines["my-video"] = tl;
  </script>
</div>

Три правила, которые держат композицию рабочей:

• Корневой элемент задаёт data-composition-id, data-width и data-height.
• Каждый тайминговый элемент получает класс clip и атрибуты data-start, data-duration, data-track-index.
• Таймлайн GSAP создаётся с { paused: true } и регистрируется в window.__timelines.

Руками это писать не обязательно: как раз для этого есть скиллы, которые учат агента правильному синтаксису. О них ниже.

Что вы получаете: возможности

Установка: два пути

Путь 1 — через ИИ-агента (рекомендуется)

Установите скиллы и дальше описывайте нужное видео словами:

npx skills add heygen-com/hyperframes

Установщик покажет список скиллов. Возьмите core-набор, который нужен любому проекту (флаг --all ставит всё сразу). Скиллы регистрируются как слэш-команды в Codex, Claude Code, Cursor, Gemini CLI и GitHub Copilot CLI.

Путь 2 — вручную через CLI

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

init разворачивает структуру проекта и ставит скиллы агента автоматически, так что передать работу агенту можно на любом шаге. preview открывает HyperFrames Studio в браузере с горячей перезагрузкой. Финальный рендер:

npx hyperframes render --output output.mp4

Пререквизиты

• Node.js 22+ — среда для CLI и dev-сервера.
• FFmpeg — кодирование локального рендера.
• Docker — опционально, для полностью воспроизводимого рендера.

Интеграция с Codex

В Codex HyperFrames подключается как plugin, а его скиллы становятся слэш-командами. Дальше вы работаете с видео из того же окна, где собираете сайты и правите инфраструктуру.

Установка в Codex

Основной путь: Plugins → HyperFrames by HeyGen → Install. Альтернатива — поставить скиллы из upstream-репозитория:

npx skills add heygen-com/hyperframes --full-depth

Для локального предпросмотра и рендера в среде должны быть Node.js 22+ и FFmpeg.

Слэш-команды

Core-набор, который стоит поставить целиком:

Workflow-скиллы ставятся по необходимости: /product-launch-video, /faceless-explainer, /pr-to-video, /embedded-captions, /talking-head-recut, /motion-graphics, /music-to-video, /slideshow, /remotion-to-hyperframes. Начинайте промпт с /hyperframes — он сам направит задачу в подходящий скилл.

Холодный и тёплый старт

Cold start — описываете ролик с нуля:

Используя /hyperframes, собери 10-секундный интро-ролик: заголовок с fade-in
на тёмном фоне и тихая фоновая музыка.

Warm start — превращаете уже готовый материал в видео. Для Codex это самый сильный сценарий, потому что у агента уже есть контекст репозитория, PR и документов:

Посмотри этот репозиторий и объясни его архитектуру 45-секундным роликом
через /hyperframes.

Собери из этого CSV анимированный bar chart race через /hyperframes.

Итерируете как с видеоредактором, обычным текстом:

Сделай заголовок вдвое больше, включи тёмную тему и добавь fade-out в конце.
Добавь нижнюю плашку на 0:03 с моим именем и должностью.

Smoke-тест в Codex

npx hyperframes doctor

Если окружение готово:

npx hyperframes init smoke-video
cd smoke-video
npx hyperframes preview

Smoke пройден, если doctor видит Node и FFmpeg, а preview открывается без облачных кредов.

Границы через AGENTS.md

CLI пишет файлы проекта, запускает Node, headless-рендер и FFmpeg. Локальный рендер не требует облака, но TTS, hosted-рендер и внешние медиа могут просить кредиты. Чтобы агент не ушёл в публикацию или облако без спроса, задайте границы в AGENTS.md: разрешить локальный preview и render, запретить cloud rendering и любую отправку наружу без отдельного подтверждения.

Ключевые команды CLI

Скиллы и готовые блоки

Скиллы кодируют то, чего нет в обычной веб-документации: обязательный class="clip" на тайминговых элементах, регистрацию таймлайнов GSAP, семантику data-атрибутов, адаптеры вроде window.__hfLottie. Поэтому агент со скиллами делает корректную композицию сразу, с первого раза.

Каталог блоков — это 50+ готовых элементов: переходы, оверлеи для соцсетей, визуализации данных, эффекты. Добавляются одной командой:

npx hyperframes add instagram-follow
npx hyperframes add data-chart

Сценарии применения

Ниже три сценария, которые ближе всего к работе через Codex.

Ролик из репозитория или документации

У Codex уже есть доступ к вашему коду. Дайте задачу прямо в контексте проекта:

Через /hyperframes собери 60-секундный ролик о том, что делает этот сервис.
Возьми архитектуру из README и схему из docs. Вертикальный формат 9:16,
кинетические субтитры по TTS-озвучке. Только локальный preview, без облака.

Видео-тур по сайту

Захвати сайт https://example.com через npx hyperframes capture,
собери из захваченных материалов 30-секундный тур продукта с подписями к трём экранам
и лёгкими переходами. Используй /general-video.

Анимация данных из таблицы

Возьми data/metrics.csv и собери анимированный bar chart race за 15 секунд
через /hyperframes с блоком data-chart. Подпиши оси и добавь фоновую музыку.

Общий приём для всех трёх: сначала попросите агента показать план композиции (сцены, длительность, ассеты), утвердите его, и только потом запускайте preview и render. Так вы правите дешёвый план, а не дорогой рендер.

Ограничения и на что заложиться

• Порог входа. Нужен кодинг-агент или CLI и базовое понимание HTML. Это не GUI-редактор для мыши.
• Стоимость. Сам фреймворк бесплатный и открытый, локальный рендер ничего не стоит. Облачный рендер, TTS и внешние медиа могут требовать кредитов и аккаунта HeyGen.
• Детерминизм. Композиции должны быть предсказуемыми. Бесконечные циклы и несинхронные таймлайны мешают рендеру.
• Качество против скорости. Высокие настройки заметно замедляют сборку. Держите баланс под задачу.
• Диагностика. Если что-то ломается, lint, check и doctor ловят структурные и рантайм-ошибки, отсутствующие ассеты и проблемы контраста.

Чеклист быстрой проверки

Ссылки

• Сайт и документация: hyperframes.heygen.com
• Quickstart: hyperframes.heygen.com/quickstart
• Гайд по промптингу: hyperframes.heygen.com/guides/prompting
• Каталог блоков: hyperframes.heygen.com/catalog
• Исходный код: github.com/heygen-com/hyperframes
• Статья в справке HeyGen: HyperFrames x HeyGen

По теме

• Статья: Семь перерождений pimenov.ai: от ночного эксперимента с OpenClaw до рабочей системы на Codex
• Блог: Скиллы для Codex, с которыми сайты выглядят дорого
• База знаний: Skills и Plugins в Codex App: установка, использование и создание своих

Если вы уже собираете сайты и контент через Codex и хотите добавить к этому воспроизводимое видео из того же контура — HyperFrames закрывает как раз этот слой.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov