HyperFrames — 여기서 시작하세요
HyperFrames는 HTML로 비디오를 렌더링합니다. 컴포지션은 DOM이 data-* 속성으로 타이밍을 선언하고, 애니메이션 런타임을 탐색할 수 있으며, 미디어 재생을 프레임워크가 소유하는 HTML 파일입니다. 전체 제작 계약은 /hyperframes-core에 있습니다. 컴포지션 HTML을 작성하기 전에 먼저 읽어보세요.
아래: 기능 맵(요청 시 로드되는 도메인 스킬)과 의도 라우터("비디오를 만들어 줘" 요청에 대한 워크플로우 선택).
기능 맵 — 도메인 스킬
요청 시 로드하는 원자적 기능입니다. 전체 비디오 워크플로우가 아닙니다. "비디오를 만들어 줘"의 경우 아래 의도 라우터를 사용하세요.
| 원하는 작업 | 스킬 |
|---|---|
HTML 컴포지션 제작/편집 — data-* 계약, 클립, 트랙, 하위 컴포지션, 변수 | /hyperframes-core |
| 애니메이션 — 원자 모션, 장면 청사진, 전환, 런타임 어댑터 (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
크리에이티브 방향 — frame.md / design.md, 팔레트, 타이포그래피, 내레이션, 비트 계획, 오디오 반응 | /hyperframes-creative |
| 미디어 — TTS 음성 해설, 배경 음악, 전사, 배경 제거, 캡션 | /hyperframes-media |
미디어 해결 — HeyGen 카탈로그에서 BGM, SFX, 이미지, 아이콘을 찾고 고정하여 매니페스트 추적과 함께 .media/에 저장 | /media-use |
| CLI 개발 루프 — 초기화, 린트, 검증, 검사, 미리보기, 렌더링, 게시, 진단 | /hyperframes-cli |
레지스트리 블록 / 컴포넌트 설치 (hyperframes add) | /hyperframes-registry |
의도 라우팅 — 워크플로우 선택
이 섹션은 최상위 워크플로우만 알고 있습니다. 내부 참조나 위의 도메인 스킬은 로드하지 않습니다.
라우팅 전 — 입력 확인, 사양 확인 불필요
라우팅은 비디오가 무엇에 관한 것인지, 즉 입력과 주제를 알아야 합니다. 지정되지 않은 경우(URL, 제품, 주제 또는 에셋 없이 "우리 것에 대한 비디오를 만들어 줘"), 워크플로우에 진입하기 전에 물어보세요. 워크플로우에 진입하는 것이 라우팅 결정입니다. 최대 두 가지 질문:
- 입력 — 제품 (URL / 브리프), 일반 웹사이트, GitHub PR, 설명할 주제, 또는 기존 토킹 헤드 비디오?
사양 기본값 — 말하지 말고 상태 표시 (경로를 변경하지 않음): 종횡비 16:9 (명명된 세로 대상 — TikTok / Reels / Shorts의 경우에만 9:16 사용); 내레이션 / 캡션 언어 = 사용자 언어. 선택된 워크플로우는 첫 번째 단계에서 자체 세부 사항을 다시 확인합니다.
워크플로우 치트 시트
| 워크플로우 | 사용 시기 |
|---|---|
/product-launch-video | 제품 마케팅 / 출시 / 프로모션 — URL, 브리프 또는 스크립트에서 (사이트 이름만 지정된 경우에도) |
/website-to-video | 일반 웹사이트를 비디오로 변환 — 사이트 투어, 포트폴리오 / 랜딩 페이지 쇼케이스, 사이트 비주얼의 소셜 클립 |
/faceless-explainer | 텍스트에서 주제 / 개념 설명 — 제품 없음, URL 없음; 모든 비주얼은 LLM이 생성 |
/pr-to-video | GitHub PR / 코드 변경 → 체인지로그 / 기능 공개 / 수정 / 리팩터 설명 |
/embedded-captions | 기존 토킹 헤드 비디오에 캡션 / 자막 추가 (푸티지 변경 없음) |
/talking-head-recut | 기존 토킹 헤드 비디오를 디자인된 그래픽 오버레이로 패키징 — 하단 서드, 데이터 콜아웃, 운동 타이틀, 풀 인용문 |
/motion-graphics | 짧고, 내레이션이 없는, 디자인 중심의 모션 그래픽 — 운동 타이포그래피, 통계 / 차트 히트, 로고 스팅, 하단 서드 오버레이 |
/music-to-video | 음악 트랙 → 비트 동기화된 비디오 — 리릭 비디오, 슬라이드쇼 또는 운동 프로모; 음악이 페이싱을 주도 (비트 그리드에 맞춰 선택적 사용자 이미지 / 비디오 컷) |
/slideshow | 프레젠테이션 / 피치 덱 / 인터랙티브 덱 — 개별 슬라이드, 조각, 분기, 핫스팟; 출력은 탐색 가능한 덱, 렌더링된 비디오가 아님 |
/general-video | 기타 모든 것 — 더 길거나 다중 장면 작품, 정적 루프 / 포스터, 사용자 정의 컴포지션 |
/remotion-to-hyperframes | 기존 Remotion (React) 컴포지션을 HyperFrames로 포팅 (마이그레이션, 생성 아님) |
혼동 가능한 경우 명확화:
- 모션 우선 및 내레이션 없음 (약 10초 미만, 모션 자체가 메시지) →
/motion-graphics, 입력에 관계 없음. - URL 또는 스크립트 — 특정 제품 마케팅 (사이트 이름만 지정해도) →
/product-launch-video; 일반 비제품 사이트 →/website-to-video; GitHub PR 링크 →/pr-to-video; 제품 / 사이트 없이 개념 설명 →/faceless-explainer. 제품-대-주제 또는 출시-대-일반-사이트가 명확하지 않은 경우 → 하나의 질문. - 기존 푸티지 — 일반 구어 자막 →
/embedded-captions; 디자인된 오버레이 카드 →/talking-head-recut. 둘 다 푸티지 자체를 편집하지 않음 (재타이밍 / 재색상 / 재구성 / 재정렬 / 오디오는 NLE 편집 — 범위 외). - 음악 트랙이 입력 (오디오 파일 또는 오디오를 추출할 비디오)이고 내레이션이 없음 →
/music-to-video— 음악의 비트/에너지가 페이싱을 주도합니다. (내레이션이 있는 작품은 위의 입력 일치 워크플로우에 유지됩니다./motion-graphics는 음악 중심이 아닌 짧고 내레이션이 없는 모션용입니다.) - 프레젠테이션 / 피치 덱 / 인터랙티브 덱 (개별 슬라이드, 탐색, 발표자 모드) →
/slideshow— 출력은 탐색 가능한 덱, 렌더링된 비디오가 아님. 명시적인 "슬라이드쇼" 요청은 직접 진행합니다. 인접 트리거 ("덱 / 슬라이드 / 프레젠테이션 / 이 페이지 변환")는/slideshow가 슬라이드쇼인지 확인한 후 제작하고, 그렇지 않은 경우 적절한 비슬라이드쇼 워크플로우로 전환합니다. - 길이는 가이드이지 게이트가 아님 — 의도가 워크플로우를 선택합니다. 작품이 분명히 약 3분보다 길거나 정적 / 루프 / 사용자 정의 형식인 경우에만
/general-video로 이동합니다.
일치하는 워크플로우가 설치되지 않은 경우
워크플로우를 선택했으면 실제로 사용 가능한지 확인하세요. 일치하는 워크플로우 스킬이 설치되지 않은 경우, 추측으로 대체하지 말고 사용자에게 먼저 설치하라고 알리세요:
- 이 워크플로우만:
npx skills add heygen-com/hyperframes --skill <워크플로우-이름>(예:--skill pr-to-video— 이름만, 앞에/없음). - 모든 워크플로우 한 번에:
npx skills add heygen-com/hyperframes --all(코어 + 모든 워크플로우, 선택기 건너뜀).
실행 후 워크플로우의 스킬을 다시 읽고 계속하세요.
스킬 최신 상태 유지
HyperFrames 스킬은 버전 관리됩니다. npx hyperframes init는 설치된 스킬을 GitHub의 최신 버전과 비교하고, 오래되었거나 누락된 항목이 있으면 전체 세트를 설치/새로 고칩니다. 따라서 새로 init된 프로젝트는 항상 완전하고 최신 세트를 갖습니다 (최신 프로젝트에서 init를 다시 실행해도 아무 작업도 수행되지 않음). 확인은 빠른 GitHub 왕복입니다. 오프라인(또는 속도 제한)인 경우 짧은 시간 초과 후 설치로 대체되므로 init가 네트워크 문제로 인해 절대 실패하지 않습니다. init --skip-skills로 완전히 건너뛸 수 있습니다.
작업이 예상치 못하게 동작하거나 긴 빌드 전에 설치된 스킬이 최신 상태인지 확인하세요:
- 확인:
npx hyperframes skills check(기계 판독 가능한 결과를 위해--json추가; 오래되거나 누락된 항목이 있으면 0이 아닌 종료 코드로 종료). - 업데이트:
npx hyperframes skills update— 전체 세트를 최신 버전으로 가져오고 아직 없는 것은 설치 (init의 설치 단계와 동일).
CLI는 render / lint / validate 실행이 오래된 스킬을 감지하면 한 줄 알림도 표시합니다.
워크플로우 세부 정보
/product-launch-video
- 입력: 마케팅되는 제품 — (a) 제품 URL (헤드리스 Chrome으로 크롤링하여 에셋 + 브랜드 토큰 획득), (b) 제품 사이트를 언급하는 스크립트 / 브리프 (링크가 없더라도 PLV가 해결하고 크롤링, 사용자가 거부하지 않는 한), 또는 (c) 파생 가능한 사이트가 없거나 "스크랩하지 마" 스크립트 (캡처 금지 모드 — 팔레트 + 디자인 시스템을 제공하는 스타일 사전 설정 선택). 제공된 스크립트는 그대로 음성 해설이거나 장면별로 재구성될 수 있습니다 — PLV가 질문합니다.
- 출력: 제품 출시 / SaaS 프로모션을 HyperFrames 컴포지션으로 → MP4. (최적 길이 30–90초).
- 트리거: "X의 출시 비디오", "우리 사이트 프로모션", "내 SaaS를 1분 안에 설명해 줘", "내 스크립트를 60초 프로모션으로", "텍스트 전용 출시 비디오, 스크랩하지 마".
/website-to-video
- 입력: 비디오로 변환할 일반 웹사이트 / URL — 목표가 제품 출시가 아닌 사이트 에 대한 비디오인 경우. 헤드리스 Chrome으로 실제 스크린샷 + 브랜드 에셋 캡처.
- 출력: 사이트 자체 비주얼로 구축된 사이트 투어 / 포트폴리오 / 랜딩 페이지 쇼케이스 / 소셜 클립 → MP4.
- 트리거: "이 웹사이트를 비디오로", "에서 사이트 투어", "우리 홈페이지에서 소셜 클립", "URL만 있어 — 뭔가 만들어 줘".
/faceless-explainer
- 입력: 설명되는 임의의 텍스트 — 주제, 기사 또는 노트 — 마케팅되는 제품이나 캡처할 사이트 없음. (
/product-launch-video에서 분기, 헤드리스 Chrome 없음). - 출력: 페이스리스 익스플레이너 → MP4, 모든 비주얼은 장면당 LLM 생성 (타이포그래피 / 추상 / 다이어그램 / 데이터 비주얼);
pin-and-paper사전 설정 포함. (최적 길이 30–90초). - 트리거: "X에 대한 페이스리스 익스플레이너", "DNS 작동 방식을 비디오로 설명해 줘", "이 기사를 익스플레이너로", "내 노트에서 익스플레이너".
/pr-to-video
- 입력: GitHub 풀 리퀘스트 — PR URL,
owner/repo#N참조 또는 "이 PR" —ghCLI를 통해 읽음 (스크랩할 사이트 아님). - 출력: 코드 변경 설명 (체인지로그 / 기능 공개 / 수정 / 리팩터) → MP4 — diff 하이라이트, 전후, 파일 트리 + 영향 장면. ≤ (최적 길이 30–90초).
- 트리거: "이 PR에 대한 비디오 만들어 줘", "PR #1187를 체인지로그 비디오로", "github.com/org/repo/pull/123에서 릴리스 노트 비디오".
/embedded-captions
- 입력: 캡션을 추가할 기존 토킹 헤드 비디오 (MP4) — 실제 푸티지, URL 또는 브리프 아님. 로컬에서 전사 (Whisper, API 키 없음) 및 매트 처리 (RVM)되어 주제가 캡션을 가릴 수 있음.
- 출력: 동일한 푸티지 변경 없음, 캡션 레이어 포함 — 표준 (그대로 하단 서드 레일 + 주제 뒤에 임베디드 클라이맥스) 또는 시네마틱 (모든 캡션이 주제 뒤에 합성됨). 모든 길이.
- 트리거: "이 비디오에 캡션 / 자막 추가", "주제 뒤에 캡션", "내 클립에 시네마틱 캡션".
/talking-head-recut
- 입력: 화면 그래픽으로 패키징할 기존 토킹 헤드 / 인터뷰 / 팟캐스트 비디오 (MP4) — 실제 푸티지. 로컬에서 전사 (Whisper). 클립은 그 아래에서 완전히, 변경되지 않고 재생됩니다.
- 출력: 동일한 푸티지에 시간이 지정된 그래픽 오버레이 카드 — 운동 타이틀, 하단 서드, 데이터 콜아웃, 풀 인용문, 사이드 패널, 화면 속 화면 — 대본과 동기화됨. 모든 길이.
- 트리거: "이 비디오 패키징", "내 강연에 그래픽 오버레이 / 하단 서드 / 데이터 콜아웃 추가", "이 인터뷰를 그래픽 패키지 편집으로".
/motion-graphics
- 입력: 모션이 메시지인 짧고 디자인 중심의 모션 그래픽 — 일반적으로 약 10초 미만, 내레이션 없음. 장르: 운동 타이포그래피, 통계 / 숫자 카운트업, 차트 히트, 로고 스팅, 하단 서드 / 오버레이 또는 검색 기반 페이지 / 트윗 / 헤드라인 샷.
- 출력: 짧은 모션 그래픽 → MP4 또는 하단 서드 / 콜아웃용 투명 오버레이 (알파 WebM / MOV).
- 트리거: "8초 로고 스팅", "이 통계 애니메이션", "운동 타이프 인트로", "이 트윗을 모션 그래픽으로", "투명 하단 서드 오버레이".
/music-to-video
- 입력: 음악 트랙 — 오디오 파일 또는 오디오를 추출할 비디오 — 내레이션 및 웹사이트 캡처 없음. 선택적으로, 사용자 제공 이미지 / 비디오를 혼합. 트랙은 전체 비디오가 구축되는 결정론적 비트 / 에너지 맵 (
audiomap.json)으로 한 번 분석됩니다. - 출력: 비트 동기화된 HyperFrames 컴포지션 → MP4, 음악이 페이싱을 주도. 타이포그래피와 템플릿이 바닥 (에셋 없이도 완전한 비디오 가능); 제공된 모든 미디어는 동일한 비트 그리드에 맞춰집니다 (비트 컷 / 켄 번스). 장르 — 리릭 비디오, 슬라이드쇼, 운동 프로모 — 는 프레임별 선택에서 나타납니다. 파이프라인은 장르에 따라 분기하지 않습니다.
- 트리거: "이 노래에 대한 비디오 만들어 줘", "이 트랙에서 비트 동기화 비디오", "리릭 비디오", "이 음악을 비디오로", "이 비트에 맞춰 음악 시각화 / 운동 프로모".
/slideshow
- 입력: 제작할 프레젠테이션 / 피치 덱 / 인터랙티브 덱 — 개별 슬라이드, 조각, 분기, 핫스팟. 출력은 항상 탐색 가능한 HTML 덱이며, 렌더링된 비디오가 아닙니다. 또한 소스 문서 (마크다운, Word, Google Slides 내보내기 / PDF — 읽거나 스크랩 가능할 때)를 덱 HTML로 변환할 수 있습니다.
- 출력: 탐색 가능한 HTML 덱 (발표자 노트, 슬라이드 트랜지션, 키보드 탐색 포함) — 렌더링된 비디오가 아님.
/hyperframes-cli덱 커맨드로 배포. - 트리거: "내 피치 덱 만들어 줘", "이 마크다운을 슬라이드쇼로", "다음 프레젠테이션을 위한 덱", "PDF를 슬라이드로".
/general-video
- 입력: 다른 워크플로우와 일치하지 않는 길거나 (약 3분+) 독특한 요청 — 다중 장면 내레이션 작품, 서사 영화, 정적 루프 / 포스터, 아트 / 모션 연구, 또는
/website-to-video의 "사이트 투어" 범주에 맞지 않는 사용자 정의 HTML 컴포지션. - 출력: HyperFrames 컴포지션 → MP4 (여전히
data-*HTML 계약 사용). 태그는 없습니다; 스킬에 진입할 때 요구 사항이 발견됩니다. - 트리거: "우리 회사에 대한 더 긴 비디오", "루프 배경 만들어 줘", "사용자 정의 아트 컴포지션", "웹캠 내 이야기" (누군가가 분명히 다른 워크플로우보다 더 긴/느린 작품을 설명할 때").
/remotion-to-hyperframes
- 입력: 기존 Remotion (React) 컴포지션 —
<ReactPlayer>,<AbsoluteFill>,<Sequence>,useCurrentFrame()및useVideoConfig(). - 출력: 컨셉 증명 변환 —
useVideoConfig()의 <Duration / Size>를data-duration/data-width data-height로;<Sequence>를<div data-track>으로; React 상태 / 뷰를 HyperFrames 템플릿 변수{{frame}},{{…}}및data-if로; 미디어 로딩 패턴. - 트리거: "이 Remotion 컴포지션을 HyperFrames로 마이그레이션", "Remotion을 HyperFrames로 포팅", "더 이상 React에 종속되지 않도록 이 컴포넌트 변환".
라우팅 예시 (의도 선택기 실행)
에이전트: 이 텍스트를 의도 선택기에 전달하고, 워크플로우를 선택하고, 관찰을 보고하세요. "출력을 생성하지 마"가 설정된 경우 사용자에게 설명하지 말고 워크플로우를 선택하기만 하면 됩니다.
- "우리 스타트업의 새로운 SaaS 제품 출시 비디오를 만들어 줘 — 랜딩 페이지는 example.com/product에 있어"
→
/product-launch-video - "이 웹사이트를 소셜 클립으로 — example.com"
→
/website-to-video - "DNS가 어떻게 작동하는지 설명하는 페이스리스 영상을 만들어 줘"
→
/faceless-explainer - "이 GitHub PR #42에 대한 비디오를 만들어 줘"
→
/pr-to-video - "내 강연 녹화에 자막을 추가해 줘"
→
/embedded-captions - "내 토킹 헤드 클립에 하단 서드와 데이터 콜아웃 오버레이를 추가해 줘"
→
/talking-head-recut - "로고 스팅 — 정적 PNG 필요, 8초, 투명 배경"
→
/motion-graphics - "내 비트에 맞춰진 비디오를 만들어 줘 — 여기 내 새 트랙이 있어"
→
/music-to-video - "이 마크다운 개요를 넘길 수 있는 슬라이드쇼로 만들어 줘"
→
/slideshow - "루프 배경 — 그라디언트가 움직여, 30초, 부드러운 루프"
→
/general-video - "이 Remotion 컴포넌트를 HyperFrames로 포팅해 줘"
→
/remotion-to-hyperframes - "우리 회사 채용 페이지를 비디오로 — 지루한 것보다 약간 길어서 3분 정도"
→
/website-to-video(일반 웹사이트) - "우리 앱의 기능을 보여주는 프로모션 — 스크립트가 있어"
→
/product-launch-video(제품) - "4분짜리 다큐멘터리 스타일 비디오 [5장면]"
→
/general-video(길고 다중 장면) - "우리 피치 덱을 인터랙티브하게 — 클릭 가능한 슬라이드"
→
/slideshow - "내가 쓴 이 시를 비디오로 — 음악 트랙 없음, 내레이션 없음, 그냥 운율 맞춰 움직이는 텍스트"
→
/motion-graphics(운동 타이포그래피)