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
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를 선호합니다.
CLI가 구성된 레지스트리에 연결할 수 없는 경우 대체 방법으로 원본 매니페스트를 확인하세요:
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
각 항목의 registry-item.json에는 이름, 유형, 제목, 설명, 태그, 크기(블록만 해당), 지속 시간(블록만 해당), 파일 목록이 포함되어 있습니다.
유형 및 태그별 필터링에 대한 자세한 내용은 discovery.md를 참조하세요.
새 블록 또는 컴포넌트 기여하기
새로운 레지스트리 항목(자막 스타일, VFX 블록, 전환, 하단 써드, 또는 재사용 가능한 컴포넌트)을 작성하고 업스트림 PR로 제공하려면(기존 항목을 설치하는 것이 아니라), contributing.md에서 제공하는 전체 워크플로우(아이디어 → 스캐폴드 → 빌드 → 검증 → 미리보기 → 전달)를 따르세요. 복사-붙여넣기용 시작 템플릿(자막 / VFX / 컴포넌트 / registry-item.json)은 templates.md에 있습니다.