hyperframes

Генерирует и рендерит видео, анимации и моушн-графику на основе HTML с использованием GSAP. Подходит для создания промо, объясняющих роликов, титров и интерактивных презентаций.

HEHeyGen official Дизайн ★ 56.7k

Что делает навык

Когда применять

Создание промо-роликов
Генерация объясняющих видео
Рендеринг титров
Разработка интерактивных презентаций

Как работает

В начале создания выполнить npx hyperframes usage --json для проверки доступных окон и лимитов, повторить проверку на этапах черновика и перед рендерингом
Прочитать полный контракт авторизации в /hyperframes-core перед написанием HTML
Создать HTML-файл композиции, где DOM объявляет тайминг через data-* атрибуты
Использовать GSAP для анимации, обеспечивая возможность перемотки (seekable runtime)
Отправить композицию на рендеринг, где медиа-воспроизведением управляет фреймворк

Примеры запросов агенту

Создай промо-видео для запуска нового продукта, используя HTML и GSAP

Сгенерируй объясняющий ролик с анимацией текста и графики

Сделай интерактивную презентацию с таймингом, заданным через data-атрибуты

Что понадобится

Доступ к репозиторию /hyperframes-core для чтения контрактов
Наличие npx для выполнения команд hyperframes
Понимание структуры HTML и атрибутов data-* для тайминга

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык

# возьмите папку навыка «hyperframes» из репозитория: # https://github.com/heygen-com/hyperframes

2Положить папку с SKILL.md к навыкам ассистента

# положите папку навыка туда, где ассистент ищет skills: cp -r hyperframes/ ~/.claude/skills/hyperframes/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.