HyperFrames

$ npx skills add heygen-com/hyperframes copy

HeyGen이 만든 오픈소스 프로젝트(Heygen-com/hyperframes).

왜 필요한가?

영상 제작을 코드나 에이전트로 자동화하려면 보통 독자 포맷이나 별도 빌드 파이프라인을 거쳐야 했습니다. 결과가 매번 달라지면 에이전트가 만든 영상을 재현하거나 검증하기도 어렵습니다.

HyperFrames는 이 과정을 HTML로 끌어내립니다 — “Write HTML. Render video. Built for agents.” 를 표방하며, HTML, CSS, 미디어, 애니메이션을 결정적(deterministic) MP4 로 렌더링합니다. 같은 입력은 항상 같은 결과를 내므로, 에이전트가 작성한 컴포지션을 그대로 재현할 수 있습니다.

무엇을 만들 수 있나

공식 showcase는 실제로 이런 영상을 HTML로 렌더링해 보여줍니다.

제품 출시, 기능 소개 영상 — UI 목업, 보이스오버, 효과음을 얹은 런칭 영상. showcase의 “HyperFrames Launch Video”, “Timeline Editor Launch”가 이 유형입니다.
웹사이트 → 홍보 영상 — 웹사이트를 product promo, social ad, feature showcase, brand reel로 바꿉니다. showcase “Website to HyperFrames” 데모가 이 흐름을 보여줍니다.
데이터, 차트 애니메이션 — 막대그래프 같은 데이터 시각화. 카탈로그의 data-chart 블록을 npx hyperframes add data-chart로 가져옵니다.
소셜 오버레이 — 인스타그램 팔로우 콜아웃 같은 소셜 자막, 오버레이. 카탈로그 instagram-follow 블록.
타이틀 시퀀스, VFX — texture-mask 타이포그래피, shader 트랜지션, Three.js 효과를 쓴 타이틀, 효과 영상. showcase “Texture Launch”, “VFX x HeyGen”.

핵심은 작업 흐름입니다. 영상 편집기를 열어 타임라인을 다루는 대신, Claude Code에 “이 매출 데이터를 막대그래프가 차오르는 15초 영상으로 만들어줘”처럼 설명하면 됩니다. 에이전트가 HTML 컴포지션을 작성하고 npx hyperframes render가 MP4로 출력합니다. 에이전트는 이미 HTML을 다루므로, 별도 영상 API나 드래그앤드롭 편집기 없이 프롬프트만으로 영상이 나옵니다.

핵심 기능

HTML 네이티브 컴포지션

타이밍을 data 속성으로 표현하는 HTML 기반 포맷입니다. 빌드 단계가 없어 index.html을 브라우저에서 바로 재생할 수 있고, React 같은 프레임워크를 요구하지 않습니다.
결정적 렌더링

동일한 입력이 동일한 출력을 만듭니다. 렌더 결과가 흔들리지 않아 에이전트 워크플로에서 재현, 검증이 쉽습니다.
에이전트 친화 CLI

CLI가 기본적으로 비대화형으로 동작합니다. 에이전트가 컴포지션을 작성한 뒤 사람 개입 없이 렌더링까지 이어받을 수 있습니다.
애니메이션 어댑터

GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI(Web Animations API) 등 여러 애니메이션 엔진을 어댑터로 연결합니다.
카탈로그 컴포넌트

재사용 가능한 블록과 컴포넌트를 카탈로그에서 추가합니다 — 예: npx hyperframes add flash-through-white, npx hyperframes add data-chart.
Studio, frame.md, Lambda 렌더링

브라우저 기반 컴포지션 에디터 Studio, 웹 디자인 사양을 영상 사양으로 옮기는 frame.md 디자인 시스템, AWS Lambda 분산 렌더링, 임베드용 player 웹 컴포넌트를 함께 제공합니다.

사용 방법

AI 에이전트와 함께 (스킬 설치)

npx skills add heygen-com/hyperframes

설치 후 에이전트에게 만들고 싶은 영상을 설명하면, 에이전트가 HTML 컴포지션을 작성하고 CLI가 렌더링합니다.

CLI 직접 사용

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 라이브 리로드로 브라우저 미리보기
npx hyperframes render    # MP4로 렌더링

알아두면 좋은 점

요구 사항 — Node.js 22 이상과 FFmpeg가 필요합니다. 렌더링은 headless Chrome과 FFmpeg로 수행됩니다.
라이선스 — Apache-2.0으로 공개되어 있습니다. 렌더당 과금이나 상업적 사용 한도가 없습니다.
설치수 출처 — 위 설치수는 skills.sh의 npx skills 텔레메트리 기준으로, 이 리포가 제공하는 스킬(39개)의 합산 설치수입니다. claude.com/plugins에는 등록되어 있지 않습니다.
렌더링 모드 — 로컬 CLI 렌더링과 AWS Lambda 분산 렌더링을 지원합니다.
공식 문서, 플레이그라운드 — 문서와 quickstart, showcase는 hyperframes.heygen.com에 있고, 디자인 템플릿과 플레이그라운드는 hyperframes.dev에서 제공합니다.

§ 6

자주 묻는 질문

§ 7.1

HyperFrames는 무엇인가요?

HTML, CSS, 미디어, 애니메이션을 결정적 MP4 영상으로 렌더링하는 오픈소스 프레임워크입니다. README 표기 그대로 "Write HTML. Render video. Built for agents." 코딩 에이전트가 평범한 HTML 컴포지션을 작성하면 CLI가 영상으로 출력합니다.

§ 7.2

Claude Code에서 어떻게 쓰나요?

`npx skills add heygen-com/hyperframes`로 에이전트 스킬을 설치하면 됩니다. 스킬이 영상 제작 패턴을 에이전트에게 알려주고, CLI는 기본적으로 비대화형이라 에이전트가 그대로 이어받아 렌더링할 수 있습니다. Claude Code 외 Cursor, Gemini CLI, Codex 등 skills 프레임워크를 지원하는 에이전트에서도 동작합니다.

§ 7.3

설치와 실행에 무엇이 필요한가요?

Node.js 22 이상과 FFmpeg가 필요합니다. 렌더링은 headless Chrome과 FFmpeg로 로컬에서 수행되며, AWS Lambda 분산 렌더링도 지원합니다.

§ 7.4

무료로 쓸 수 있나요?

예, GitHub에 Apache-2.0으로 공개되어 있어 렌더당 과금이나 상업적 사용 제한이 없습니다.

§ 7.5

React가 필요한가요?

아니요. 컴포지션은 평범한 HTML, CSS로 작성하며 빌드 단계가 없어 `index.html`을 브라우저에서 바로 재생할 수 있습니다. 애니메이션은 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 어댑터로 연결합니다.

§ 7.6

누가 만들었나요?

AI 아바타 영상 회사 HeyGen이 만들어 `Heygen-com/hyperframes` 리포로 공개했습니다.