hyperframes-registry

작성자: heygen-com

레지스트리 블록과 컴포넌트를 HyperFrames 구성에 설치하고 연결합니다. hyperframes add 실행 시, 블록이나 컴포넌트 설치 시, 설치된 항목을 index.html에 연결할 때, 또는 hyperframes.json 작업 시 사용합니다. add 명령어, 설치 위치, 블록 하위 구성 연결, 컴포넌트 스니펫 병합, 레지스트리 검색, 그리고 업스트림에 기여할 새 블록이나 컴포넌트 작성(아이디어 → 스캐폴드 → 검증 → PR)을 다룹니다.

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

ZIP 다운로드 GitHub

76.4k

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 timeline	Examples
Transitions	`beat-freeze-cut`, `chromatic-radial-split`, `cinematic-zoom`
Overlays and lower thirds	`camcorder-hud`, `editorial-flash-overlay`, `lt-clean-bar`
Title cards and kinetic type	`canopy-part-title`, `code-slice-hero`
Social, chat and UI cards	`ai-chat-reveal`, `chatgpt-exchange`
Code, charts, data and maps	`code-diff`, `bar-chart-race`, `data-chart`
3D, shader and backgrounds	`app-showcase`, `aurora`, `blob`

Components: a snippet merged into your scene	Examples
Motion primitives and text effects	`agent-cursor`, `blur-in`, `bottom-up-letters`
Caption styles	`caption-clip-wipe`, `caption-editorial-emphasis`
Camera moves	`camera-shake`, `camera-scan-gate`
Product demo and UI props	`before-after-wipe`, `browser-device-stage`
Textures, particles and effects	`ascii-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.