HyperFrames는 HeyGen이 공개한 오픈소스 비디오 렌더링 프레임워크다. 비디오를 React 컴포넌트가 아닌 HTML 파일로 작성한다. 빌드 단계가 없고, AI 에이전트가 이미 HTML을 잘 알기 때문에 에이전트 주도 영상 제작에 최적화되어 있다. Apache 2.0으로 완전히 오픈소스다.

핵심 설계 원칙

• HTML 네이티브: data 속성으로 컴포지션 정의. React·DSL 없음
• 에이전트 우선: CLI가 기본적으로 비대화형(non-interactive), 에이전트 파이프라인에 최적화
• 결정론적 렌더링: 동일 입력 = 동일 출력. 자동화 파이프라인에 신뢰 가능
• Frame Adapter 패턴: GSAP, Lottie, CSS, Three.js 등 원하는 애니메이션 런타임 사용 가능

컴포지션 예시

<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">
  <video
    id="clip-1"
    data-start="0"
    data-duration="5"
    data-track-index="0"
    src="intro.mp4"
    muted playsinline
  ></video>
  <img
    id="overlay"
    class="clip"
    data-start="2"
    data-duration="3"
    data-track-index="1"
    src="logo.png"
  />
</div>

data 속성으로 타임라인을 정의하고, hyperframes preview로 브라우저에서 즉시 확인, hyperframes render로 MP4 출력.

AI 에이전트와 함께 사용

# Claude Code, Cursor, Gemini CLI에 스킬 설치
npx skills add heygen-com/hyperframes

설치 후 에이전트에게 자연어로 영상 제작 요청:

“Using /hyperframes, create a 10-second product intro with a fade-in title and background music.”

HyperFrames vs Remotion

설치 및 시작

# 새 프로젝트 시작
npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 브라우저 라이브 프리뷰
npx hyperframes render    # MP4 렌더링

요구사항: Node.js >= 22, FFmpeg

카탈로그

50개 이상 레디메이드 블록 제공:

npx hyperframes add flash-through-white   # 셰이더 트랜지션
npx hyperframes add instagram-follow      # SNS 오버레이
npx hyperframes add data-chart            # 애니메이션 차트

사용 대상

• AI 에이전트로 마케팅·설명 영상을 자동 생성하고 싶은 팀
• React 없이 HTML CSS로 결정론적 비디오 파이프라인이 필요한 개발자
• TikTok, 유튜브 쇼츠 등 SNS 영상을 자동화하고 싶은 크리에이터

관련 문서

• seedance — 자연스러운 모션의 AI 동영상 생성 모델
• a2ui — 에이전트가 UI를 생성하는 프레임워크 독립 표준