API ВЕГА

Навык описывает контракт HyperFrames для HTML-композиций, которые можно отрендерить в видео: структуру корня, тайминг через data-* и регистрацию анимации. Помогает собрать композицию, избежать ошибок lint и проверить проект перед рендером.

Возможности

  • Объясняет разницу между standalone-композицией и sub-composition, а также правила для <template> и data-composition-src.
  • Описывает data-*-атрибуты, class="clip", дорожки, клипы и переменные.
  • Задаёт правила для seekable timeline, media playback и детерминированного рендера.
  • Предупреждает об ошибках lint: конфликте CSS transform с GSAP, неверном управлении видимостью .clip, проблемах с <video> и <audio>.
  • Даёт порядок проверки через hyperframes check, snapshot, preview и render.

Когда использовать

  • Перед созданием HTML-композиции для HyperFrames.
  • При добавлении клипов, настройке тайминга или подключении sub-composition.
  • При отладке ошибок lint, проблем с media playback или недетерминированного рендера.
  • Перед рендером, чтобы проверить timeline и кадры проекта.

Примеры

Посмотреть клипы и дорожки проекта:

npx hyperframes timeline

Проверить проект:

npx hyperframes check

Задать начальное положение элемента внутри GSAP-анимации:

gsap.fromTo(el, { x: -40 }, { x: 0 })

Установка

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-core