# HyperFrames - HTML로 비디오를 만드는 AI 에이전트 전용 오픈소스 프레임워크

> Clean Markdown view of GeekNews topic #28961. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=28961](https://news.hada.io/topic?id=28961)
- GeekNews Markdown: [https://news.hada.io/topic/28961.md](https://news.hada.io/topic/28961.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-04-28T09:46:01+09:00
- Updated: 2026-04-28T09:46:01+09:00
- Original source: [github.com/heygen-com](https://github.com/heygen-com/hyperframes)
- Points: 8
- Comments: 1

## Topic Body

- Remotion과 비슷하게 HTML + CSS + GSAP만으로 영상을 제작하고 MP4로 렌더링  
- React나 독자적 DSL 없이 **순수 HTML 파일**이 곧 비디오 컴포지션이며, 빌드 단계 없이 index.html이 그대로 재생됨  
- Claude Code, Codex 등의 AI 코딩 에이전트가 HTML을 직접 작성하는 워크플로우에 최적화  
  - `npx skills add heygen-com/hyperframes`로 **에이전트에 프레임워크 패턴 학습** 가능  
  - Claude Code에서는 `/hyperframes`, `/hyperframes-cli`, `/gsap` 슬래시 명령으로 직접 호출 가능  
  - **OpenAI Codex 플러그인,** **Cursor 플러그인** 도 별도 제공  
- 사용 방식   
  - 원하는 걸 설명: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"  
  - 기존 콘텐츠를 비디오로:  
    - "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."  
    - "Summarize the attached PDF into a 45-second pitch video using /hyperframes."  
    - "Turn this CSV into an animated bar chart race using /hyperframes."  
  - 특정 포맷: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."  
  - 반복 - 에이전트를 비디오 에디터 처럼:  
    - "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."  
    - "Add a lower third at 0:03 with my name and title."  
- 수동 시작 방법  
  ```  
  npx hyperframes init my-video  
  cd my-video  
  npx hyperframes preview      # preview in browser (live reload)  
  npx hyperframes render       # render to MP4  
  ```  
  - `hyperframes init` 이 스킬을 자동 설치하므로, 그 다음엔 아무때나 사용 가능   
- **Frame Adapter 패턴**으로 GSAP, Lottie, CSS, Three.js 등 원하는 애니메이션 런타임을 자유롭게 연결  
- 동일 입력 = 동일 출력을 보장하는 **결정적(Deterministic) 렌더링**으로 자동화 파이프라인에 적합  
- 50개 이상의 **사전 제작 블록·컴포넌트** 카탈로그 제공(셰이더 트랜지션, 소셜 오버레이, 데이터 차트 등), `npx hyperframes add <블록명>`으로 설치 가능  
  ```  
  npx hyperframes add flash-through-white   # shader transition  
  npx hyperframes add instagram-follow      # social overlay  
  npx hyperframes add data-chart            # animated chart  
  ```  
- `hyperframes capture &lt;url&gt;` 명령으로 **웹사이트를 캡처하여 비디오로 변환**하는 전체 파이프라인 지원  
- Remotion과 비교시 핵심 차이는 **작업물**(HTML vs React)과 **라이선스**  
  - HyperFrames: Apache 2.0(OSI 인증) — **완전히 상업적 사용 가능**하며, 렌더링당 비용이나 좌석 상한, 회사 규모 제한 없음  
  - Remotion: 소스 공개(source-available) 커스텀 라이선스 - 3인 초과 회사에서는 유료 회사 라이선스 필요  
  - Hyperframe은 빌드 단계없이 index.html 을 직접 재생, Remotion은 bundler 필요  
  - GSAP·Anime.js·Motion One 같은 라이브러리 클럭 애니메이션은 HyperFrames에서 seekable하고 프레임 정확도를 유지하지만, Remotion에서는 렌더링 시 wall-clock으로 재생  
  - Remotion은 Lambda 분산 렌더링이 프로덕션 레디, HyperFrames는 현재 단일 머신 렌더링만 지원  
- 패키지 구성: CLI, core(타입·파서·린터), engine(Puppeteer + FFmpeg 캡처), producer(전체 렌더링), studio(브라우저 에디터), player(웹 컴포넌트), shader-transitions  
- Apache 2.0 라이선스, TypeScript 기반

## Comments



### Comment 56438

- Author: xguru
- Created: 2026-04-28T09:47:02+09:00
- Points: 1

Remotion 에서 영감받아서 거의 비슷한데 React를 제거하고 아예 HTML로 만드는 도구입니다.  
일단 저희는 소규모 회사라 Remotion 을 그냥 쓰는데요.   
Remotion은 3인까지만 무료여서, 좀 더 큰 규모에서는 이 Hyperframes 를 쓰시면 될듯 하네요.