HyperFrames — пишите HTML, рендерите видео

HyperFrames — фреймворк с открытым исходным кодом для превращения HTML, CSS, медиа и seekable-анимаций в детерминированные MP4-видео. Используйте локально через CLI, из AI-агентов через скиллы или как рендеринговое ядро в hosted-воркфлоу.

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

С AI-агентом

npx skills add heygen-com/hyperframes

Затем опишите желаемое видео, например:

С помощью /hyperframes создай 10-секундное продуктовое интро с fade-in заголовком, фоновым видео и тонкой фоновой музыкой.

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

Скиллы

HyperFrames поставляется с 19 скиллами, которые агенты загружают по требованию. Читайте /hyperframes первым — это роутер и карта возможностей.

npx skills add heygen-com/hyperframes           # Интерактивный выбор
npx skills add heygen-com/hyperframes --all     # Установить все 19 сразу
npx skills add heygen-com/hyperframes --skill <name>  # Только один скилл

Воркфлоу создания

Предметные скиллы (загружаются по требованию)

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

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # Предпросмотр в браузере с live reload
npx hyperframes render       # Рендер в MP4

Требования: Node.js 22+, FFmpeg

Что можно создавать

• Лонч-видео продуктов и анонсы фич
• PR-объяснения с анимированными code diff, нарратором и субтитрами
• Визуализации данных, chart races и анимации карт
• Соцсети-видео с кинетическими субтитрами, оверлеями и музыкой
• Конвертация docs/PDF/website в объяснительные видео
• Переиспользуемая motion-графика для автоматизированных контент-пайплайнов

Frame.md

Frame.md — ваша дизайн-система, готовая для видео.

У каждого бренда есть design.md. Ни один из них не написан для камеры. frame.md — недостающий слой перевода: он берёт вашу web-ориентированную спецификацию дизайна и инвертирует её для кадра — те же токены, те же правила, но переписанные так, чтобы AI-агент мог скомпоновать промо-видео без угадывания масштабов.

Как это работает

<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>
    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>

Предпросмотр мгновенно в браузере. Рендер локально или в Docker. Рендерер перемещается по каждому кадру в headless Chrome и кодирует результат с помощью FFmpeg — один и тот же ввод даёт одно и то же видео.

Стек HyperFrames

Catalog

npx hyperframes add flash-through-white   # shader-переход
npx hyperframes add instagram-follow      # соц-оверлей
npx hyperframes add data-chart            # анимированный chart

Почему HyperFrames?

• HTML-нативный: композиции — HTML-файлы с data-атрибутами. Без React, без проприетарного формата таймлайна.
• Дружественен агентам: агенты уже пишут HTML, а CLI по умолчанию неинтерактивен.
• Детерминированный: одинаковый ввод → одинаковые кадры → одинаковый вывод. Создан для CI и автоматизированного рендеринга.
• Без шага сборки: index.html-композиция воспроизводится как есть и может быть просмотрена напрямую в браузере.
• Адаптерная анимация: подключайте GSAP, CSS-анимации, Lottie, Three.js, Anime.js, WAAPI или кастомный runtime.
• Открытый исходный код: лицензия Apache 2.0, без платы за рендер.

HyperFrames vs Remotion

Пакеты

Сообщество

HyperFrames используется в продакшене в HeyGen, с примерами от команд tldraw, TanStack и других.

• Вопросы и идеи: Discord
• Баги и запросы фич: GitHub Issues

Разработка

Репозиторий использует Git LFS для золотых регрессионных тестов (~240 МБ .mp4-файлов). Установите Git LFS перед клонированием:

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Один раз на машину
git lfs install

Для клонирования только исходных файлов:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

Лицензия

Apache 2.0