스킬 자체의 표현으로
라우팅을 우선하는 스킬로, 내레이션이 없는 짧은 디자인 중심 모션 그래픽 하나를 처리합니다 — 키네틱 타이포그래피, 통계 카운트업, 차트 히트, 로고 스팅, 로어 서드, 애니메이션 지도, 트윗 또는 웹페이지 등으로, 보통 10초 이하이며 최대 약 30초를 넘지 않고 MP4 또는 투명 오버레이로 렌더링됩니다.
이 스킬은 자산 우선(asset-first)이자 재사용 우선(reuse-first)입니다. 첫 번째 분기점은 해당 작품이 검색을 필요로 하는지 여부입니다. 폼 카테고리는 asset_needs가 비어 있는 사용자 제공 콘텐츠로 실행되고, 검색 기반 카테고리는 반환된 콘텐츠 유형에 따라 애니메이션을 적용하며, Builder는 직접 제작해야 하는 공백을 채우기 전에 카탈로그 블록을 조합합니다. 워크플로는 자율적으로 진행되며 최대 하나의 확인 질문만 허용되지만, 렌더링은 lint, check, 프루프 스냅샷 이후 사용자 승인이 필요합니다.
산출물
- envelope, 선택된 카테고리 또는 검색 의도, asset_needs, 그리고 block, layout, motion, positions를 담은 초안 후 최종본인 shot-plan.json.
- HF 계약을 준수하는 compositions/index.html로, window.__timelines에 일시 정지된 GSAP 타임라인, clip 클래스와 안정적인 id, 그리고 결정론적인 tl.seek(0)을 포함합니다.
- 프루프 시간을 검토하기 위한 snapshots/ 아래의 컨택트 또는 스냅샷 시트.
- renders/video.mp4, 또는 webm이나 mov 형식으로 렌더링할 경우 투명 오버레이.
작동 방식
- 01프로젝트 초기화
0단계는 PROJECT_DIR = videos/<project-name>/를 생성하고 빈 예제와 이 스킬로 hyperframes init을 실행하며, hyperframes.json이 이미 존재하면 완전히 건너뜁니다.
- 02검색 여부 계획 및 결정
첫 번째 분기점은 해당 작품이 검색을 필요로 하는지 여부입니다. 필요 없으면 asset_needs: []인 폼 카테고리이고, 필요하면 asset_needs[]에 검색 쿼리를 내보냅니다.
- 03필요할 때 자산 소싱
2단계는 media-use를 통해 자산을 고정된 프로젝트 로컬 경로와 원장(ledger)으로 해결하며, asset_needs가 비어 있으면 디자인 단계로 바로 건너뜁니다.
- 04가진 것을 중심으로 디자인
두 번째 Director 패스는 해결된 자산을 중심으로 카탈로그 블록과 hyperframes-animation 규칙 및 블루프린트를 선택한 후 shot plan을 최종화합니다.
- 05재사용 우선으로 구성
Builder는 npx hyperframes add로 카탈로그 블록을 추가하고 현장에서 커스터마이즈하며, 공백과 asset-fusion 어포던스만 직접 제작하여 compositions/index.html을 만들어 냅니다.
- 06프루프 스냅샷 촬영
오프닝 상태, 시그니처 무브, 최종 홀드를 보여주는 프루프 시간을 선택한 후 생성된 컨택트 또는 스냅샷 시트를 검토합니다.