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

HyperFrames — открытый фреймворк HeyGen для создания детерминированных MP4-видео из HTML, CSS, медиа и анимации с управляемой перемоткой. Композицию можно собирать вручную через интерфейс командной строки (CLI) или поручить кодинг-агенту, включая Codex.

Что такое HyperFrames

В HyperFrames видео описывается как HTML-композиция с таймингами, медиа и анимацией. Движок открывает страницу в браузере Chrome без графического интерфейса (headless Chrome), переходит к каждому кадру и передаёт результат FFmpeg для кодирования видео.

Ключевые свойства:

• открытый исходный код и лицензия Apache 2.0;
• композиции на HTML и CSS без обязательного React и отдельного этапа сборки;
• детерминированный покадровый рендер;
• локальная работа через CLI, Docker или AWS Lambda;
• управление из кодинг-агентов через скиллы;
• адаптеры для GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI и других сред анимации;
• каталог готовых переходов, подписей, графиков, карт, оверлеев и эффектов.

HyperFrames отвечает за композицию ролика: сцены, титры, графику, анимацию, переходы и звук.

Как устроено видео в HTML

Тайминг элементов хранится в data-*-атрибутах. Элементы с временными границами получают класс clip, а управляемая анимация регистрируется под идентификатором композиции.

Минимальный пример:

<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["my-video"] = tl;
  </script>
</div>

Основные правила:

• корневой элемент задаёт data-composition-id, ширину и высоту;
• временной элемент получает class="clip", data-start, data-duration и data-track-index;
• таймлайн GSAP создаётся с { paused: true };
• ключ в window.__timelines совпадает с data-composition-id;
• отдельно инициализировать window.__timelines не нужно: реестр создаёт рантайм до выполнения встроенных скриптов.

Скиллы HyperFrames содержат полный контракт композиции и помогают агенту соблюдать эти правила.

Основные возможности

Установка скиллов для Codex и других агентов

Интерактивная установка запускается так:

npx skills add heygen-com/hyperframes

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

Для агента или другого неинтерактивного запуска используйте:

npx hyperframes skills update

Эта команда устанавливает основной набор скиллов из текущей ветки main. Реестр skills.sh, который использует skills add, может обновляться с задержкой.

Чтобы намеренно поставить все 20 опубликованных скиллов:

npx skills add heygen-com/hyperframes --all

Шесть внутренних скиллов из .claude/skills и .agents/skills по умолчанию исключены. Флаг --all относится к опубликованному набору и не добавляет эти внутренние файлы.

Официальный сайт также показывает вариант:

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

После установки начинайте задачу с /hyperframes. Роутер определит подходящий рабочий процесс и загрузит его правила.

Локальный проект и рендер

Для ручного запуска нужны Node.js 22+ и FFmpeg:

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

init создаёт проект, а preview открывает браузерный предварительный просмотр с автоматическим обновлением. Финальный MP4 собирается командой:

npx hyperframes render

Проверьте окружение перед началом работы:

npx hyperframes doctor

Наблюдаемый признак готовности: doctor видит необходимые зависимости, а preview открывает композицию без ошибок.

Работа через Codex

Официальные скиллы совместимы с Codex, Claude Code, Cursor, Gemini CLI и другими агентами с поддержкой скиллов. В Codex рабочий цикл выглядит так:

1. Установите основной набор скиллов.
2. Запустите задачу через /hyperframes.
3. Согласуйте сцены, длительность и набор медиа.
4. Попросите агента выполнить lint и check.
5. Откройте preview и проверьте композицию.
6. После правок запустите render.

Пример запроса:

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

Для разработки плагина из исходного репозитория предусмотрена команда:

bun run package:codex-plugin

Она создаёт архив dist/hyperframes-plugin.zip с корневой папкой hyperframes и проверяет ограничение Codex в 100 МБ.

Скиллы и рабочие процессы

Главная команда /hyperframes служит маршрутизатором. Она выбирает один из рабочих процессов:

Доменные скиллы подключают отдельные уровни работы:

• /hyperframes-core — структура композиции, клипы, треки и тайминг;
• /hyperframes-animation — анимация и адаптеры сред выполнения;
• /hyperframes-keyframes — ключевые кадры с корректной перемоткой;
• /hyperframes-creative — визуальное направление, типографика, раскадровка и повествование;
• /media-use — поиск, подготовка и учёт локальных медиа;
• /hyperframes-cli — команды разработки, проверки и рендера;
• /hyperframes-audio — сведение уже добавленных звуковых дорожек;
• /hyperframes-registry — поиск и подключение блоков из каталога;
• /figma — перенос ресурсов и состояний из Figma в композицию.

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

Примеры установки блоков из официального README:

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

Полезные сценарии

Видео по репозиторию или документации

Исходные данные: README, документация и файлы проекта, к которым уже имеет доступ Codex.

Через /hyperframes собери 60-секундный ролик о назначении и архитектуре
этого сервиса. Используй сведения из README и docs. Формат 9:16.
Сначала покажи план, затем выполни локальный preview без публикации.

Ожидаемый результат: композиция открывается в preview, сцены соответствуют исходной документации, а lint и check не сообщают о блокирующих ошибках. Сценарий не заменяет живую съёмку: доступный визуальный материал ограничен файлами проекта и созданной графикой.

Видеообзор pull request

Используйте /pr-to-video, когда ревьюерам нужен короткий рассказ об изменении кода. Агент читает pull request через gh, выделяет назначение изменения и собирает видео с кодом, подписями и при необходимости озвучкой.

Проверяемый результат: в ролике отражены реальные изменения из сравнения (diff), а выводы не выходят за пределы данных pull request. Для закрытого репозитория среда должна иметь разрешённый доступ через gh.

Анимация данных

Исходные данные: таблица с числовыми значениями по времени.

Возьми data/metrics.csv и через /hyperframes собери 15-секундную
анимацию данных с блоком data-chart. Подпиши оси и сначала покажи preview.

Проверяемый результат: финальный кадр совпадает с итоговыми значениями таблицы, подписи читаются, а переход к любому моменту показывает корректное состояние. Разовые показатели без временной последовательности не подходят для честной гонки диаграмм.

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

Ограничения

• Для локального цикла нужны Node.js 22+, FFmpeg и базовое понимание структуры HTML-проекта.
• Детерминированный рендер требует управляемой перемотки анимации. Зависимости от реального времени могут нарушить покадровую воспроизводимость.
• Локальный рендер не требует платы за каждый ролик, однако внешние модели, облачный рендер и медиа-сервисы могут иметь собственные условия и расходы.
• Команды и интерфейсы могут меняться. Для флагов и поведения, которые зависят от версии, проверяйте npx hyperframes <command> --help и актуальную официальную документацию.

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

Факты и команды в этом руководстве сверены 12 сентября 2026 года по приложенным официальным сайту и README репозитория HyperFrames. Практический запуск в рамках этой проверки не выполнялся.

Ссылки

• Сайт и документация: hyperframes.heygen.com
• Документация: hyperframes.heygen.com/introduction
• Playground: hyperframes.dev
• Каталог: hyperframes.heygen.com/catalog
• Исходный код: github.com/heygen-com/hyperframes

Следующий шаг

Для первого запуска откройте документацию HyperFrames: там собраны Quickstart, Showcase, Guides, API Reference, Catalog, Examples и раздел об AWS Lambda.

Связанные материалы

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

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

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