HyperFrames — 여기서 시작하세요
HyperFrames는 HTML에서 비디오를 렌더링합니다. 컴포지션은 DOM이 data-* 속성으로 타이밍을 선언하고, 애니메이션 런타임이 탐색 가능하며, 미디어 재생이 프레임워크에 의해 관리되는 HTML 파일입니다.
이 스킬은 기술 사용 방법 가이드입니다 — 의도적으로 디자인 관련 내용을 포함하지 않습니다. 모션/애니메이션 레시피는 /hyperframes-motion을 참조하세요. 디자인 방향(팔레트, 타이포그래피, 프레임 프리셋)은 /hyperframes-design을 참조하세요. 아래는 모든 HyperFrames 주제의 기능 맵, 이 스킬에 포함된 주제 가이드 색인, 그리고 워크플로우 선택을 위한 의도 라우터입니다.
기능 맵 — HyperFrames 스킬
세 가지 스킬, 각각 하나의 관심사. 이 스킬은 기술 사용 방법 가이드입니다. 나머지 두 개는 디자인을 다룹니다.
| 원하는 작업… | 스킬 |
|---|---|
| HyperFrames 사용 방법 — 컴포지션 계약, CLI 개발 루프, 레지스트리 블록/컴포넌트 설치 (이 스킬) | /hyperframes |
| 모션/애니메이션 — 원자 모션 규칙, 씬 청사진, 전환, 런타임 어댑터 (GSAP / Lottie / Three.js) | /hyperframes-motion |
| 디자인 — 팔레트, 타이포그래피, 프레임 프리셋, 비트 계획, 브랜드/스타일 결정 (애니메이션 레시피 제외) | /hyperframes-design |
주제 가이드 — 이 스킬 내부 내용
기술 사용 방법 가이드는 세 개의 하위 주제로 나뉩니다. 각각 자체 SKILL.md와 references/ 폴더가 있습니다:
| 하위 주제 | 경로 | 이 내용을 읽으면 알 수 있는 것 |
|---|---|---|
| 컴포지션 코어 | core/SKILL.md | 컴포지션 계약 — data-* 속성, 클립, 트랙, 서브 컴포지션, 변수, 결정론 규칙 |
| CLI 개발 루프 | cli/SKILL.md | npx hyperframes init / lint / validate / inspect / preview / render + AWS Lambda 클라우드 렌더링 |
| 레지스트리 추가 | registry/SKILL.md | hyperframes add <block-or-component> — 설치 위치, 블록 연결, 컴포넌트 연결, 새 항목 기여 방법 |
주제별 세부 정보는 각 하위 주제의 references/ 폴더에 있습니다. 애니메이션 런타임 세부 사항(GSAP API, Lottie, Three.js 등)은 /hyperframes-motion → adapters/<runtime>.md를 참조하세요.
의도 라우팅 — 워크플로우 선택
이 섹션은 최상위 워크플로우만 알고 있습니다. 내부 참조 또는 위의 주제 가이드는 로드하지 않습니다.
라우팅 전 — 사양이 아닌 입력 확인
라우팅은 비디오가 무엇에 관한 것인지 — 입력과 주제를 알아야 합니다. URL, 제품, 주제, 자산 없이 "우리 물건에 대한 비디오 만들어줘"와 같이 지정되지 않은 경우, 워크플로우에 진입하기 전에 질문하세요. 워크플로우를 결정하는 것이 바로 라우팅 결정입니다. 최대 두 가지 질문:
- 입력 — 제품(URL/브리프), 일반 웹사이트, GitHub PR, 설명할 주제, 또는 기존 토킹헤드 비디오?
사양 기본값 — 묻지 말고 명시 (이 값들은 절대 경로를 변경하지 않습니다): 종횡비 16:9 (명명된 세로 플랫폼인 TikTok / Reels / Shorts에만 9:16 사용); 자막 언어 = 사용자의 언어. 선택된 워크플로우는 첫 번째 단계에서 자체 세부 사항을 다시 확인합니다.
워크플로우 치트 시트
| 워크플로우 | 용도 |
|---|---|
/faceless-explainer | 텍스트로 주제/개념 설명 — 제품 없음, URL 없음; 모든 시각은 LLM이 창작 |
/pr-to-video | GitHub PR / 코드 변경 → 변경 로그 / 기능 소개 / 수정 / 리팩토링 설명 비디오 |
/embedded-captions | 기존 토킹헤드 비디오에 자막/캡션 추가 (영상 자체는 손대지 않음) |
/talking-head-recut | 기존 토킹헤드 비디오를 디자인된 그래픽 오버레이와 함께 패키징 — 하단 1/3, 데이터 콜아웃, 운동 타이틀, 풀 인용문 |
/motion-graphics | 짧고 디자인 중심의 모션 그래픽 — 운동 타이포그래피, 통계/차트 연출, 로고 스팅, 하단 1/3 오버레이 |
/slideshow | 프레젠테이션 / 피치 덱 / 대화형 덱 — 개별 슬라이드, 조각, 분기, 핫스팟; 출력물은 탐색 가능한 덱, 렌더링된 비디오가 아님 |
/general-video | 그 외 모든 것 — 더 길거나 여러 씬의 작품, 정적 루프 / 포스터, 사용자 정의 컴포지션 |
명확화 (혼동될 수 있는 경우만):
- 모션 우선 (~10초 미만, 모션 자체가 메시지) →
/motion-graphics, 입력 유형에 관계없이. - URL 또는 스크립트 — GitHub PR 링크 →
/pr-to-video; 제품/사이트 없이 개념 설명 →/faceless-explainer. 명확하지 않은 입력 → 한 가지 질문. - 기존 영상 — 일반 음성 자막 →
/embedded-captions; 디자인된 오버레이 카드 →/talking-head-recut. 둘 다 영상 자체를 편집하지 않습니다 (재타이밍 / 재색상 / 재프레임 / 재정렬은 NLE 편집 — 범위 밖). - 프레젠테이션 / 피치 덱 / 대화형 덱 (개별 슬라이드, 탐색, 발표자 모드) →
/slideshow— 출력물은 탐색 가능한 덱, 렌더링된 비디오가 아님. 명시적인 "슬라이드쇼" 요청은 바로 진행됩니다. 인접한 트리거("덱 / 슬라이드 / 프레젠테이션 / 이 페이지를 변환해줘")는/slideshow가 제작 전에 슬라이드쇼인지 확인하고, 그렇지 않으면 적절한 비슬라이드쇼 워크플로우로 전환합니다. - 길이는 안내일 뿐, 장벽이 아님 — 의도가 워크플로우를 선택합니다. 작품이 명확히 ~3분보다 길거나, 정적 / 루프 / 사용자 정의 형식인 경우에만
/general-video로 이동하세요.
일치하는 워크플로우가 설치되지 않은 경우
워크플로우를 선택한 후, 실제로 사용 가능한지 확인하세요. 일치하는 워크플로우 스킬이 설치되지 않은 경우, 추측으로 대체하지 말고 사용자에게 먼저 설치하라고 알리세요:
- 특정 워크플로우만:
npx skills add heygen-com/hyperframes --skill <workflow-name>(예:--skill pr-to-video— 이름만, 앞에/없음). - 모든 워크플로우 한 번에:
npx skills add heygen-com/hyperframes --all(코어 + 모든 워크플로우, 선택기 건너뜀).
사용자가 명령을 실행한 후, 워크플로우의 스킬을 다시 읽고 계속 진행하세요.
워크플로우 세부 사항
/faceless-explainer
- 입력: 설명할 임의의 텍스트 — 주제, 문서, 노트 등. 마케팅되는 제품이나 캡처할 사이트가 없음.
- 출력: 무료 설명자 → 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)으로 화자가 자막을 가릴 수 있음.
- 출력: 동일한 영상 그대로에 자막 레이어 추가 — 표준 (그대로 하단 1/3 레일 + 화자 뒤에 임베디드 클라이맥스) 또는 시네마틱 (모든 자막이 화자 뒤에 합성). 모든 길이.
- 트리거: "이 비디오에 자막 / 캡션 추가해줘", "화자 뒤에 자막", "내 클립에 시네마틱 캡션".
/talking-head-recut
- 입력: 온스크린 그래픽과 함께 패키징할 기존 토킹헤드 / 인터뷰 / 팟캐스트 비디오 (MP4) — 실제 영상. 로컬에서 전사 (Whisper). 클립은 아래에서 전체 재생되며, 손대지 않음.
- 출력: 동일한 영상에 시간에 맞춰진 그래픽 오버레이 카드 — 운동 타이틀, 하단 1/3, 데이터 콜아웃, 풀 인용문, 사이드 패널, 화면 속 화면 — 대본과 동기화. 모든 길이.
- 트리거: "이 비디오 패키징해줘", "내 강연에 그래픽 오버레이 / 하단 1/3 / 데이터 콜아웃 추가해줘", "이 인터뷰를 그래픽 패키징된 편집본으로 만들어줘".
/motion-graphics
- 입력: 모션이 메시지인 짧고 디자인 중심의 모션 그래픽 — 일반적으로 ~10초 미만. 장르: 운동 타이포그래피, 통계 / 숫자 카운트업, 차트 연출, 로고 스팅, 하단 1/3 / 오버레이, 또는 검색 기반 페이지 / 트윗 / 헤드라인 샷.
- 출력: 짧은 모션 그래픽 → MP4 또는 하단 1/3 / 콜아웃용 투명 오버레이 (알파 WebM / MOV).
- 트리거: "8초 로고 스팅", "이 통계를 애니메이션으로", "운동 타이포그래피 인트로", "이 트윗을 모션 그래픽으로 만들어줘", "투명 하단 1/3 오버레이".
/slideshow
- 입력: 제작할 프레젠테이션 / 피치 덱 / 대화형 덱 — 브리프, 개요, 또는 슬라이드로 변환할 기존 페이지. 렌더링된 비디오 요청이 아님. 의도가 모호한 경우, 스킬은 제작 전에 "이것을 HyperFrames 슬라이드쇼로 원하십니까?"라고 확인합니다.
- 출력: 실행 가능한 HyperFrames 컴포지션 + 플레이어의
SlideshowController가 읽어 GSAP 타임라인을 탐색 가능한 덱으로 바꾸는 JSON 아일랜드 — 개별 슬라이드, 조각 표시, 분기 시퀀스, 핫스팟 탐색, 발표자 모드 및 발표자 노트. 결과물은 덱이지 MP4가 아닙니다. - 트리거: "피치 덱 / 프레젠테이션 / 슬라이드 덱 만들어줘", "대화형 덱", "이 페이지를 슬라이드로 변환해줘", "발표자 모드가 있는 슬라이드쇼".
/general-video
- 입력: 위에 해당하지 않는 모든 것 — 크리에이티브 브리프, 애니메이션할 단일 요소, 구축 중인 컴포지션에 대한 수정. 입력 및 길이에 구애받지 않음.
- 출력: HyperFrames 컴포지션 (모든 길이 / 형식) — 원래 흐름: 디자인 시스템 → 프롬프트 확장 → 계획 → 애니메이션 전 레이아웃 → 빌드 (
hyperframes-*스킬에 위임) → 검증. - 트리거: "타이틀 카드 만들어줘", "이걸 애니메이션해줘", "더 긴 브랜드 / 시즈널 릴", "멀티 씬 컴포지션", "정적 루프 / 포스터", 위의 행에 맞지 않는 모든 "비디오 만들어줘" 요청.