HE
hyperframes-core
HyperFrames — контракт композиции для создания одного рендерящегося проекта. Используется для структуры, атрибутов timing, треков, переменных и правил детерминированного рендеринга. Читайте перед написанием composition HTML.
Что делает навык
HyperFrames Core — технический контракт для создания HTML-композиций, которые рендерятся в видео. Он определяет структуру DOM, атрибуты тайминга, треки, переменные и правила детерминированного рендеринга, обеспечивая управляемую анимационным рантаймом воспроизведение медиа.
Когда применять
- Создание HTML-файлов для рендеринга видео с использованием data-* атрибутов для объявления таймингов.
- Настройка анимаций с учетом ограничений GSAP и CSS (например, использование flex/inset вместо transform для центрирования).
- Отладка рендеринга через проверку сводки (summary) после генерации видео.
- Интеграция с другими компонентами HyperFrames (анимация, креатив, CLI) в рамках единого проекта.
Как работает
- Создайте HTML-файл композиции, где DOM объявляет тайминги через data-* атрибуты.
- Используйте flex или inset для центрирования элементов, избегая конфликта с GSAP transform.
- Не добавляйте явное скрытие сцен через visibility:hidden; используйте fade opacity для inner nodes или .clip.
- Убедитесь, что window.__timelines["id"] совпадает с data-composition-id корневого элемента.
- После рендеринга проанализируйте вторую строку сводки: beginframe vs screenshot, режим GPU и тайминги этапов.
Примеры запросов агенту
Создай HTML-композицию для видео с анимацией текста, используя data-timing и flex-центрирование.
Проверь, правильно ли настроен window.__timelines для композиции с data-composition-id="main".
Отладь рендеринг видео: проверь сводку на наличие software gpu и slow path при рендере на Linux.
Что понадобится
- Репозиторий https://github.com/heygen-com/hyperframes
- Знание структуры references/ и смежных навыков (hyperframes-animation, hyperframes-creative и др.)
- Доступ к инструментам рендеринга HyperFrames (CLI, runtime)
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «hyperframes-core» из репозитория:
# https://github.com/heygen-com/hyperframes
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r hyperframes-core/ ~/.claude/skills/hyperframes-core/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.