플러그인 설치: 설정 또는 갱신 명령을 실행하기 전에 이 스킬이 HyperFrames 플러그인 내부에 있을 경우 플러그인 실행 규칙을 따르세요. 독립 설치의 경우 아래 업데이트 지침을 따릅니다.
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에 카운트되므로, 0이 아닌 dropped는 두 항목이 다른 세대임을 의미합니다. 오프라인 계층, 동의 게이트 및 오래된 인덱스를 새로 고치는 방법은 /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에는 name, type, title, description, tags, dimensions(블록만 해당), duration(블록만 해당), file list가 포함됩니다.
유형 및 태그별 필터링에 대한 자세한 내용은 discovery.md를 참조하세요.
새 블록 또는 컴포넌트 기여하기
새로운 레지스트리 항목(캡션 스타일, VFX 블록, 전환, 하단 1/3, 또는 재사용 가능한 컴포넌트)을 작성하고 업스트림 PR로 제공하려면 — 기존 항목을 설치하는 것이 아니라 — contributing.md의 전체 아이디어 → 스캐폴딩 → 빌드 → 검증 → 미리보기 → 제공 워크플로우를 따르세요. 시작 템플릿(캡션 / VFX / 컴포넌트 / registry-item.json)은 templates.md에 있습니다.