waapiWeb Animations API для HyperFrames
heygen-com/hyperframes
Адаптер Web Animations API для HyperFrames: синхронизирует animation.currentTime с таймлайном HyperFrames вместо запуска по wall-clock.
Установка
npx -y skills add heygen-com/hyperframes --skill waapi --agent claude-codeHyperFrames — пишите 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
Из того же репозитория
hyperframes — видео в HTML без редактора таймлайна
heygen-com/hyperframes
Создание видеоконтента в HTML с GSAP таймлайнами. Полный воркфлоу: композиции, анимации, аудио-синхронизация и финальный рендер без видеоредактора.
hyperframes-cli — CLI для HyperFrames видео
heygen-com/hyperframes
Полный dev-цикл для HyperFrames: init с 9 стартовыми шаблонами, lint для ошибок композиций, inspect и финальный рендер видеопроектов.
gsap — GSAP для HyperFrames
heygen-com/hyperframes
Справочник GSAP специально для HyperFrames: методы tweening (to/from/fromTo), последовательности таймлайна и эффекты специально для видеокомпозиций.
hyperframes-registry — реестр компонентов HyperFrames
heygen-com/hyperframes
Управляет командой hyperframes add: установка blocks и компонентов из реестра, подключение к композициям. Blocks получают data-block атрибуты для анимации.
website-to-hyperframes — сайт в HyperFrames видео