HyperFrames: HTML, CSS, 미디어 및 애니메이션을 동적 MP4 비디오로 변환하는 오픈 소스 프레임워크

HTML 작성. 비디오 렌더링. 에이전트를 위해 구축됨.

Quickstart | Showcase | Playground | Catalog | Docs | Discord

HyperFrames는 HTML, CSS, 미디어 및 시크 가능한 애니메이션을 결정론적(deterministic) MP4 비디오로 변환하는 오픈 소스 프레임워크입니다. 이를 CLI를 사용하여 로컬에서 사용하거나, 스킬을 가진 AI 코딩 에이전트로부터 사용하거나, 호스팅되는 오더링 워크플로우의 렌더링 핵심으로 사용할 수 있습니다.

HyperFrames 스킬을 설치한 다음, 원하는 비디오를 설명합니다:

npx skills add heygen-com/hyperframes

다음과 같은 프롬프트를 시도해 보세요:

사용 /hyperframes 를 사용하여 페이드인 제목, 배경 비디오, 미묘한 배경 음악이 포함된 10초짜리 제품 소개 영상을 만드세요.

이 스킬들은 에이전트에게 HyperFrames 제작 루프를 가르칩니다: 비디오 계획하기, 유효한 HTML 작성하기, 시크 가능한 애니메이션 연결하기(wire), 미디어 추가하기, 린팅(lint)하기, 미리 보기(preview)하기, 그리고 렌더링하기. 이 스킬들은 Claude Code, Cursor, Gemini CLI, Codex 및 스킬을 지원하는 기타 코딩 에이전트와 함께 작동합니다.

시각 디자인 핸드오프 워크플로우의 경우, Claude Design 가이드와 Open Design 가이드를 참조하세요.

npx hyperframes init my-video
cd my-video
px hyperframes preview # 라이브 리로드가 적용된 브라우저에서 미리 보기
...

필수 사항: Node.js 22+, FFmpeg

아이디어가 필요하신가요? Showcase를 탐색하여 시청하고, 읽고, 실행하고, 리믹스할 수 있는 완성된 비디오들을 확인하세요.

• 제품 출시 영상 및 기능 발표
• 애니메이션 코드 디프(diff), 내레이션 및 캡션을 포함한 PR 워크스루
• 데이터 시각화, 차트 레이스, 지도 애니메이션
• 키네틱 캡션, 오버레이 및 음악이 있는 소셜 비디오
• 문서-비디오, PDF-비디오, 웹사이트-비디오 설명 영상
• 자동화된 콘텐츠 파이프라인을 위한 재사용 가능한 모션 그래픽

frame.md — 비디오를 위해 준비된 디자인 시스템.

모든 브랜드는 design.md를 가지고 있습니다.

하지만 그 어떤 것도 카메라를 위해 작성되지는 않았습니다. frame.md가 바로 빠진 번역 계층입니다: 이 프레임워크는 웹 컨텍스트의 디자인 사양을 가져와 비디오 프레임에 맞게 역변환합니다 — 동일한 토큰, 동일한 규칙이지만 AI 에이전트가 규모를 추측하거나 웹 크롬(web chrome)에 의존하지 않고 프로모션 비디오를 구성할 수 있도록 재작성됩니다.

출력물은 DESIGN.md입니다.

당신의 전체 도구 체인(toolchain)이 읽을 수 있도록 확장됩니다. 원자적 요소(Atoms)는 신성하게 유지되며, 조합(Composition)은 자유롭습니다. 숫자는 스크립트에서 나옵니다.

Biennale Yellow
|
BlockFrame
|
Blue Professional
|
Bold Poster
|
Broadside
|
Capsule
|
Cartesian
|
Cobalt Grid
|
Coral
|
Creative Mode
|

hyperframes.dev/design에서 모두 탐색하고 리믹스해보세요.

비디오를 HTML로 정의하세요. 타이밍과 트랙을 위한 데이터 속성(data attributes)을 추가합니다. GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 자체 프레임 어댑터(frame adapter)를 사용하여 탐색 가능한 애니메이션을 구현할 수 있습니다.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
<video
class="clip"
...

브라우저에서 즉시 미리보기 할 수 있습니다. 로컬 또는 Docker에서 렌더링합니다. 렌더러는 헤드리스 Chrome(headless Chrome)에서 각 프레임을 탐색하고 FFmpeg으로 결과를 인코딩하므로, 동일한 입력이 동일한 비디오를 생성합니다.

HyperFrames는 오픈 소스 렌더링 엔진이며, HTML 네이티브 비디오 제작 주변의 성장하는 도구 세트를 포함합니다.

사용 가능한 블록과 구성 요소를 설치하세요:

npx hyperframes add flash-through-white # 셰이더 전환 (shader transition)
npx hyperframes add instagram-follow # 소셜 오버레이 (social overlay)
npx hyperframes add data-chart # 애니메이션 차트 (animated chart)

hyperframes.heygen.com/catalog에서 카탈로그를 탐색하세요.

HTML 네이티브: 구성 요소는 데이터 속성을 가진 HTML 파일입니다. React 요구 사항이나 독점 타임라인 형식이 필요 없습니다.에이전트 친화적 (Agent-friendly): 에이전트는 이미 HTML을 작성하며, CLI는 기본적으로 비대화형(non-interactive)입니다.결정론적 (Deterministic): 동일한 입력은 동일한 프레임, 동일한 출력을 만듭니다. CI, 회귀 테스트(regression tests), 자동 렌더링에 적합합니다.빌드 단계 없음: index.html 구성 요소가 있는 그대로 재생되며 브라우저에서 직접 미리보기 할 수 있습니다.어댑터 기반 애니메이션: GSAP, CSS 애니메이션, Lottie, Three.js, Anime.js, WAAPI 또는 사용자 지정 런타임(runtime)을 가져올 수 있습니다.오픈 소스: Apache 2.0 라이선스를 따르며, 렌더링당 비용이나 상업적 사용 임계값이 없습니다.

HyperFrames는 Remotion에서 영감을 받았습니다. 두 도구 모두 headless Chrome과 FFmpeg을 사용하여 비디오를 렌더링합니다. 주요 차이점은 작성 모델입니다: Remotion은 React 컴포넌트를 기반으로 하는 반면, HyperFrames는 인간과 에이전트가 모두 쉽게 작성할 수 있는 순수 HTML을 기반으로 합니다.

HyperFrames | Remotion |
| :--- | :--- | :--- |
| 작성 모델 (Authoring) | HTML + CSS + 탐색 가능한 애니메이션 | React 컴포넌트 |
| 빌드 단계 (Build step) | 없음; index.html을 그대로 재생함 | 빌더 필요 (Bundler required) |
| 에이전트 핸드오프 (Agent handoff) | 순수 HTML 파일 | JSX / React 프로젝트 |
| 라이브러리-클럭 애니메이션 | 어댑터를 통해 탐색 가능하고 프레임 정확도가 높음 | 벽시계(Wall-clock) 애니메이션 패턴은 주의 필요 |
| 분산 렌더링 (Distributed rendering) | 로컬 및 AWS Lambda 렌더링 경로 지원 | Remotion Lambda, 성숙한 클라우드 렌더러 |
| 라이선스 (License) | Apache 2.0 | Source-available Remotion License |

전체 비교는 HyperFrames vs Remotion 가이드를 참조하세요.

전체 문서: hyperframes.heygen.com/introduction

HyperFrames는 HeyGen에서 프로덕션에 사용되고 있으며, tldraw, TanStack 등 커뮤니티 팀들이 ADOPTERS.md에 예시를 제공하고 있습니다. 만약 귀하의 팀이 HyperFrames를 사용한다면 PR을 열어주세요.

• 질문 및 아이디어: Discord
• 버그 및 기능 요청: GitHub Issues
• 보안 보고서: SECURITY.md
• 기여: CONTRIBUTING.md

해당 저장소는 packages/producer/tests/**/output.mp4 경로에 골든 회귀 테스트 기준선(golden regression-test baselines)을 위해 Git LFS를 사용합니다.

약 240 MB의 .mp4 파일들입니다). 개발을 위해 전체 리포지토리를 클론하는 경우, 먼저 Git LFS를 설치해야 합니다:

# macOS
brew install git-lfs
# Ubuntu / Debian
...

소스 파일만 필요한 경우, LFS 콘텐츠는 건너뛸 수 있습니다:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git