TL;DR

HyperFrames는 HTML/CSS와 미디어를 그대로 사용해 프레임 단위로 재현 가능한 MP4 비디오를 생성하는 오픈소스 TypeScript 프레임워크이다. 구성은 index.html과 data-* 어트리뷰트로 정의하고, GSAP·Lottie·Three.js 같은 어댑터로 seekable 애니메이션을 노출하면 엔진이 headless Chrome으로 프레임을 캡처해 FFmpeg로 인코딩한다. CLI로 로컬 미리보기와 렌더를 제공하고, 에이전트 스킬을 통해 Claude Code 등 코딩 에이전트가 자동으로 HTML 구성을 생성할 수 있다. 로컬·Docker·AWS Lambda 렌더링 경로를 모두 지원하며 결정론적 출력으로 CI 회귀 테스트에 적합하다. 장점은 번들·빌드 스텝 없이 HTML 파일만으로 즉시 플레이 가능하고 에이전트 친화적인 워크플로를 제공한다는 점이다. 제한점은 Puppeteer/Headless Chrome과 FFmpeg 같은 시스템 의존성이 필요하고, 레퍼런스 골든 파일은 Git LFS로 관리되어 전체 클론 시 추가 설정이 요구된다는 점이다.

주요 기능

• HTML과 data-* 어트리뷰트로 구성 파일을 정의해 비디오를 생성
• 로컬 CLI로 실시간 미리보기(npx hyperframes preview)와 MP4 렌더링(npx hyperframes render) 제공
• GSAP·Lottie·Three.js 등 어댑터를 통해 seekable(프레임 단위) 애니메이션 연동
• Puppeteer(Headless Chrome)로 각 프레임을 재생·캡처하고 FFmpeg로 인코딩해 결정론적 출력 보장
• 카탈로그 블록 추가(npx hyperframes add ...)로 재사용 가능한 전환·차트·오버레이 활용

어떻게 동작하는가

비디오를 HTML 문서로 정의하고 각 요소에 data-start/data-duration 같은 메타데이터를 부여한다. 런타임 어댑터(GSAP, CSS, Lottie 등)는 seekable 타임라인을 제공하고, 엔진은 Puppeteer로 각 프레임을 'seek'해 캡처한 뒤 FFmpeg로 인코딩해 MP4를 생성한다.

해결 문제

웹 디자인·애니메이션 자산을 그대로 사용해 프레임 정확의 MP4 비디오를 자동으로 생성하고, 에이전트 기반 자동화·CI 환경에서 결정론적 렌더링을 가능하게 한다.

지금 주목받는 이유

에이전트 통합(코딩 스킬)과 HTML-네이티브 접근으로 자동화된 영상 제작 파이프라인을 단순화하고, 결정론적 렌더링을 CI에 적용할 수 있어 콘텐츠 자동화 워크플로에서 주목을 받았다.

차별점

• HTML-native 저작 모델로 React/JSX 번들 단계 없이 index.html 단일 파일로 재생 가능 — 빌드 스텝 불필요
• 에이전트 친화적 스킬과 frame.md 규격으로 AI 코딩 에이전트가 직접 유효한 구성과 애니메이션을 작성할 수 있음
• 프레임 단위 seek와 결정론적 캡처를 통해 CI 회귀 테스트에 적합한 출력 재현성 보장
• 로컬과 AWS Lambda 기반 분산 렌더링 경로를 모두 지원해 스케일 아웃 배포가 가능

사용 사례

• 제품 출시·기능 발표용 10~30초 소개 영상 자동 생성 파이프라인
• 데이터 시각화(차트 레이스)·문서(또는 PDF)→비디오 변환 자동화
• 코드 변경사항을 보여주는 PR 워크플로에서 애니메이션 코드·캡션 포함한 동영상 산출
• 에이전트(Claude Code 등)를 통해 텍스트 프롬프트로 비디오를 생성하는 자동화 서비스 백엔드

시작하기

Node.js >=22와 FFmpeg 설치 후, 새 프로젝트를 초기화하고 미리보기·렌더를 실행한다: npx hyperframes init my-video cd my-video npx hyperframes preview npx hyperframes render

요구사항

• Node.js >= 22
• FFmpeg (시스템에 설치되어 PATH에 노출되어야 함)
• Headless Chrome 환경 (Puppeteer 사용)
• Git LFS(레포 전체를 클론해 골든 MP4 리소스를 내려받을 경우)

이미지 분석