Communitygithub.com

heygen-com/hyperframes

음악 트랙(오디오 파일, 오디오를 추출할 비디오, 또는 분위기 브리프에서 생성된 트랙)을 비트에 동기화된 비디오(자막 비디오, 슬라이드쇼, 또는 키네틱 프로모션)로 변환합니다. 음악이 모든 템포를 결정하며, 사용자가 제공한 이미지/비디오는 동일한 비트 그리드에 맞춰져 편집되며, 완전한 비디오는 에셋이 전혀 없어도 만들어집니다. 내레이션이 포함된 콘텐츠는 입력과 일치하는 워크플로우(hyperframes 참조)를 사용합니다. 불명확한 경우 → /hyperframes.

hyperframes란 무엇인가요?

이 스킬은 HyperFrames 플랫폼 내에서 음악 트랙을 비트에 동기화된 비디오로 변환하는 완전한 워크플로우를 제공합니다. 사용자는 오디오 파일, 비디오에서 추출한 오디오, 또는 분위기 기반 프롬프트에서 생성된 음악을 입력할 수 있으며, AI는 음악의 비트, 에너지 레벨, 음절 및 주요 순간을 분석하여 비디오의 프레임 구조를 자동으로 생성합니다. 음악 분석은 단일 도구(`analyze-beatgrid.py`)에 의존하여 일관성을 보장하며, 각 프레임은 독립적인 구성 파일로 생성되어 병렬 처리 및 모듈식 편집이 가능합니다. 이 스킬은 사용자 개입이 필요한 주요 체크포인트(계획 승인 및 렌더링 승인)를 포함한 7단계 워크플로우를 통해 실행됩니다. 에셋이 전혀 없어도 타이포그래피와 템플릿만으로 완전한 비디오를 만들 수 있으며, 사용자가 이미지나 비디오를 제공하면 동일한 비트 그리드에 자동으로 맞춰집니다. Claude Code, Cursor, Codex와 같은 AI 에이전트 환경에서 사용되며, 명확한 게이트와 검증 단계를 통해 안정적인 출력을 보장합니다. 이 스킬은 또한 음악이 진정한 리듬이 없는 경우(예: 잔잔한 음악)에는 비트 그리드 대신 음악적 구절에 따라 편집하는 지능적인 판단을 수행합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/music-to-video

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

플러그인 설치: 설정 또는 최신화 명령 전에, 이 스킬이 HyperFrames 플러그인 내부에 있을 때는 플러그인 설치 규칙을 따르세요. 독립 실행형 설치는 아래 업데이트 지침을 따릅니다.

첫째, 이 스킬을 최신 상태로 유지하세요 — 실행 전에 사용자에게 확인: npx hyperframes skills update music-to-video. 모든 것이 최신 상태이면 빠르게 종료됩니다. 그렇지 않으면 이 스킬과 그것이 의존하는 핵심 도메인 스킬을 사용하기 전에 새로 고칩니다.

music-to-video — 음악 기반, 비트 동기화 단일 비디오 워크플로우

이 스킬을 사용하여 음악 트랙을 비트 동기화된 HyperFrames 비디오로 변환하세요. 한 번 트랙을 분석하고, 프레임을 배치하며, 프레임별 계획을 채우고, 각 프레임을 구성 파일로 빌드합니다. 입력은 음악 트랙과 선택적 사용자 이미지 또는 비디오입니다 — 내레이션이나 웹사이트 캡처는 없습니다. 타이포그래피와 템플릿이 기본입니다 (완전한 비디오는 에셋이 전혀 필요하지 않음); 사용자가 제공한 모든 미디어는 동일한 비트 그리드에 맞춰 편집됩니다.

당신은 오케스트레이터입니다. videos/<project>/에서 작업하세요. 단계를 순서대로 실행하고 각 게이트를 통과한 후 다음 단계로 넘어가세요. 두 단계는 사용자가 필요합니다: 3단계 (계획 승인) 및 6단계 (렌더링 승인) — 이 두 단계는 ../hyperframes/references/brief-contract.md (0단계 전에 읽으세요)에 정의된 체크포인트 게이트입니다: 자율 모드에서는 요약을 공지로 게시하고 기다리지 않고 진행하세요. 4단계를 제외한 모든 단계를 직접 수행하세요. 여기서는 프레임당 하나의 하위 에이전트를 할당합니다. 디자인 및 모션 규칙은 이 파일에 두지 마세요 — references/와 frame-worker 하위 에이전트에 있습니다.

SKILL_DIR = 이 스킬 디렉토리. PROJECT_DIR = videos/<project-name>/.

워크플로우: 0단계 설정 → hyperframes.json + assets/bgm.mp3; 1단계 분석 → audiomap.json; 2단계 스켈레톤 → STORYBOARD.md (프레임, 그룹 TBD); 3단계 계획 → 완전한 STORYBOARD.md + frame.md; 4단계 빌드 → compositions/frames/NN-*.html; 5단계 조립 → index.html; 6단계 렌더링 → renders/video.mp4.

모든 것을 결정짓는 두 가지 아이디어

  • 하나의 분석기, 그리고 당신은 그것을 신뢰합니다. analyze-beatgrid.py는 유일한 비트 분석기입니다 — 다른 도구나 귀로 비트를 다시 측정하지 마세요. 그 에너지/밀도/롤/발음/침묵은 항상 신뢰할 수 있습니다. bpm과 beats_sec은 음악이 진정한 리듬을 가질 때만 신뢰할 수 있습니다; 잔잔한 음악에서는 그리드가 추적기가 강제한 메트로놈이므로 대신 구절과 에너지에 맞춰 진행하고 절대 하드 컷을 사용하지 마세요. 어떤 경우인지 결정하는 것은 각 프레임의 pacing입니다 (2단계).
  • 하나의 프레임 = 하나의 파일; 그룹은 내부에 있습니다. 2단계는 트랙을 프레임으로 자르고, 각 프레임은 하나의 프레임 워커에 의해 compositions/frames/NN-<frame_id>.html이라는 하나의 구성 파일이 됩니다. 프레임은 그룹 (각각 템플릿 또는 모션 프리미티브 조합)으로 세분화될 수 있습니다. 추가 밀도는 그룹 _내부_에 들어가므로 프레임 수는 비트가 아닌 개별 처리 방식을 추적합니다 — 빠른 트랙이 하위 에이전트 수를 폭발시키지 않습니다.

0단계: 설정, BGM 및 입력

목표: 음악 소스를 설정하고, HyperFrames 프로젝트를 생성하며, 사용자가 제공한 미디어를 기록합니다.

브리프는 의도 레이어에서 시작합니다. 열기 규칙, 순서대로: (1) BRIEF.md가 존재함 → 읽고 답변하는 것은 묻지 않음 — 그 flow/storyboard가 모드를 결정함 (브리프 계약 § 1). (2) BRIEF.md가 없지만 프로젝트가 존재함 → 디스크에 있는 것에서 재개; 다시 질문하지 않음. (3) 여기로 직접 도착한 새로운 생성 요청 → /hyperframes를 읽고 의도 레이어를 실행함 (references/intent-interview.md): 이 경로의 필수 요소를 확인함 (음악 소스, 대상 → 측면 — ../hyperframes/references/routes/music-to-video.md) 그리고 무엇이 연기되는지 알림 — 브랜드와 장르는 설계상 3단계에서 선택됨. 초기화 직후 BRIEF.md를 작성함 (절대 그 전에 — init은 비어 있지 않은 디렉토리를 거부함) 그리고 선호도 기반 답변을 기록함 (brief-format.md). 편집 요청은 이 모든 것을 건너뜀.

음악은 중심축입니다 — 다른 모든 것보다 먼저 하나의 트랙을 설정하세요. 이 스킬은 빠르고 고에너지 BGM에 최적화되어 있습니다: 강한 비트 그리드가 컷을 주도합니다 (잔잔한 트랙도 작동하지만, 비트보다는 구절에 맞춰 진행). 사용자가 오디오를 제공한 경우 — 음악 파일 또는 오디오를 추출할 비디오 — 그것을 사용하세요. 그렇지 않으면 요청에서 분위기를 선택하고 /media-use (references/bgm.md)를 통해 트랙을 생성하세요. 첫 번째 인증된 공급자 작업 전에 npx hyperframes auth status를 실행하고 그 출력을 그대로 전달하세요. 로그아웃된 경우, 한 가지 분기를 적용하세요:

  • 협업: 로그인하거나 로컬 공급자와 오프라인으로 계속하기 위한 명시적 선택을 기다림.
  • 자율: 상태를 알리고 사용 가능한 로컬 공급자를 통해 계속 진행.

오프라인 공급자가 필요한 음악 기능을 충족할 수 없는 경우, 장애물을 표면화하세요. 저장소별 .env에 키를 절대 쓰지 마세요. 인증 소유권 및 오프라인 대체는 /media-use references/setup-providers.md § 공급자에 있습니다. 결과 트랙은 assets/bgm.mp3에 저장됩니다. 제공된 이미지나 비디오를 준비하여 프레임이 비트 그리드에서 사용할 수 있게 하세요; 그렇지 않으면 타이포그래피가 비디오를 구성합니다.

자막 비디오: 보컬에 동기화된 가사의 경우, /media-use를 통해 트랙을 전사하여 단어/라인 타이밍을 얻거나, 사용자에게 가사 텍스트를 요청하고 비트 그리드에 라인을 배치하세요.

hyperframes.json이 누락된 경우에만 초기화하세요. 브리프에서 <project>를 케밥 케이스로 지정하세요 (예: midnight-drive-loop) — 절대 타임스탬프를 사용하지 마세요. init은 설치된 스킬을 GitHub의 최신 버전과 비교하고 오래된 것이 있으면 전역 세트를 업데이트합니다.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=music-to-video
mkdir -p "$PROJECT_DIR/assets" "$PROJECT_DIR/renders"
cp "<user-music>" "$PROJECT_DIR/assets/bgm.mp3"   # 필요한 경우 먼저 비디오에서 추출
# 사용자가 이미지/비디오를 제공한 경우에만:
node <SKILL_DIR>/scripts/stage-assets.mjs --from <dir> --hyperframes "$PROJECT_DIR" --into public

브랜드(글꼴 + 팔레트)는 여기가 아닌 3단계에서 선택됩니다. 장르나 트랙 유형을 미리 선택하지 마세요 — 에셋은 선택적 재료일 뿐이며, 장르는 프레임별 선택에서 나타납니다.

게이트: hyperframes.json + assets/bgm.mp3이 존재함; 측면 / 길이 / fps 및 (있는 경우) 에셋 인벤토리가 기록됨.


1단계: 음악 분석

목표: 전체 비디오가 구축되는 하나의 표준 타이밍 분석을 생성합니다.

analyze-beatgrid.py는 유일한 비트 분석기입니다 — 다른 도구나 귀로 비트를 다시 측정하지 마세요. 트랙을 한 번 읽고 audiomap.json을 작성합니다: 에너지 단계(레벨/밀도/느낌), 발음 + onset_rate, 롤, 침묵, hard_stops, key_moments, 구절, 템포/그리드 및 audio.duration_sec. 결정론적입니다 — 동일한 파일은 항상 동일한 맵을 제공합니다. 대부분의 필드는 모든 음악에서 신뢰할 수 있습니다; bpm과 beats_sec은 음악이 진정한 리듬을 가질 때만 신뢰할 수 있으며, 이를 판단하는 것은 2단계에서 내리는 결정입니다.

전제 조건: librosa, numpy 및 soundfile을 사용할 수 있는 Python 3. 가져오기에 실패하면 분석기를 실행하기 전에 활성 Python 환경에 설치하세요:

python3 -m pip install librosa numpy soundfile
python3 <SKILL_DIR>/scripts/analyze-beatgrid.py "$PROJECT_DIR/assets/bgm.mp3" \
  -o "$PROJECT_DIR/audiomap.json" --print

게이트: audiomap.json이 존재함; audio.duration_sec이 알려짐.


2단계: 프레임 스켈레톤 (구조만)

목표: 음악을 읽고 프레임을 배치합니다 — STORYBOARD.md의 스켈레톤.

references/frame-skeleton.md를 읽으세요. audiomap.json을 자신이 STORYBOARD.md의 스켈레톤으로 변환하세요 — 중간 JSON은 없습니다. 트랙을 진정한 음악적 변화(hard_stops, SURGE / DROP key_moments, 롤의 가장자리, 발음이 없는 구간, 큰 에너지 점프)에서 프레임으로 자르고, 모든 경계를 오디오맵 앵커에 맞춥니다. 각 프레임에 대해 span_sec, pacing (1단계의 신뢰 호출에 대한 판결 — 그리드가 실제일 때 beat_cut, 잔잔한 음악에 강제된 메트로놈일 때 phrase_flow), mood 및 한 줄 feel (3단계가 템플릿과 일치시키는 일반 음악 상황)을 설정합니다. 여기서는 분류하고 배치하기만 하세요: 각 프레임의 ### Groups는 TBD (3단계)로 남겨두고 프론트매터 style은 비워 둡니다 — 템플릿, 복사, 색상 또는 글꼴이 없습니다. 약 1~6개의 프레임을 예상하세요.

게이트: 프레임이 트랙을 타일링함 (첫 번째는 0에서, 마지막은 duration_s에서); 각각 span_sec + pacing + mood + feel을 가짐; 모든 ### Groups는 TBD임; 어디에도 콘텐츠가 없음.


3단계: 계획 채우기 (사용자 게이트)

목표: 스켈레톤을 승인된 완전한 STORYBOARD.md로 변환합니다.

references/planning.md, storyboard-format.md, template-catalog.md, motion-primitive-catalog.md 및 montage.md (사용자가 에셋을 제공한 경우에만)를 읽으세요. 동일한 파일을 제자리에서 편집하며 두 가지 작업을 수행하세요:

  1. 브랜드를 선택하세요. ../hyperframes-creative/frame-presets/에서 ../hyperframes-creative/references/design-spec.md의 표를 사용하여 하나의 프리셋을 선택하세요 (트랙의 분위기와 일치; 글꼴과 색상만 중요함 — 템플릿이 구성을 소유함). 수정하지 않고 frame.md에 복사하고 프론트매터 style을 채우세요 (글꼴 + ≤4–6개 견본 팔레트).
  2. 모든 프레임을 채우세요. 그룹을 결정하고 각각에 처리를 제공하세요: 카탈로그의 일치하는 템플릿 (바인딩된 매개변수 및 실제 오디오맵 앵커 포함), 프리미티브 카탈로그의 자유 구성, 또는 pacing을 따르는 에셋 처리. 명명된 룩을 자유 구성하기 전에 라이브 카탈로그를 검색하세요: 사용자가 요청한 모든 룩, 효과, 처리 또는 전환에 대해 — "CRT 스캔라인", "글리치", "필름 그레인", "샤이머 스위프" — npx hyperframes catalog --query "<the look, in plain English>" --json을 실행하고 상위 결과를 읽으세요. template-catalog.md 및 motion-primitive-catalog.md는 이 스킬의 로컬 자료만 나열합니다; 검색은 전체 호스팅 레지스트리(~400 블록 및 구성 요소)를 순위 매기며 아무것도 설치할 필요가 없습니다 — 프로젝트, 사전 add, 계정이 없습니다. 검색 결과 맞는 것이 없을 때만 룩을 자유 구성하세요. 복사를 작성하세요. 당신은 WHAT (템플릿/프리미티브 + 콘텐츠 + 앵커)을 소유합니다; 프레임 워커는 HOW를 소유합니다 — 스토리보드에 밀리초 트윈을 절대 작성하지 마세요.
node <SKILL_DIR>/scripts/validate-plan.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
  --audiomap "$PROJECT_DIR/audiomap.json" --templates <SKILL_DIR>/references/templates

모든 ✗ (하드 에러: 지속 시간 불일치, 프레임이 트랙을 타일링하지 않음, 누락된 src)를 수정하세요; 경고는 최선의 노력입니다. 그런 다음 채팅에서 프레임별 요약을 제안으로 제시하고 (../hyperframes/references/review-loop.md § 1) 사용자의 답변에 따라 승인할 때까지 반복하세요; storyboard: yes의 경우, 사용자가 열 수 있도록 storyboard.html (../hyperframes-creative/references/storyboard-recipe.md § 3)로도 작성하세요. 자율 모드에서는 이것이 체크포인트 게이트입니다: 요약을 공지로 게시하고 진행하세요 (validate-plan.mjs 패스는 품질 게이트이며 여전히 차단합니다).

게이트: frame.md는 있는 그대로의 프리셋 복사본임; validate-plan.mjs가 0으로 종료됨; 사용자가 계획을 승인함 (자율: 요약이 공지로 게시됨).


4단계: 계획에서 프레임 빌드

목표: 각 프레임을 독립적인 구성 파일로 빌드합니다.

compositions/frames/를 생성하세요. sub-agents/frame-worker.md 및 ../hyperframes/references/subagent-dispatch.md를 읽으세요. 가능하면 병렬로 (그렇지 않으면 웨이브로) 프레임당 하나의 프레임 워커를 할당하세요. 각 워커는 정확히 하나의 프레임과 이 컨텍스트를 받습니다:

PROJECT_DIR: <abs path>
frame_id: <NN-frame_id>              # = 프레임 파일 이름, 예: 02-f2; 구성 ID
Your block: `## Frame N — <frame_id>` 블록 in PROJECT_DIR/STORYBOARD.md
audiomap: PROJECT_DIR/audiomap.json
frame.md: PROJECT_DIR/frame.md
Materials: 각 그룹에 대해, <SKILL_DIR>/references/templates/<id>/index.html (템플릿) 및
           <SKILL_DIR>/references/motion-primitives/<id>/ (자유); 준비된 assets/ (에셋 그룹)
Contracts: ../hyperframes-core/references/sub-compositions.md + determinism-rules.md
Canvas: <w>×<h>   Pacing: <beat_cut|phrase_flow>
Write to: PROJECT_DIR/compositions/frames/<frame_id>.html

워커는 인용된 자료를 포크하고, 모든 앵커를 프레임 로컬 초(local_t = track_t − span_sec[0])로 변환하며, 0ms 컷으로 그룹을 게이트하고, 하나의 seek-safe 프레임 파일을 작성합니다. 워커는 절대 hyperframes CLI를 실행하지 않습니다 — 해당 명령은 아직 존재하지 않는 조립된 프로젝트에서 작동하므로 잘못된 파일에 대해 보고합니다. 워커는 계약에 따라 작성하고 중지합니다; 조립 후 검증합니다 (6단계). 각 워커가 반환되면 파일이 디스크에 있는지 확인할 수 있습니다.

게이트: 모든 프레임이 compositions/frames/NN-*.html을 디스크에 가지고 있음.


5단계: 조립

목표: 빌드된 프레임 + BGM을 재생 가능한 index.html로 연결합니다.

assemble-index.mjs는 결정론적입니다 — 하위 에이전트 없음, 판단 없음. 각 프레임 파일을 누적 data-start에 참조하고, assets/bgm.mp3를 트랙 11에 마운트하며, 프레임 간 하드 컷을 수행합니다 (프레임이 트랙을 간격 없이 타일링하므로 전환 인젝터가 없습니다).

node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
  --hyperframes "$PROJECT_DIR" --audiomap "$PROJECT_DIR/audiomap.json"

보고된 ✗를 수정하세요 — 누락되거나 빈 프레임 파일은 해당 워커가 부분 파일을 썼음을 의미합니다. 다시 할당하고 (4단계) 다시 조립하세요.

게이트: index.html이 존재함; 총 지속 시간 == audiomap.audio.duration_sec.


6단계: 검증 및 렌더링

목표: 조립된 비디오를 검증하고, 사용자 승인을 받고, 최종 MP4를 렌더링합니다.

조립된 프로젝트에서 CLI를 실행하세요 — 이것이 올바른 단위입니다 (프레임별 워커는 실행할 수 없었습니다). check는 구조적 린트와 헤드리스 브라우저 런타임, 레이아웃을 실행합니다.

[truncated for translation]

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

관련 스킬