HyperFrames: как HTML превращается в детерминированное видео

HyperFrames: HTML как первичный язык для генерации motion-графики

HyperFrames — open-source фреймворк от HeyGen, который превращает HTML (с CSS и JS) в детерминированное видео. Один и тот же HTML-ввод всегда даёт идентичный видеофайл (байт в байт), что критично для CI/CD и агентских пайплайнов. В основе лежат headless Chrome для захвата кадров и FFmpeg для кодирования. Нет проприетарных форматов, React-зависимости или timeline-редакторов — только HTML как язык композиции.

Механизм: как HyperFrames строит видео из разметки

Фреймворк состоит из пяти пакетов:

• @hyperframes/core — парсит HTML, линтует разметку и подготавливает сцену.
• @hyperframes/engine — захватывает кадры через headless Chrome с поддержкой seekable-анимаций.
• @hyperframes/producer — кодирует видео с помощью FFmpeg, включая микширование аудио.
• @hyperframes/studio — браузерный UI для интерактивного редактирования таймлайнов (опционально).
• @hyperframes/player — встраиваемый веб-компонент <hyperframes-player> для проигрывания результата.

Анимации (GSAP, Lottie, CSS, Three.js) регистрируются в window.__timelines с ключом по data-composition-id. Движок HyperFrames управляет таймлайнами в режиме paused: true, позволяя точно "прыгать" на нужный кадр (например, 45-й кадр = 1,5 секунда в таймлайне). Но анимации должны быть seekable — если GSAP-таймлайн не зарегистрирован в window.__timelines, рендеринг не сработает.

Пример минимальной композиции:

<div id="stage" data-composition-id="my-video" data-width="1920" data-height="1080">
  <video id="clip-1" data-start="0" data-duration="5" data-track-index="0" src="intro.mp4" muted></video>
  <img id="overlay" class="clip" data-start="2" data-duration="3" data-track-index="1" src="logo.png"/>
  <audio id="bg-music" data-start="0" data-duration="5" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
  window.__timelines["my-video"] = tl;
</script>

Здесь data-track-index определяет слой (0 = фон, 1 = оверлей, 2 = аудио). Нет данных о лимите слоёв или конфликтах при наложении.

Агентская интеграция: генерация видео "на лету"

HyperFrames позиционируется как инструмент для AI-агентов. Официальные навыки для Claude Code, Cursor и Gemini CLI (/hyperframes, /gsap, /lottie, /three, /css-animations, /tailwind, /hyperframes-media) позволяют агентам генерировать видео прямо в чате. Документация включает примеры промптов:

Создай 10-секундный ролик в формате 9:16 для TikTok с прыгающими заголовками, анимированной диаграммой из CSV и нижней третью с именем спикера.

Агент пишет HTML, HyperFrames рендерит видео. Итерация происходит через диалог: "сделай заголовок в 2 раза больше", "добавь fade-out в конце". Однако в источниках нет бенчмарков точности генерации сложных сцен (например, с несколькими слоями анимации).

Пакет @hyperframes/media поддерживает генерацию речи (TTS), транскрибацию (Whisper) и удаление фона, но примеры кода или бенчмарки качества отсутствуют.

Готовые блоки: удобство vs кастомизация

Фреймворк поставляется с 50+ готовыми блоками:

• социальные оверлеи (instagram*-follow, tiktok-follow);
• шейдерные переходы (flash-through-white);
• анимированные чарты (data-chart);
• кинетические тексты, нижние трети, эффекты для соцсетей.

Установить можно одной командой:

npx hyperframes add data-chart

Однако для глубокой кастомизации (например, изменение цветовой схемы блока) потребуется ручной HTML/CSS. В источниках нет примеров, как адаптировать блоки под бренд — это означает, что для нестандартных задач HyperFrames остаётся полуфабрикатом.

HyperFrames vs Remotion: свобода против зрелости

HyperFrames и Remotion решают схожие задачи, но подходы радикально разные.

HyperFrames выигрывает в простоте и лицензионной свободе, но проигрывает Remotion в зрелости для production-пайплайнов. Remotion используется в production, а HyperFrames на апрель 2026 находится на стадии v0.5.0-alpha.2.

Ограничения, о которых стоит помнить

1. Требования: рендеринг требует Node.js 22+ и FFmpeg. Если их нет, пайплайн ломается. В документации нет примеров fallback-механизмов (например, скрипта для автоматической установки FFmpeg).
2. Аудио: HyperFrames фокусируется на визуальном рендеринге. Аудио (TTS, музыка) добавляется позже через FFmpeg. Нет встроенного микшера для многодорожек.
3. Производительность: в источниках нет бенчмарков времени рендеринга для длинных видео (например, 10-минутных роликов) или сравнения с облачными решениями (например, Remotion Lambda).

Практическая граница: где HyperFrames эффективен, а где нет

HyperFrames — это инструмент для узкой задачи: генерация motion-графики и оверлеев из HTML. Он не предназначен для редактирования реальных видеофайлов (например, обрезки интервью) — это задача Selects, который интегрируется с HyperFrames и Remotion.

Используйте HyperFrames, если:

• нужен детерминированный рендеринг (CI/CD, агенты);
• композиция строится на HTML/CSS/JS;
• приоритет — скорость итерации, а не монтаж видеофайлов.

Не используйте HyperFrames, если:

• требуется сложный монтаж реальных видео (Selects);
• нужен облачный рендеринг с масштабированием (Remotion Lambda).

• Instagram принадлежит компании Meta, которая признана экстремистской организацией и запрещена в Российской Федерации.