API ВЕГА

Находит готовые блоки и компоненты в HyperFrames Registry, устанавливает их и помогает подключить к композиции. Навык нужен, чтобы сначала проверить каталог на нужный эффект или визуальный элемент, а не собирать его вручную.

Возможности

  • Ищет элементы по намерению через hyperframes catalog --query; запросы нужно формулировать на английском.
  • Устанавливает блоки и компоненты командой hyperframes add. Если имя не найдено, команда может установить все блоки с указанным тегом.
  • Объясняет, как подключать блоки через data-composition-src, а компоненты — вставкой HTML, CSS и JavaScript в композицию.
  • Показывает, где хранятся установленные файлы и как настроить пути в hyperframes.json.
  • Описывает создание нового блока или компонента и подготовку upstream PR.

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

  • В брифе или раскадровке назван эффект, переход или визуальный элемент: например, film grain, glitch, chart или окно терминала.
  • Нужно найти, установить или подключить элемент через hyperframes add либо hyperframes catalog.
  • Нужно настроить пути установки в hyperframes.json.
  • Нужен процесс создания нового элемента для отправки в upstream.

Примеры

Поиск по действию и установка подходящего блока:

npx hyperframes catalog --query "reveal a headline one line at a time"
npx hyperframes add caption-clip-wipe

Подключение блока в index.html:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Настройка путей в hyperframes.json:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

Установка

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