npx skills add heygen-com/hyperframes)이 동봉돼, AI에게 "10초짜리 제품 인트로 만들어줘"라고 시키는 워크플로가 1급 시민입니다. (저장소: heygen-com/hyperframes · TypeScript 모노레포 · TrendShift 23위 · Apache-2.0)이 레포가 무엇을 하는 물건인가.
비결은 두 가지 발상입니다. ① 영상의 모든 장면을 HTML 요소 + 타이밍 데이터 속성(data-start·data-duration·data-track-index)으로 선언하고, ② 애니메이션은 GSAP·CSS·Lottie·Three.js 같은 시킹 가능한 (seekable, 임의 시점으로 점프 가능한) 타임라인으로 작성합니다. 그러면 렌더러가 매 프레임의 정확한 시점으로 점프해 화면을 캡처할 수 있고 — 결과 영상이 결정적이 됩니다.
왜 "에이전트용"인가? LLM은 영상 편집 GUI를 못 다루지만 HTML은 원어민 수준으로 씁니다. HyperFrames는 영상 제작을 에이전트가 가장 잘하는 형식(마크업+코드)으로 번역한 뒤, 동봉된 스킬로 제작 루프(기획→HTML 작성→애니메이션 연결→린트→프리뷰→렌더)까지 가르칩니다. Claude Code·Cursor·Gemini CLI·Codex 모두 지원.
트렌딩 이유 · 경쟁 대비 장점.
HTML→영상 분야엔 이미 강자들이 있습니다 — React 컴포넌트로 영상을 만드는 Remotion, 캔버스 제너레이터 기반 Motion Canvas. HyperFrames의 포지션은 더 낮은 추상화 + 더 자유로운 라이선스 + 에이전트 우선입니다.
| 비교 항목 | Remotion | HyperFrames |
|---|---|---|
| 저작 모델 | React 컴포넌트 (전용 모델 학습 필요) | 순수 HTML + 데이터 속성 (웹 지식 그대로) |
| 라이선스 | 소스 공개, 일정 규모 이상 유료 | Apache-2.0 — 렌더당 과금·좌석 제한 없음 |
| 에이전트 연동 | 일반 React 문서에 의존 | 전용 스킬 4종 동봉 (remotion 마이그레이션 스킬까지) |
| 애니메이션 | React 훅 기반 | GSAP·CSS·Lottie·Three.js·WAAPI — 기존 생태계 차용 |
브라우저를 실시간 녹화하면 프레임 드랍·타이밍 흔들림으로 매번 다른 영상이 나옵니다. 프리미어 같은 GUI 도구는 자동화 파이프라인에 넣을 수 없죠.
타임라인을 일시정지 상태로 만들고 0/30초, 1/30초… 시점으로 정확히 점프(seek)하며 헤드리스 Chrome에서 캡처 → FFmpeg 인코딩. 느리더라도 항상 같은 결과 — CI에서 영상을 "빌드"할 수 있게 됩니다.
또 하나의 신선한 개념이 frame.md입니다 — 회사의 design.md(웹용 디자인 시스템)를 "카메라용"으로 뒤집어 쓴 명세로, 에이전트가 브랜드 톤을 지키며 영상을 조립할 수 있게 합니다. 같은 토큰·같은 규칙을 화면 프레임 기준으로 재기술한 것으로, 디자인 시스템의 적용 범위를 영상으로 확장하는 시도입니다.
bun 모노레포 — 11개 패키지 + 레지스트리 + 스킬.
| 레이어 | 기술 | 역할 |
|---|---|---|
| 코어 | @hyperframes/core·engine·producer | 컴포지션 파싱 → 헤드리스 Chrome 구동 → 인코딩·오디오 믹싱. producer(619)·studio(380)·cli(249)가 대형 패키지. |
| CLI | @hyperframes/cli | init·preview(라이브 리로드)·lint·inspect·render. |
| 편집 UI | @hyperframes/studio + player | 브라우저에서 컴포지션 프리뷰·편집. |
| 분산 렌더 | @hyperframes/aws-lambda | Lambda 렌더 스택 배포 — 노트북·CI에서 원격 렌더 구동. |
| 분산 렌더 (GCP) | @hyperframes/gcp-cloud-run | GCP Cloud Run 기반 분산 렌더 스택. |
| 공개 SDK | @hyperframes/sdk · sdk-playground | 외부 통합용 공개 SDK API. |
| 효과 | @hyperframes/shader-transitions | 셰이더 기반 장면 전환. |
| 재료 | registry/ (blocks 278 · components 147 · examples 72) | 차트·캡션·오버레이·지도 등 재사용 블록 카탈로그. |
| 에이전트 | skills/ 16종 | hyperframes(제작 루프)·website-to-video·remotion-to-hyperframes(이주)·hyperframes-registry 외 12종. |
| 런타임 도구 | Bun + Node 22+ + FFmpeg + Chrome | 빌드는 bun, 렌더는 Chrome+FFmpeg. |
HTML 한 장이 MP4가 되기까지.
설계의 중심엔 "일시정지된 타임라인" 규약이 있습니다. 애니메이션 라이브러리가 뭐든(GSAP·Lottie·Three.js·CSS·WAAPI) window.__timelines에 paused 상태로 등록하기만 하면, 엔진이 임의 시점으로 seek할 수 있습니다 — 어댑터 인터페이스 하나로 기존 웹 애니메이션 생태계 전체를 영상 소스로 만든 것이죠. 미디어 요소(video/audio)도 같은 데이터 속성 규약으로 트랙에 배치되고, producer가 인코딩 단계에서 오디오를 믹싱합니다.
스톱모션 애니메이션 촬영과 같습니다. 배우(웹페이지)에게 "1.5초 시점의 포즈를 취해"라고 지시하고 사진을 찍고, 다음 프레임 포즈로 또 찍고 — 이걸 초당 30번씩 반복해 이어 붙이는 겁니다. 실연(라이브 재생)이 아니라 연출(시킹)이라 NG가 없습니다.
어떤 폴더가 무슨 일을 하나.
| 위치 | 주목할 점 |
|---|---|
packages/producer/ | 렌더 큐·인코딩·믹싱의 실무 복잡도가 여기 모임(619 파일). studio(380)·cli(249)와 함께 대형 패키지군. |
skills/remotion-to-hyperframes/ | 경쟁 프레임워크 사용자를 스킬로 데려오는 이주 전략 — 70개 파일짜리 정성. |
registry/blocks/ | 차트 레이스·캡션·지도 등 — 영상 만들기 전 여기부터 뒤지면 절반은 완성. |
.claude-plugin/ 외 3종 | Claude·Codex·Cursor 플러그인 매니페스트 병행 — 멀티 에이전트 배포의 표준 풍경. |
이 레포에서 배울 만한 것 + 어디를 보면 되는지.
GSAP·Lottie·Three.js를 전부 지원하는 비결이 어댑터 폭발이 아니라 "paused 타임라인 + seek(t)" 계약 하나라는 점 — 인터페이스 설계의 좋은 본보기입니다. core의 타임라인 어댑터 코드를 보세요.
프레임 캡처 동기화, 오디오 트랙 믹싱, Docker/Lambda에서의 폰트·코덱 재현성 — engine/producer는 "브라우저로 영상 만들기"의 실전 난점과 해법 모음집입니다.
"도구만 주면 에이전트는 일반 웹 문서 지식으로 어설프게 씁니다." 제작 루프(린트→프리뷰→렌더)를 스킬로 명시해 에이전트 출력 품질을 끌어올리는 접근 — skills/hyperframes/를 정독할 가치가 있습니다.
웹용 spacing·type scale은 1920×1080 프레임에선 그대로 안 통합니다. "Atoms stay sacred, composition stays free"라는 원칙으로 디자인 시스템을 영상에 이식하는 방법론.
돌리려면 무엇이 필요한가.
| 항목 | 요구사항 |
|---|---|
| 런타임 | Node.js 22+ · FFmpeg 필수. 모노레포 개발은 Bun. |
| 브라우저 | 헤드리스 Chrome/Chromium (렌더 엔진). |
| 시작 | npx hyperframes init my-video → preview → render. 에이전트는 npx skills add heygen-com/hyperframes. |
| 스케일 | 로컬/Docker 렌더 기본, 대량 렌더는 AWS Lambda 스택 배포. |
난이도별로 손에 익히는 단계.
npx hyperframes init으로 스캐폴드 → README의 launch 예제처럼 배경 비디오+타이틀+음악 3트랙을 구성 → preview로 확인 후 render. data-start/duration이 타임라인에 어떻게 반영되는지 관찰하세요.
스킬 설치 후 "제품 인트로 10초, 페이드인 타이틀, 배경 음악"을 프롬프트로 시키고, 에이전트가 린트→프리뷰→렌더 루프를 도는 과정을 관찰합니다. 스킬 없이 같은 요청을 해 결과 차이를 비교.
registry의 데이터 차트 블록을 가져와 내 데이터(예: 월별 실적)로 차트 레이스 영상을 만들어 봅니다 — "보고서를 영상으로" 파이프라인의 시제품.
같은 컴포지션을 두 번 렌더해 해시를 비교(결정성 확인)하고, 내가 쓰는 애니메이션 방식 하나를 seek 계약에 맞춰 어댑터로 등록해 봅니다.
한 주씩 따라가는 계획.
| 주차 | 주제 | 학습 자료 |
|---|---|---|
| 1주차 | 컴포지션 규약 — 트랙·클립·타이밍 | Quickstart · 실습 1 |
| 2주차 | GSAP 타임라인 — 시킹 가능한 애니메이션 작법 | GSAP 문서 · 예제 컴포지션 |
| 3주차 | 렌더 파이프라인 내부 — engine·producer | packages/ 정독 · FFmpeg 기초 |
| 4주차 | 에이전트 영상 제작 루프 | skills/ · 실습 2 |
| 5주차 | frame.md·레지스트리로 브랜드 파이프라인 | hyperframes.dev/design · 실습 3 |
본문에 나온 용어 빠른 참조.
| 용어 | 의미 |
|---|---|
| 컴포지션 | 영상 한 편을 정의하는 HTML 루트 — 해상도·트랙·클립 포함. |
| 클립 / 트랙 | 시간 구간을 가진 요소 / 클립들이 쌓이는 레이어 (data-track-index). |
| 시킹(seek) | 타임라인의 임의 시점으로 점프 — 결정적 렌더의 전제조건. |
| 결정적 렌더링 | 같은 입력이면 항상 같은 영상 — CI에서 영상을 빌드 가능하게 함. |
| GSAP | 웹 애니메이션 표준 라이브러리 — paused 타임라인으로 등록해 사용. |
| frame.md | 웹 디자인 시스템을 영상 프레임 기준으로 재기술한 명세. |
| 레지스트리 | 복사형 재료 카탈로그 (shadcn 스타일) — blocks·components·examples. |
| producer | 렌더 오케스트레이션 패키지 — Chrome 구동·FFmpeg·오디오 믹싱. |
| Remotion | React 기반 경쟁 프레임워크 — 전용 이주 스킬이 있을 만큼 의식하는 상대. |
| Lambda 렌더 | AWS Lambda로 분산 렌더링 — 대량 영상 생산용. |