HyperFrames

HyperFrames — open-source фреймворк для рендеринга видео, позволяющий создавать, предпросматривать и рендерить HTML-композиции в видеофайлы. Имеет первоклассную поддержку AI-агентов.

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

Вариант 1: С AI-агентом (рекомендуется)

Установите skills для HyperFrames, затем опишите нужное видео:

npx skills add heygen-com/hyperframes

Это обучает вашего агента (Claude Code, Cursor, Gemini CLI, Codex) правильно писать композиции и GSAP-анимации. В Claude Code skills регистрируются как slash-команды — вызывайте /hyperframes для создания композиций, /hyperframes-cli для команд CLI и /gsap для помощи с анимациями.

Для Codex те же skills также доступны как плагин OpenAI Codex — установите только нужные части:

bash

codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets

Попробуйте: примеры промптов

Скопируйте любой из них в своего агента. Префикс /hyperframes явно загружает контекст skill, чтобы с первого раза получить корректный результат.

Холодный старт — опишите, что хотите:

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

Тёплый старт — превратите существующий контент в видео:

Посмотри на этот GitHub-репозиторий https://github.com/heygen-com/hyperframes и объясни его назначение и архитектуру с помощью /hyperframes.

Сожми прикреплённый PDF в 45-секундное pitch-видео с помощью /hyperframes.

Преврати этот CSV в анимированную гонку столбчатых диаграмм с помощью /hyperframes.

Под конкретный формат:

Сделай вертикальное 9:16 TikTok-видео о [теме] с помощью /hyperframes с динамичными субтитрами, синхронизированными с TTS-озвучкой.

Итерация — общайтесь с агентом как с видеоредактором:

Сделай заголовок в 2 раза крупнее, переключи на тёмную тему и добавь затухание в конце.

Добавь нижнюю треть на 0:03 с моим именем и должностью.

Агент берёт на себя скаффолдинг, анимацию и рендеринг. Смотрите руководство по промптингу для дополнительных паттернов.

Вариант 2: Создать проект вручную

bash

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

hyperframes init автоматически устанавливает skills, так что в любой момент можно передать работу AI-агенту.

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

Зачем HyperFrames?

HTML-нативность — композиции представляют собой HTML-файлы с data-атрибутами. Без React, без проприетарных DSL.
AI-first — агенты уже умеют писать HTML. CLI неинтерактивен по умолчанию и спроектирован для агентных рабочих процессов.
Детерминированный рендеринг — одинаковый ввод = идентичный результат. Создан для автоматизированных пайплайнов.
Паттерн Frame Adapter — подключайте собственный анимационный рантайм (GSAP, Lottie, CSS, Three.js).

HyperFrames vs Remotion

HyperFrames вдохновлён Remotion — мы использовали Remotion в HeyGen в продакшне, многому научились и сохранили атрибуционные комментарии в исходниках для паттернов, которые он первым реализовал (флаги запуска Chrome, image2pipe → FFmpeg streaming, буферизация кадров). Оба инструмента управляют headless Chrome и оба детерминированы. Они различаются в одном решении: что пишет основной автор. Ставка Remotion — React-компоненты; ставка HyperFrames — HTML.

	HyperFrames	Remotion
Авторинг	HTML + CSS + GSAP	React-компоненты (TSX)
Шаг сборки	Не нужен; `index.html` работает as-is	Обязателен (бандлер)
Анимации по библиотечным часам (GSAP, Anime.js, Motion One)	Seekable, покадровая точность	Воспроизводятся по wall-clock при рендере
Произвольный HTML/CSS	Вставить и анимировать	Переписать как JSX
Распределённый рендеринг	Только одна машина (сейчас)	Lambda, production-ready

Лицензирование: полностью open source vs source-available

HyperFrames полностью open source под лицензией Apache 2.0 — одобренной OSI. Используйте в коммерческих целях в любом масштабе: без платы за рендер, без ограничений по числу мест, без порогов по размеру компании.

Remotion является source-available, но не open source. Код доступен на GitHub под кастомной лицензией Remotion, требующей платной корпоративной лицензии выше определённых порогов. Это отличный продукт с реальной командой — но если для вас важна open-source лицензия (соответствие OSI, права на распространение, отсутствие платы за использование), это принципиальное различие.

Подключение

README