Справочник GSAP специально для HyperFrames: методы tweening (to/from/fromTo), последовательности таймлайна и эффекты специально для видеокомпозиций.

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>  # Только один скилл

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

Скилл	Использовать когда
`/product-launch-video`	Маркетинг / запуск / продвижение продукта — по URL, брифу или скрипту. До ~3 мин (оптимально 30–90 с)
`/website-to-video`	Превращение обычного сайта в видео — тур, портфолио, соц-клип
`/faceless-explainer`	Объяснение темы/концепции из текста — без продукта, без URL; все визуалы изобретаются LLM
`/pr-to-video`	GitHub pull request → changelog / feature-reveal / объяснение рефакторинга
`/embedded-captions`	Добавление субтитров к существующему видео с говорящей головой
`/talking-head-recut`	Оформление существующего видео дизайнерскими графическими оверлеями
`/motion-graphics`	Короткая (~до 10 с) ненарративная motion-графика — кинетический текст, логотип-стинг
`/music-to-video`	Музыкальный трек → видео, синхронизированное с битами
`/slideshow`	Презентация / pitch-deck — отдельные слайды, ветвление, навигация; вывод — колода, а не MP4
`/general-video`	Всё остальное — длинные работы, статичный луп, кастомная композиция
`/remotion-to-hyperframes`	Портирование существующей Remotion-композиции в HyperFrames (миграция, не создание)

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

Скилл	Охватывает
`/hyperframes-core`	Контракт композиции — атрибуты `data-*`, клипы, треки, суб-композиции, переменные
`/hyperframes-animation`	Всё об анимации — атомарные правила движения, blueprints сцен, переходы, адаптеры (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)
`/hyperframes-creative`	Creative direction — `frame.md` / `design.md`, палитры, типографика, нарратив, планирование битов
`/hyperframes-media`	Аудио + медиа — TTS, фоновая музыка, транскрипция, удаление фона, субтитры
`/media-use`	Резолв любой медиа-потребности в зафиксированный локальный файл + запись в манифест
`/hyperframes-cli`	CLI dev-цикл — `init`, `lint`, `validate`, `inspect`, `preview`, `render`, `publish`, AWS Lambda
`/hyperframes-registry`	Установка и подключение registry-блоков и компонентов через `hyperframes add`

Вручную через 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

Компонент	Статус	Что делает
CLI	Доступен	Скаффолдинг, предпросмотр, lint, inspect и рендер локальных проектов
Core / Engine / Producer	Доступен	Парсинг композиций, управление headless Chrome, кодирование видео и микширование аудио
Catalog	Доступен	Переиспользуемые блоки и компоненты для переходов, оверлеев, субтитров, графиков и эффектов
Agent skills	Доступны	Обучение агентов паттернам видеопроизводства
Studio	Доступен, развивается	Браузерный интерфейс для предпросмотра и редактирования композиций
AWS Lambda rendering	Доступен	Развёртывание распределённого рендер-стека
hyperframes.dev	Доступен	Площадка сообщества для предпросмотра, итерации, публикации и рендера
frame.md	Доступен	Инвертируйте дизайн-систему для камеры — DESIGN.md superset для агентов

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	Remotion
Авторинг	HTML + CSS + seekable-анимация	React-компоненты
Шаг сборки	Нет; `index.html` воспроизводится как есть	Требуется бандлер
Передача агенту	Простые HTML-файлы	JSX / React-проект
Анимации с библиотечными таймерами	Seekable, frame-accurate через адаптеры	Паттерны wall-clock-анимации требуют внимания
Распределённый рендеринг	Локальный и AWS Lambda	Remotion Lambda, зрелый облачный рендерер
Лицензия	Apache 2.0	Source-available Remotion License

Пакеты

Пакет	Описание
`hyperframes`	CLI для создания, предпросмотра, lint и рендера композиций
`@hyperframes/core`	Типы, парсеры, генераторы, linter, runtime и адаптеры кадров
`@hyperframes/engine`	Seekable-движок захвата страниц в видео на Puppeteer и FFmpeg
`@hyperframes/producer`	Полный пайплайн рендеринга: захват, кодирование и аудиомикширование
`@hyperframes/studio`	Браузерный редактор композиций
`@hyperframes/player`	Встраиваемый web-компонент `<hyperframes-player>`
`@hyperframes/shader-transitions`	WebGL shader-переходы для композиций
`@hyperframes/aws-lambda`	AWS Lambda SDK и поверхность развёртывания для распределённых рендеров

Сообщество

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

gsapGSAP для HyperFrames

Установка