HyperFrames — 여기서 시작하세요
이 스킬은 heygen-com/hyperframes에서 미러링된 HyperFrames HTML 기반 동영상 프레임워크의 로컬 라우터입니다.
미러링된 도메인 스킬은 이 폴더의 하위 디렉터리로 존재하며, 이름으로 요청 시 로드됩니다.
사용자 의도에 따라, 실행 전에 해당 하위 스킬의 SKILL.md를 읽으세요.
업스트림의 권위 있는 에이전트 가이드는 이 라우터와 함께 UPSTREAM-CLAUDE.md(전체 스킬 카탈로그, 설치, 유지 관리) 및
UPSTREAM-AGENTS.md(워크플로우 목록)로 미러링되어 있습니다 — 공식 업스트림 스킬 설명과
npx skills add / npx hyperframes 워크플로우에 대해 참조하세요.
HyperFrames는 HTML로 동영상을 렌더링합니다 — 컴포지션은 DOM이 data-* 속성으로 타이밍을 선언하는 HTML 파일이며,
애니메이션 런타임은 탐색 가능하고, 미디어 재생은 프레임워크가 소유합니다.
전체 작성 계약은 hyperframes-core/에 있습니다. 컴포지션 HTML을 작성하기 전에 먼저 읽으세요.
하위 스킬 색인
| 하위 스킬 | 디렉터리 | 사용 시기 |
|---|---|---|
| 컴포지션 계약 | hyperframes-core/ | HTML 컴포지션 작성/편집 — data-* 타이밍, 클립, 트랙, 하위 컴포지션, 변수. 컴포지션 HTML을 작성하기 전에 읽으세요. |
| CLI 개발 루프 | hyperframes-cli/ | npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, cloud/lambda 렌더링 실행, 또는 빌드/렌더 환경 문제 해결. |
| 애니메이션 | hyperframes-animation/ | 원자적 모션 규칙, 다중 페이즈 장면 청사진, 장면 전환, 모션 디자인 기술, 런타임 어댑터(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| 키프레임 | hyperframes-keyframes/ | 탐색 안전 2D/3D 키프레임, GSAP 타임라인, CSS 키프레임, Anime.js, WAAPI, FLIP, 패스, 마스크, SVG 모프/드로우, 텍스트, 3D 깊이, hyperframes keyframes 진단. |
| 크리에이티브 디렉션 | hyperframes-creative/ | 비애니메이션 크리에이티브 디렉션: frame.md/design.md, 팔레트, 타이포그래피, 나레이션, 비트 계획, 오디오 반응형. |
| 미디어 | media-use/ | BGM, SFX, 이미지, 아이콘, 브랜드 로고, 음성, 컬러 그레이드, LUT 해결/생성; TTS 음성 해설, 자막, 배경 제거, 캡션; 프로젝트 간 재사용. |
| 레지스트리 블록 | hyperframes-registry/ | 레지스트리 블록/컴포넌트 설치 및 연결 (hyperframes add). |
| Figma 가져오기 | figma/ | Figma 콘텐츠 가져오기 — 에셋, 토큰, 컴포넌트, 스토리보드 → 재구성된 모션. |
워크플로우(종단 간 결과물)
| 워크플로우 | 디렉터리 | 사용 시기 |
|---|---|---|
| 일반 동영상 | general-video/ | 모든 길이/형식의 맞춤 컴포지션 작성/편집을 위한 기본 워크플로우 — 길거나 여러 장면의 작품, 브랜드 및 시즐 릴. |
| 모션 그래픽 | motion-graphics/ | 모션 자체가 메시지인 짧고 디자인 중심의 모션 그래픽 — 운동 타이포그래피, 숫자 카운트업, 차트/데이터 시각화, 로고 스팅, 하단 1/3. |
| 슬라이드쇼 / 데크 | slideshow/ | 개별 슬라이드, 조각 공개, 분기, 핫스팟 탐색이 있는 프레젠테이션, 피치 데크 또는 대화형 데크. |
| 제품 런칭 | product-launch-video/ | 제품/마케팅 URL, 붙여넣은 스크립트 또는 브리프를 제품 런칭/프로모션 동영상으로 변환. |
| PR to 비디오 | pr-to-video/ | GitHub PR(URL, owner/repo#N 또는 "this PR")을 코드 변경 설명 동영상으로 변환. |
| 음악 to 비디오 | music-to-video/ | 음악 트랙을 비트 동기화 동영상으로 변환 — 가사 비디오, 슬라이드쇼 또는 운동 시각화. |
| 무성 설명 영상 | faceless-explainer/ | 임의의 텍스트(기사, 메모, 주제, 브리프)를 발명된 시각 자료가 포함된 무성 설명 영상으로 변환. |
| 내장 캡션 | embedded-captions/ | 말하는 사람 동영상에 디자인된 캡션 추가 — 열 흐름/내장 엔진 뒤의 시각적 아이덴티티. |
| 말하는 사람 재편집 | talking-head-recut/ | 기존 말하는 사람/인터뷰/팟캐스트 동영상을 시간 제한 그래픽 오버레이 카드(제목, 하단 1/3, 데이터 콜아웃, 인용문)와 함께 패키징. |
| Remotion 포팅 | remotion-to-hyperframes/ | 기존 Remotion(React) 컴포지션을 HyperFrames HTML로 포팅. Remotion 소스를 포팅/변환/마이그레이션하라는 명시적 요청이 있을 때만 사용. |
라우팅 규칙
- “동영상/애니메이션/모션 그래픽 만들어줘” 요청이 오면 위 두 번째 테이블에서 워크플로우를 선택하세요. 맞는 것이 없으면
general-video로 폴백합니다. - 선택한 워크플로우는 실행 중에 도메인 스킬(첫 번째 테이블)을 불러옵니다 — 절대 스스로 종단 간 작업을 소유하지 않습니다.
- 작성 계약 우선: 컴포지션 HTML을 작성하기 전에
hyperframes-core/를 읽으세요. - 프로젝트 지침에서 로컬 래퍼를 지정하지 않는 한 모든 작업은
npx hyperframes를 통해 실행됩니다 — 로컬 래퍼를 정확히 따르세요. Node.js >= 22 및 FFmpeg가 필요합니다.
동기화
이 스킬은 업스트림에서 미러링됩니다. 업데이트를 확인하거나 가져오려면:
bash hyperframes/scripts/sync-hyperframes.sh --check # dry-run
bash hyperframes/scripts/sync-hyperframes.sh # 백업과 동기화
업스트림 소스, 마지막 동기화 커밋 및 동기화 전략은 SYNC.md를 참조하세요.