HyperFrames 마스터 (Logan 기본값)
레포: https://github.com/heygen-com/hyperframes
문서 인덱스: https://hyperframes.heygen.com/llms.txt
CLI 문서: npx hyperframes docs <주제>
사용자가 비디오 / 모션 / 자막 / 운동학적 제품 스토리를 원할 경우, 명시적으로 다른 스택을 지칭하지 않는 한 HyperFrames를 기본값으로 처리하세요.
항상 여기서 시작
- 작성을 시작하기 전에 관련 HyperFrames 스킬을 호출합니다.
- 라우터 스킬:
hyperframes- 기능 맵 + 사용할 워크플로우. - 일반 웹 지식만으로 data-* 의미론을 발명하지 마세요.
워크플로우 라우팅
| 의도 | 워크플로우 스킬 |
|---|---|
| 제품 URL / SaaS 프로모 | product-launch-video |
| URL에서 일반 사이트 둘러보기 | website-to-video |
| 텍스트 주제, 사이트 없음 | faceless-explainer |
| 토킹헤드 자막 | embedded-captions |
| 토킹헤드 그래픽 오버레이 | talking-head-recut |
| GitHub PR 설명자 | pr-to-video |
| 짧은 모션 그래픽 | motion-graphics |
| 음악 기반 | music-to-video |
| 데크 / 슬라이드 | slideshow |
| 사용자 지정 / 대체 | general-video |
| Remotion → HyperFrames | remotion-to-hyperframes |
도메인 스킬: hyperframes-core, hyperframes-animation, hyperframes-keyframes,
hyperframes-creative, hyperframes-cli, hyperframes-media, media-use,
hyperframes-registry, figma, gsap.
명령어
npm run dev # 프리뷰 서버 - 장기 실행, 백그라운드 전용
npm run check # 린트 + 런타임 + 레이아웃 + 모션 + 대비
npm run render # MP4
npm run publish # 공유 링크
npx hyperframes lint --verbose
npx hyperframes docs <주제>
npx hyperframes skills update # 스킬이 없거나 오래된 경우 새로고침
주요 구성 규칙
- 타임드 엘리먼트:
data-start,data-duration,data-track-index - 타임드 엘리먼트는 반드시
class="clip"이어야 함 - GSAP 타임라인은 일시 중지 + 등록:
window.__timelines = window.__timelines || {}; window.__timelines["composition-id"] = gsap.timeline({ paused: true }); - 비디오: 필요한 경우
muted비디오 + 별도의<audio> - 하위 컴포지션:
data-composition-src="compositions/file.html" - 결정론적만 허용 - render 경로에서
Date.now(),Math.random(), 네트워크 사용 금지
편집 후
완료를 선언하기 전에 항상 npm run check를 실행하세요. 오류를 수정하고 경고를 검토합니다.
스택 페어링 (Yuval / YUV.AI 기본값)
- 모션 비디오에는 HyperFrames + GSAP 선호
- 제품 UI일 때 React/Next - 여전히 결과물이 비디오일 때는 HyperFrames 워크플로우를 통해 모션 내보내기
- 사용자가 달리 요청하지 않는 한 임시 ffmpeg 슬라이드쇼보다 html-to-canvas / HyperFrames 렌더 파이프라인 선호