hyperframes-registry

Установка и подключение блоков и компонентов реестра в композиции HyperFrames. Используется при выполнении hyperframes add, установке блока или компонента, подключении установленного элемента в index.html или работе с hyperframes.json. Охватывает команду add, места установки, подключение подкомпозиций блоков, слияние фрагментов компонентов, обнаружение реестра и создание нового блока или компонента для передачи в основной репозиторий (идея → заготовка → проверка → PR).

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

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

HyperFrames registry

Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it.

Find and install

There is no hyperframes registry command; searching is catalog, installing is add.

npx hyperframes catalog --query "<what the beat should do, in English>" --json
npx hyperframes add <name> --json        # prints the written files and the mount snippet
  • Query in English even when the video is not: the catalog is indexed in English, and another script returns No searchable words in query, which is not a gap.
  • Search is local and sends nothing. The default words tier only finds items that reuse your words; --on-device ranks by meaning after a one-time ~33 MB download. Offer that download and let the person decide; never enable it silently. The --json envelope names the tier that answered.
  • Narrow with --type block|component and --tag <tag>. add <tag> installs every block with that tag; dependencies install first. add needs the network even for an item installed before; search works offline from the cached manifest.
  • Nothing fits: report it before you hand-build, on either tier. catalog --query prints the line pre-filled (report_gap in --json): npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>. Describe the effect, not an item name you imagined.

Tiers, dropped and unindexed, stale indexes, offline behaviour: references/search.md.

What's in it

Blocks: a scene with its own timelineExamples
Transitionsbeat-freeze-cut, chromatic-radial-split, cinematic-zoom
Overlays and lower thirdscamcorder-hud, editorial-flash-overlay, lt-clean-bar
Title cards and kinetic typecanopy-part-title, code-slice-hero
Social, chat and UI cardsai-chat-reveal, chatgpt-exchange
Code, charts, data and mapscode-diff, bar-chart-race, data-chart
3D, shader and backgroundsapp-showcase, aurora, blob
Components: a snippet merged into your sceneExamples
Motion primitives and text effectsagent-cursor, blur-in, bottom-up-letters
Caption stylescaption-clip-wipe, caption-editorial-emphasis
Camera movescamera-shake, camera-scan-gate
Product demo and UI propsbefore-after-wipe, browser-device-stage
Textures, particles and effectsascii-render-pass, grain-overlay

Wiring

  • Block: installs to compositions/<name>.html. Mount it with data-composition-src, data-composition-id matching the block's own id, data-start and the data-duration you need; the snippet add prints is the starting point. references/wiring-blocks.md.
  • Component: installs to compositions/components/<name>.html. Copy its markup, <style> and script into your scene, and follow its comment block if it hooks into your timeline. references/wiring-components.md.
  • Take the largest unit that fits, then edit it. Keep an installed item's ids prefixed as they are, so two items can't collide.
  • An item keeps its own variables; set them for one mount with data-variable-values on its host (add --vars '{"title":"…"}' writes that), and point its colour and font variables at your brand's.
  • Beat-synced blocks take hit times from npx hyperframes beats --json: the beat times minus the mount's data-start.
  • Install paths come from hyperframes.json (references/install-locations.md).

Contributing

Authoring a new block or component for an upstream PR: references/contributing.md, starter templates in references/templates.md, quality bar in references/component-quality-bar.md.

Больше skills от heygen-com

hyperframes-audio
heygen-com
Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.
hyperframes-cli
heygen-com
Цикл разработки HyperFrames
developmenttestingapi
hyperframes-animation
heygen-com
Все знания об анимации для HyperFrames — атомарные правила движения, многофазные сценарии сцен, переходы между сценами, более широкие техники моушн-дизайна И семь адаптеров времени выполнения (GSAP по умолчанию, а также Lottie, Three.js, Anime.js, CSS-ключевые кадры, Web Animations API, TypeGPU). Используйте для любой задачи по движению или анимации: выберите 2–4 правила и скомпонуйте, или загрузите сценарий, или найдите API конкретной среды выполнения (например, easing в GSAP / плеер Lottie / микшер Three.js). Родной для HyperFrames: единая приостановленная временная шкала, безопасная для поиска,...
creativedevelopmentdesign
hyperframes-core
heygen-com
Контракт композиции HTML HyperFrames. Используется для структуры композиции, атрибутов данных, клипов, треков, субкомпозиций, переменных, воспроизведения медиа, детерминированных правил рендеринга и валидации минимально рендерируемых проектов.
developmentmediacreative
hyperframes-media
heygen-com
Предварительная обработка ассетов для композиций HyperFrames — мульти-провайдерный TTS (HeyGen / ElevenLabs / Kokoro локально), мульти-провайдерный BGM (Google Lyria / локальный MusicGen), транскрипция Whisper, удаление фона и создание субтитров. Используется для npx hyperframes tts, bgm, transcribe, remove-background, выбора голоса/провайдера, подсказок музыкального настроения, субтитров / подписей / текстов песен / караоке / посимвольного стилизации.
mediaaudiovideo
general-video
heygen-com
Используется как запасной вариант для авторской компоновки видео в формате HTML с помощью HyperFrames, когда не подходит ни один специализированный рабочий процесс. Охватывает длинные или многосценные работы, брендовые/имиджевые ролики, монтажи, титры, анимированные постеры в длинном формате, статичные циклы и свободные композиции любой длины и формата. Не предназначен для маркетинговых промо продуктов (product-launch-video), захвата видео с веб-сайтов (website-to-video), тематических объяснялок (faceless-explainer), видео для GitHub PR (pr-to-video), субтитрования существующих материалов...
videocreativemedia
motion-graphics
heygen-com
Используйте, когда пользователю нужна короткая, дизайн-ориентированная моушн-графика, где движение является сообщением: кинетическая типографика, счётчик статистики или чисел, попадание в диаграмму/визуализацию данных, лого-стингер, бренд-лок-ап, нижняя треть, коллаут, социальный оверлей, анимированный заголовок/твит/новостной элемент, моушн-постер или быстрый захват страницы. Обычно длительностью до 10 секунд и до ~30 секунд, без повествовательной дуги, закадрового голоса или живого актёра. Может быть отрендерено в MP4 или прозрачный оверлей. Не подходит для более длинных, многосценных, нарративных или бренд-роликов...
creativevideodesign
hyperframes-read-first
heygen-com
Начните здесь для любого запроса на создание, генерацию, редактирование, анимацию или рендеринг видео, анимации, моушн-графики, объясняющего видео, титров, наложений, видео с субтитрами, рекламы продукта, видео для сайта, PR- или changelog-видео, дата-монтажа, моушн-постера или HTML-композиции HyperFrames. Используйте перед другими навыками работы с видео или анимацией, если пользователь хочет, чтобы HyperFrames создал или отрендерил готовое MP4/веб-видео, выбрал рабочий процесс или направил между product-launch-video, faceless-explainer, website-to-video,...
creativevideomedia