heygen-com/hyperframes

HyperFrames – HTML + CSS를 결정론적 MP4 동영상으로 변환

무엇인가요 – 일반적인 웹 마크업(HTML, CSS, 미디어 파일, 및 시크 가능한 애니메이션 라이브러리)으로 동영상을 설명할 수 있는 오픈소스 Node.js 프레임워크입니다. HyperFrames는 이 설명을 완전히 재현 가능한 MP4로 렌더링합니다. CLI를 통해 로컬에서 또는 클라우드/Lambda 백엔드를 통해 실행할 수 있습니다. AI 코딩 에이전트(Claude, Gemini, Cursor 등)가 로드할 수 있는 스킬 세트를 제공하여, LLM에 "10초짜리 제품 소개를 만들어줘"라고 지시하면 에이전트는 자동으로 필요한 HTML을 생성하고, 자산을 가져오며, Lint를 실행하고, 미리보기를 수행한 후 hyperframes render를 호출합니다.

---

핵심 개념

개념	기능
HTML 기반 구성	일반적인 HTML 파일을 작성하고, data-start, data-duration, data-track-index 등의 특수한 data-* 속성을 추가하여 동영상 타임라인과 트랙 레이아웃을 정의합니다.
시크 가능한 애니메이션 어댑터	HyperFrames는 GSAP, Lottie, Three.js, Anime.js, CSS WAAPI, 또는 사용자 정의 어댑터를 제어할 수 있으며, 모든 애니메이션이 시크 가능하도록 강제되어 렌더러가 결정론적으로 임의의 프레임으로 이동할 수 있습니다.
미디어 OS (/media-use)	이미지, 오디오, 비디오, TTS, 음악 등을 로컬 파일에서 또는 필요한 자산이 없을 경우 생성 모델을 호출하여 해결하는 통합 자산 관리자입니다.
스킬 라우터	/hyperframes 스킬은 자연어 요청을 10개 이상의 생성 워크플로우(제품 출시 영상, 페이스리스 설명서, PR→영상 등) 중 하나로 매핑하는 작은 의도 계층입니다.
CLI	`npx hyperframes init

---

주요 기능("생성 워크플로우")

• 제품 출시 영상 – 웹사이트나 스크립트를 30~90초 마케팅 클립으로 변환.
• 페이스리스 설명서 – 일반 텍스트에서 LLM이 창의적으로 생성한 그래픽을 포함한 시각적 설명서를 생성.
• PR→영상 – GitHub PR URL을 입력하면 변경 사항 스타일의 워크스루를 생성.
• 임베디드 자막 / 토킹헤드 재편집 – 기존 영상에 자막이나 그래픽 오버레이를 추가.
• 모션 그래픽스 – 짧고 내레이션 없는 운동적 작품(로고 스트링, 차트 히트 등).
• 음악→영상 – 비트 기반 영상을 오디오 트랙에 동기화.
• 슬라이드쇼 / 데크 – 평면 영상이 아닌 인터랙티브하고 탐색 가능한 프레젠테이션을 출력.
• 일반 영상 – 더 긴 또는 다중 장면 구성에 사용하는 포괄적인 워크플로우.
• Remotion→HyperFrames – React 기반 Remotion 구성에서 단방향 마이그레이션.

---

사용 방법(빠른 시작)

# 1. AI 에이전트용 HyperFrames 스킬 세트 설치
npx skills add heygen-com/hyperframes   # 인터랙티브 피커(핵심 스킬만)
# 또는 비인간적 실행을 원할 경우
npx hyperframes skills update          # 핵심 세트를 직접 설치

# 2. 에이전트에게 프롬프트 전달, 예:
# "`/hyperframes`를 사용하여 페이드인 타이틀, 배경 영상, 미세한 배경 음악을 포함한 10초짜리 제품 소개를 만들어줘"

# 3. 에이전트는 HTML 구성 생성, `hyperframes preview`로 확인 후:
cd my-video
npx hyperframes render   # 결정론적 video.mp4 생성

AI 없이 수동으로 작업하고 싶다면 동일한 CLI를 사용 가능:

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 브라우저에서 라이브 리로드
npx hyperframes render    # MP4 생성(FFmpeg 필요)

---

생태계 및 확장성

• 도메인 스킬 – 작고, 필요 시에만 로드되는 모듈(/hyperframes-animation, /hyperframes-keyframes, /hyperframes-audio, /media-use, /figma 등)로 라우터가 조합합니다.
• 카탈로그 및 레지스트리 – hyperframes catalog로 재사용 가능한 블록(트랜지션, 효과, 디자인 토큰)을 탐색하고 설치하며, 새로운 것을 상류로 기여할 수 있습니다.
• 디자인 브리지(frame.md) – 브랜드의 웹 디자인 시스템을 반영하는 "디자인→영상" 사양으로, LLM이 브랜드 토큰을 존중하면서 구성할 수 있도록 합니다.
• 클라우드 및 서버리스 렌더링 – HeyGen의 인프라스트럭처에서 호스팅 렌더링 또는 자체 호스팅 AWS Lambda 함수를 사용하는 옵션.

---

누구에게 적합한가

• AI 기반 콘텐츠 파이프라인 – LLM이 마케팅 영상, PR 워크스루, 데이터 시각화 클립을 자동 생성하고 싶은 기업.
• 디자인→영상 팀 – 이미 웹 스타일 디자인 시스템을 유지하고 있으며 결정론적인 방법으로 모션 그래픽을 내보내고 싶은 디자이너.
• 영상 코드 도구 개발자 – 전용 모션 그래픽 DSL보다 HTML/CSS를 선호하는 누구나.
• 교육자 / 애호가 – 스킬 시스템 덕분에 코드를 작성하지 않고도 LLM 기반 영상 생성을 실험하기 쉬움.

---

설치 및 요구 사항

• Node.js ≥ 22 (npm에서 hyperframes로 배포됨).
• 로컬 렌더링을 위해 FFmpeg가 호스트 머신에 필요.
• 옵션: Bun (Codex 플러그인 패키징 스크립트에서 사용).

---

더 알아보기

• 빠른 시작: https://hyperframes.heygen.com/quickstart
• 쇼케이스 (리믹스 가능한 완성 영상): https://hyperframes.heygen.com/showcase
• 플레이그라운드 (온라인 에디터): https://www.hyperframes.dev/
• 문서 / 소개: https://hyperframes.heygen.com/introduction
• Discord 커뮤니티: https://discord.gg/EbK98HBPdk

---

결론 – HyperFrames는 AI 코딩 에이전트와 스킬 라우터를 통해 통합된 결정론적이고 HTML 중심의 영상 제작을 제공합니다. LLM이 익숙한 웹 개발 스택에 머무른 채로 모션 그래픽을 생성, 미리보기, 렌더링할 수 있습니다.