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

HyperFrames는 React 없이 순수 HTML 파일을 비디오 컴포지션으로 쓰는 오픈소스 프레임워크다.

HTML, CSS, GSAP만으로 장면을 구성하고 MP4로 렌더링한다. index.html이 그대로 재생되며 빌드 단계가 없어, AI 코딩 에이전트가 HTML을 직접 작성하는 흐름에 맞춰졌다.

• npx skills add heygen-com/hyperframes로 Claude Code, Codex 같은 에이전트에 패턴을 학습시킨다.
• Claude Code에서는 /hyperframes, /hyperframes-cli, /gsap 슬래시 명령을 바로 쓸 수 있고, OpenAI Codex 플러그인과 Cursor 플러그인도 제공한다.
• npx hyperframes init, preview, render로 프로젝트를 시작하고, hyperframes capture <url>로 웹사이트를 비디오로 바꿀 수 있다.

Frame Adapter로 GSAP, Lottie, CSS, Three.js를 연결할 수 있고, 50개 이상의 사전 제작 블록·컴포넌트와 결정적 렌더링을 제공한다.

Remotion과 비교하면 작업물이 React가 아니라 HTML이고, 라이선스는 Apache 2.0이다. 현재는 단일 머신 렌더링만 지원하며, 패키지는 CLI, core, engine(Puppeteer + FFmpeg), producer, studio, player, shader-transitions로 나뉜다. 전체는 TypeScript 기반이다.