HyperFrames

HTML·CSS·미디어·seekable animation을 에이전트 친화 MP4 영상으로 렌더링하는 프레임워크

npx skills add heygen-com/hyperframes --full-depth

HyperFrames는 HTML/CSS와 미디어를 MP4로 렌더링하는 오픈소스 프레임워크입니다. 에이전트 스킬, CLI, preview/render 루프, FFmpeg 인코딩으로 제품 영상과 PR walkthrough를 코드 workflow로 만듭니다.

판단

이럴 때 씁니다

  • 제품 소개, 기능 발표, PR walkthrough, docs-to-video 같은 반복 영상 제작을 코드/에이전트 workflow로 만들고 싶을 때.
  • HTML/CSS 실력과 디자인 토큰을 활용해 MP4 결과물을 자동 생성하고 싶을 때.
  • Claude Code, Codex, Cursor 같은 에이전트에게 영상 제작 루프를 명시적으로 가르치고 싶을 때.
  • 브라우저 preview와 로컬 render를 반복하며 CI나 자동 콘텐츠 파이프라인까지 생각할 때.

이럴 땐 쓰지 마세요

  • 수작업 편집, 복잡한 컷 편집, 촬영본 중심 편집이 핵심이면 일반 NLE가 더 맞습니다.
  • Node 22+와 FFmpeg를 설치할 수 없는 환경에서는 도입 마찰이 큽니다.
  • 단일 썸네일이나 정적 이미지 export만 필요하면 OpenPencil이나 일반 렌더 도구가 더 가볍습니다.
  • 브랜드 모션 규칙이 없으면 에이전트가 만든 영상의 일관성이 쉽게 흔들립니다.

차별점

  • README의 첫 진입점이 에이전트 스킬입니다. Claude Code, Cursor, Gemini CLI, Codex 등에서 `/hyperframes` 기반 제작 루프를 가르칩니다.
  • HTML/CSS와 seekable animation을 MP4로 렌더링하므로 웹 개발자가 이미 아는 표면으로 영상을 만듭니다.
  • `npx hyperframes init`, `preview`, `render` CLI가 있어 에이전트 없이도 프로젝트를 만들고 브라우저 preview와 MP4 render를 반복할 수 있습니다.
  • `frame.md`를 통해 웹 문맥의 design spec을 영상 프레임용 규칙으로 바꾸려는 별도 설계 층을 둡니다.

워크플로

  1. 01Node.js 22 이상과 FFmpeg 설치를 먼저 확인합니다.
  2. 02`npx skills add heygen-com/hyperframes`로 에이전트에 제작 루프를 가르치거나, CLI로 직접 시작합니다.
  3. 03`npx hyperframes init my-video`로 프로젝트를 만들고 media asset과 frame.md/design rule을 정리합니다.
  4. 04`npx hyperframes preview`로 브라우저에서 timing과 animation을 확인한 뒤 `npx hyperframes render`로 MP4를 뽑습니다.

주요 명령

명령설명
npx skills add heygen-com/hyperframesAI coding agent에 HyperFrames 제작 스킬을 설치합니다
npx hyperframes init my-video새 영상 프로젝트를 scaffold합니다
npx hyperframes preview브라우저 live reload preview를 실행합니다
npx hyperframes render프로젝트를 MP4로 렌더링합니다

함정

설치 전에 확인하세요

  • Node.js 22 이상과 FFmpeg가 필요합니다. 오래된 Node LTS 이미지나 FFmpeg 없는 CI에서는 먼저 런타임을 맞춰야 합니다.
  • 영상 결과는 HTML/CSS, media asset, timing, FFmpeg 인코딩의 합입니다. 에이전트가 만든 결과도 preview 검수가 필요합니다.
  • 브랜드 영상에는 frame.md 같은 디자인 규칙을 먼저 정리해야 결과 일관성이 좋아집니다.
  • 전통 영상 편집기의 timeline UI를 대체하는 도구가 아니라 코드 기반 자동 제작 루프입니다.

직접 써본 메모

HyperFrames는 에이전트 시대의 영상 제작을 꽤 명확하게 겨냥합니다. “HTML을 쓰고 영상을 렌더한다”는 표면은 단순하지만, 실제 차별점은 스킬이 에이전트에게 계획, HTML 작성, animation wiring, lint, preview, render 루프를 가르친다는 데 있습니다.

이 도구가 맞는 작업은 반복 가능한 영상입니다. 제품 릴리스, PR 설명, 데이터 차트, 문서 요약처럼 소스 데이터와 템플릿이 있고 여러 번 뽑아야 하는 영상에는 코드 기반 렌더러가 유리합니다. 웹 개발자가 가진 CSS와 component 감각도 그대로 쓸 수 있습니다.

반대로 감각적인 편집을 전부 자동으로 해결해 주는 도구는 아닙니다. Node 22와 FFmpeg가 필요하고, asset 품질·timing·브랜드 motion rule은 여전히 사람이 기준을 잡아야 합니다. preview를 통과한 뒤 render하는 검수 루프를 전제로 써야 합니다.

비교

OpenPencil이 .fig/.pen 디자인 원본을 읽고 수정하는 도구라면, HyperFrames는 HTML/CSS 기반 결과물을 영상으로 렌더링하는 제작 파이프라인입니다. 단순 이미지 export가 아니라 시간축, 음악, caption, chart race 같은 영상 요소가 필요할 때 차이가 납니다. 일반 코딩 에이전트만으로 FFmpeg와 animation 코드를 임기응변으로 짜게 하는 것보다 제작 루프가 더 명시적입니다.

최근 변경

v0.7.76에서 Plan v2의 희소 청크 비디오 디렉터리 생성과 회전 피벗 진단이 개선됐다.

공식 변경 내역