▲

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

 (github.com/heygen-com)
6P by xguru 4시간전 | ★ favorite | 댓글 1개
  • 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 <url> 명령으로 웹사이트를 캡처하여 비디오로 변환하는 전체 파이프라인 지원
  • 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 기반

함께 보면 좋은 글 β

▲
xguru 4시간전  [-]

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

답변달기