Motion HyperFrames: Bau-Modul
motion-director(워크플로, 스타일, 비평)와 HeyGen의 공식 HyperFrames Skill(기술)을 연결하는 브리지입니다.
모든 워크플로는 motion-director에서 비롯됩니다. HyperFrames 워크플로(/hyperframes, product-launch-video,
motion-graphics …)에는 자체 브리핑 루프가 있지만, Director 프로세스가 이를 대체합니다. 기술 규칙은 완전히 적용됩니다.
설정 (프로젝트별)
claude plugin marketplace add heygen-com/hyperframes # 공식 Skill (한 번만 실행)
claude plugin install hyperframes@hyperframes # 대안: 플러그인 없이 npx hyperframes skills update
cd projects/<name>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive # 버전 고정, 프로젝트 중간에 @latest 사용 금지
어떤 HyperFrames Skill을 언제 읽어야 하나
| 작업 | Skill |
|---|---|
컴포지션 계약: data-*, 클립, 트랙, 서브 컴포지션, 결정론 | hyperframes-core (첫 HTML 이전) |
모션, GSAP, 전환; Three.js (adapters/three.md); 모션 블러 | hyperframes-animation |
| 카메라, 줌, 펀치인, 매치/휩, 마스크, SVG 드로우 | hyperframes-keyframes |
| 명령어, 렌더 옵션, 문제 해결 | hyperframes-cli |
| 빌딩 블록 검색 | hyperframes-registry |
오디오는 HyperFrames에서 빌드하지 않습니다. 믹스는 motion-sound에서 제공되며 최종 단계에 추가됩니다.
자체 컴포넌트 우선
각 필름마다 고유한 디자인을 사용하고, 빌딩 블록을 직접 만드세요(hf/components/<name>.html).
카탈로그(npx hyperframes catalog --query "<Bewegung, 영문>")는 보고 배우는 자료입니다: 소스 코드를 읽고, 기술을 이해하고,
자체 디자인으로 변환하세요. 카탈로그의 모습을 1:1로 절대 복사하지 마세요. 그것은 정확히 모든 AI 비디오가 가진 모습입니다.
검사
npx hyperframes lint # 빠름, 주요 단계마다 실행
npx hyperframes check # 런타임, 레이아웃/오버플로, 대비(WCAG)
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false # 단일 프레임; --describe false 없이 실행 시 유료 이미지 모델 실행 요청
npx hyperframes render --quality draft --output ../renders/draft.mp4 # 애니메틱, 빠름
이후 motion-director/references/rules.md의 검사를 실행하세요.
렌더링 + 마스터링 (밴딩 방지)
일반 MP4 = 8비트: 그라디언트와 글로우에 계단 현상이 발생합니다. 따라서 무손실로 렌더링하고 10비트 + 미세 그레인으로 마스터링하세요:
npx hyperframes render --format mov --quality delivery --output ../renders/master.mov
bash scripts/master_10bit.sh ../renders/master.mov ../renders/film.mp4 0.35 ../renders/mix.wav
이 스크립트는 색상 행렬(BT.601 태그 없음 → BT.709)을 보정하고, 밝기에 미세한 10비트 그레인을 적용하며,
오디오를 추가하고 투명 이미지가 있을 경우 경고합니다. 참고: 10비트 H.264는 QuickTime에서 재생되지 않습니다
(VLC, mpv, ffplay, 브라우저에서는 가능). 배포 시에는 추가로 8비트 사본(-pix_fmt yuv420p -crf 18)을 만드세요.
메모리
3D, 유리 또는 큰 레이어가 있는 렌더는 많은 RAM이 필요합니다. 따라서: 한 번에 하나의 렌더만, 백그라운드에서 렌더 루프를 실행하지 말고, 먼저 단일 프레임을 렌더링하여 메모리를 관찰하세요. 레이어의 한 변이 4096px를 초과하지 않도록 하세요.
모션 블러
| 방법 | 사용 시기 | 제한 |
|---|---|---|
레지스트리 빌딩 블록 motion-blur (중간 프레임, 셔터 각도) | 빠른 단일 요소 | transform만 가능; 큰 컨테이너에서 비용이 많이 듦 |
| 엔진 모션 블러 | 전체 이미지 | Producer API를 통해서만 가능, 셰이더 전환과 함께 사용 불가 |
텍스트/페이지가 있는 읽는 구간에는 절대 사용하지 말고, 눈이 읽지 않아도 되는 곳에만 사용하세요.
함정 (측정 및 이슈 기준, 2026년 10월 기준)
- 배경을
<body>에 설정하지 말고 루트[data-composition-id]에 설정하세요: MOV에서는 투명, MP4에서는 검은색으로 나타납니다. z-index: -1은 렌더링되지 않습니다. 런타임 로드 전에 스크립트가 생성한 애니메이션은 한 프레임씩 어긋날 수 있습니다. Shadow Root/의사 요소의 CSS 애니메이션도 마찬가지입니다.- 느린 스크린샷 캡처로 자동 대체되는 경우: 렌더 요약을 읽으세요.
Math.random/Date.now는 린트에서 차단됩니다. 난수는 항상 시드(seed)를 사용하세요. 무한repeat는 금지됩니다.- 큰 CSS 블러는 성능을 크게 저하시킵니다. 애셋은 새로 빌드한 후 새 파일 이름으로 저장하세요(캐시는 경로 기준).