HyperFrames 레지스트리

레지스트리는 hyperframes add <name>으로 설치 가능한 재사용 가능한 블록과 컴포넌트를 제공합니다.

블록 — 독립적인 서브 컴포지션(자체 크기, 지속 시간, 타임라인 포함). 호스트 컴포지션에 data-composition-src를 통해 포함됩니다.
컴포넌트 — 이펙트 스니펫(자체 크기 없음). 호스트 컴포지션의 HTML에 직접 붙여넣습니다.

빠른 참조

hyperframes add data-chart              # 블록 설치
hyperframes add grain-overlay           # 컴포넌트 설치
hyperframes add captions                # 'captions' 태그의 모든 블록 설치
hyperframes add shimmer-sweep --dir .   # 특정 프로젝트 대상 지정
hyperframes add data-chart --json       # 머신 리더블 출력
hyperframes add data-chart --no-clipboard  # 클립보드 생략 (CI/헤드리스)

설치 후 CLI는 작성된 파일과 호스트 컴포지션에 붙여넣을 스니펫을 출력합니다. 스니펫은 시작점이며, 블록을 연결할 때는 data-composition-id (블록의 내부 컴포지션 ID와 일치해야 함), data-start, data-track-index 속성을 추가해야 합니다.

위치 인수는 먼저 정확한 항목 이름으로 확인됩니다. 일치하는 항목이 없고 값이 태그이면 해당 태그의 모든 블록을 설치합니다. 레지스트리 종속성은 요청된 항목보다 먼저 설치됩니다. hyperframes add는 블록과 컴포넌트에만 작동하며, 예제는 hyperframes init <dir> --example <name>을 대신 사용하세요.

설치 위치

블록은 기본적으로 compositions/<name>.html에 설치됩니다. 컴포넌트는 기본적으로 compositions/components/<name>.html에 설치됩니다.

이 경로는 hyperframes.json에서 설정할 수 있습니다:

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

자세한 내용은 install-locations.md를 참조하세요.

블록 연결하기

블록은 독립적인 컴포지션입니다. 호스트 index.html에 data-composition-src를 통해 포함하세요:

<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>

주요 속성:

data-composition-src — 블록 HTML 파일 경로
data-composition-id — 블록의 내부 ID와 일치해야 함
data-start — 블록이 호스트 타임라인에 나타나는 시점 (초)
data-duration — 블록 재생 시간
data-width / data-height — 블록 캔버스 크기
data-track-index — 레이어 순서 (높을수록 앞쪽)

자세한 내용은 wiring-blocks.md를 참조하세요.

컴포넌트 연결하기

컴포넌트는 스니펫입니다. 컴포지션의 마크업에 HTML을, 스타일 블록에 CSS를, 스크립트에 JS(있는 경우)를 붙여넣으세요:

설치된 파일 읽기 (예: compositions/components/grain-overlay.html)
HTML 요소를 컴포지션의 <div data-composition-id="...">에 복사
<style> 블록을 컴포지션 스타일에 복사
<script> 내용을 컴포지션 스크립트(타임라인 코드 앞)에 복사
컴포넌트가 GSAP 타임라인 통합을 제공하는 경우(스니펫의 주석 블록 참조), 해당 호출을 타임라인에 추가

자세한 내용은 wiring-components.md를 참조하세요.

검색

CLI를 기본 검색 도구로 사용하세요. 브라우징보다 의도 기반 검색을 먼저 하세요: 레지스트리는 눈으로 훑기에는 너무 많은 항목을 보유하므로, 이름이나 태그로 나열하고 매칭하는 것은 느린 경로이며 작성자의 표현이 사용자와 다를 때 실패합니다.

# 전체 카탈로그를 비트가 해야 할 동작에 대해 순위화
npx hyperframes catalog --query "reveal a headline one line at a time"
npx hyperframes add caption-clip-wipe

검색은 로컬에서 수행되며 아무것도 전송하지 않습니다. 기본적으로 항목의 이름, 제목 및 설명과 공유되는 어휘로 순위를 매기므로 사용자의 단어를 재사용하는 항목만 찾습니다. --on-device는 일회성 모델 다운로드 후 의미로 순위를 매깁니다. --json을 사용하면 응답한 계층을 표시하므로 순위 지정이 발생했다고 가정하지 말고 확인하세요.

비디오 언어와 관계없이 항상 영어로 질의하세요. 카탈로그는 영어로 작성되어 있으며 두 계층 모두 영어로 인덱싱합니다(온디바이스 모델도 영어 전용). 다른 문자로 작성된 질의는 검색 가능한 용어를 생성하지 않으며 아무것도 반환하지 않습니다. 일본어나 중국어 프로젝트에서 브리핑, 자막, 내레이션이 모두 해당 언어이고 질의가 자연스럽게 따라올 때 자주 실수합니다. 동작을 영어로 설명한 다음 화면에 표시할 텍스트는 비디오에 필요한 언어로 작성하세요. 질의가 '검색 가능한 단어가 없음'을 반환하면 이 규칙 때문이며, 컴포넌트가 누락된 것이 아니므로 갭 리포트를 작성할 가치가 없습니다.

설치 가능성은 순위 지정 후에 적용됩니다(순위 지정 전이 아님): 벡터가 가져오지만 이 레지스트리가 제공할 수 없는 이름은 결과에서 제거되고 dropped에 집계됩니다. 따라서 dropped가 0이 아니면 두 항목이 다른 세대임을 의미합니다. 오프라인 계층, 동의 게이트, 오래된 인덱스 갱신 방법은 /hyperframes-cli를 참조하세요.

검색 대신 브라우징 또는 필터링:

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

일반 테이블 모드와 --json 모드는 일치하는 항목만 나열합니다. 선택한 이름은 hyperframes add <name>으로 설치하세요. --human-friendly는 대화형 선택기를 열고 선택한 항목을 즉시 설치합니다. CI 또는 에이전트 워크플로우에서는 --json 다음에 명시적인 add를 사용하는 것이 좋습니다.

카탈로그에 없는 항목 보고

검색 결과에 적합한 것이 없으면 직접 동작을 작성하기 전에 보고하세요:

npx hyperframes feedback --search-miss "<실행한 질의>" --wanted "<필요한 동작>" --tier on-device

catalog --query는 이 줄을 미리 채워서 출력하며, --json은 report_gap으로 전달하므로 아무것도 맞지 않는다고 판단한 시점에 이미 준비되어 있습니다.

어느 계층에서든 결과에 적합한 것이 없으면 보고하세요. 온디바이스 계층이 응답할 때까지 기다리지 마세요. 동의된 33MB 다운로드가 필요하므로 에이전트 실행은 명시적으로 동의하지 않는 한 words에 있으며, on-device로 조건을 걸면 거의 모든 보고가 무시됩니다. --tier 값이 함께 전달되므로 읽을 때 어휘 누락과 의미 누락을 구분할 수 있습니다. 상상한 항목 이름이 아니라 원했던 효과를 설명하세요. 반환되는 것은 구축할 가치가 있는 동작 목록이며, 존재하지 않는 항목을 보고하는 것은 아무것도 가르쳐주지 않습니다. 이것이 쿼리를 외부로 보내는 유일한 경로이며, 검색이 자체적으로 수행하는 것이 아니라 별도의 의도적인 명령인 이유입니다. 등급을 포함하지 않으며 등급 측정항목에 포함되지 않습니다.

이것이 카탈로그에 대한 전체 수요 신호입니다. 이를 건너뛰면 발생한 갭이 설치 횟수로 추측되며, 아무도 설치할 수 없는 동작은 볼 수 없습니다.

CLI가 설정된 레지스트리에 연결할 수 없으면 원시 매니페스트를 대체 수단으로 검사하세요:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

CLI가 연결할 수 없는 레지스트리는 검색을 위한 카탈로그를 비우지 않습니다: 이전에 가져온 매니페스트는 재검증이 실패할 때마다 24시간 갱신 창을 넘어 계속 제공되므로 catalog 및 catalog --query는 디스크의 마지막 복사본을 기준으로 계속 나열하고 순위를 매깁니다.

add는 어제 설치한 항목에도 여전히 네트워크가 필요합니다. 매니페스트만 캐시되며, 항목의 실제 파일은 매 설치 시 가져옵니다. 따라서 오프라인에서 검색하고 항목이 무엇인지 볼 수는 있지만 파일 가져오기에서 설치가 실패합니다. 사용자에게 오프라인 설치를 약속하지 마세요.

각 항목의 registry-item.json에는 이름, 유형, 제목, 설명, 태그, 크기(블록만), 지속 시간(블록만), 파일 목록이 포함됩니다.

유형 및 태그별 필터링에 대한 자세한 내용은 discovery.md를 참조하세요.

새 블록 또는 컴포넌트 기여하기

새로운 레지스트리 항목(자막 스타일, VFX 블록, 전환, 하단 써드, 재사용 가능한 컴포넌트)을 작성하고 업스트림 PR로 제출하려면(기존 항목을 설치하는 것이 아니라) contributing.md의 아이디어 → 스캐폴드 → 빌드 → 검증 → 미리보기 → 제공 전체 워크플로를 따르세요. 시작 템플릿(자막 / VFX / 컴포넌트 / registry-item.json)은 templates.md에 있습니다.

hyperframes-registry