HyperFrames: HTML·CSS 애니메이션을 MP4로 만드는 영상 프레임워크
HTML·CSS·미디어와 탐색 가능한 애니메이션을 프레임별로 캡처해 MP4로 만드는 오픈소스 영상 제작 프레임워크예요. CLI·편집 화면·에이전트 스킬을 제공해 제품 소개, 데이터 시각화, 자막 영상 제작을 코드 중심으로 자동화해요.
주요 기능
- HTML data 속성으로 합성 크기·시작 시간·길이·트랙을 정의하고 브라우저 미리보기와 MP4 출력을 연결해요.
- GSAP·CSS·Lottie·Three.js·Anime.js·WAAPI 및 사용자 프레임 어댑터로 원하는 시각의 애니메이션 상태를 재현해요.
- CLI에서 프로젝트 생성·검사·프레임 점검·렌더링과 편집 가능한 카탈로그 블록 추가를 지원해요.
- 9개 공개 스킬 가운데 기본 4개는 영상 제작·CLI·카탈로그·미디어 사용을 맡으며 나머지는 필요할 때 설치할 수 있어요.
- 로컬·Docker 렌더링 외에 AWS Lambda 분산 렌더링과 Studio 저작 흐름을 제공해요.
구조
HTML 합성 파일 → 코어의 구성 해석·시간 제어 → Puppeteer/헤드리스 Chrome의 프레임 캡처 → FFmpeg 인코딩·오디오 믹싱 순서예요. React나 전용 타임라인 형식이 필수는 아니며, 에이전트 스킬은 이 파이프라인에 맞게 문서를 작성하도록 안내해요.
누구에게 쓸모 있나요
HTML·CSS에 익숙한 개발자, AI 코딩 에이전트로 짧은 제품 영상·설명 영상·모션 그래픽을 만들거나 반복 렌더링 파이프라인을 구축하려는 사용자.
설치 전 준비
- CLI는 Node.js 22 이상과 FFmpeg가 필요해요. 기준 커밋의 CLI manifest 버전은 0.9.13이며 실제 설치되는 npm 릴리스와 같다고 단정하지 않았어요.
- 렌더러는 헤드리스 Chrome을 사용해요. 영상 해상도·길이에 따른 CPU·메모리·디스크 여유와 글꼴·미디어 파일을 준비해야 해요.
- 코딩 에이전트 사용은 해당 도구의 스킬/플러그인 지원과 별도 모델 이용 환경이 필요해요.
- 로컬 Node.js CLI·브라우저 미리보기·Docker·AWS Lambda
- Studio 앱은 공식 README에 macOS·Windows·Linux(.deb) 다운로드가 안내돼요. 이 등록에서 OS별 실행을 검증하지 않았어요.
설치 방법
CLI로 프로젝트 만들기
별도 전역 설치 없이 공식 README의 npx 흐름을 사용할 수 있어요. 아래 명령은 문서 안내이며 이번 등록에서는 실행하지 않았어요.
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render코딩 에이전트 기본 스킬
CLI 버전과 일치하는 릴리스 태그에서 기본 스킬을 받는 공식 경로예요. 처음에는 기본 세트로 시작하고 전체 9개 설치는 필요할 때 선택해요.
npx hyperframes skills update사용 방법
- 계획한 길이·비율에 맞춰 HTML에 data-composition-id·data-width·data-height와 클립별 시작·길이·트랙을 지정해요.
- 애니메이션은 특정 시간으로 이동할 수 있도록 구성하고 미리보기·검사 후 렌더링해요. 브라우저에서 보기 좋다는 사실만으로 최종 영상 일치를 보장하지 않습니다.
- 에이전트에는 /hyperframes로 영상의 목적·길이·스타일·사용할 자료를 구체적으로 요청해요. 예: 10초 제품 소개 영상, 제목 페이드인·배경 영상·잔잔한 음악.
- npx hyperframes add data-chart 등으로 공식 카탈로그 컴포넌트를 프로젝트의 편집 가능한 소스로 추가할 수 있어요.
비용과 API 키
코어는 Apache-2.0이며 README는 렌더당 이용료나 상업 이용 매출 제한이 없다고 설명해요. 로컬 장비, 외부 에이전트/모델 API, AWS 인프라 비용은 별도예요. Studio는 무료 사용 경로가 있지만 Pro의 영상·음성·음악 생성 모델과 일부 스킬은 별도 요금/조건이 적용돼요.
라이선스
루트 LICENSE와 CLI manifest에서 Apache-2.0을 확인했어요. 재배포 시 라이선스·저작권·변경 고지 등 적용 조건을 지켜야 해요. 외부 글꼴·음원·영상·모델 결과의 이용 권리나 연결 서비스 약관까지 이 라이선스가 보장하지는 않습니다.
주의사항과 알려진 이슈
- HTML과 외부 스크립트를 브라우저에서 실행하는 렌더링 구조예요. 출처 불명 프로젝트·CDN 스크립트·미디어는 검토하고 민감한 로컬 파일이나 자격증명이 있는 환경과 분리하는 것이 좋습니다.
- 같은 입력의 재현 가능한 프레임을 목표로 하지만 원격 미디어·글꼴·네트워크·런타임 버전 등 조건이 달라지면 결과도 달라질 수 있어요. 실제 렌더 성능·화질·안정성은 별도 검증이 필요해요.
- HyperFrames 소스 체크아웃에서 프로젝트 로컬 스킬 설치를 실행하면 추적 중인 skills/와 겹쳐 미커밋 수정이 덮어써질 수 있다고 README가 경고해요.
- skills add의 레지스트리는 main보다 늦을 수 있어요. npx skills update heygen-com/hyperframes는 설치된 스킬 이름을 기대해 일치 오류가 날 수 있으므로 공식 HyperFrames 갱신 명령과 구분해야 해요.
- 클라우드 생성·호스팅·렌더링을 선택하면 프로젝트 자료가 외부 서비스로 전달될 수 있어요. 민감한 콘텐츠·소재의 저작권·서비스 요금과 보관 정책을 먼저 확인해야 해요.
확인 범위
확인 날짜: 2026-11-05
확인 커밋: bd6cff8157a1a0ed5075527e673cc4f321fe9123
확인한 범위: 공식 GitHub 저장소 상태·기준 커밋·README·CLI manifest·라이선스·보안 정책과 스킬 갱신 문서 변경을 정적으로 확인했어요. README를 기준 커밋에서 다시 읽어 내용 일치를 확인했어요.
확인 한계: 프로그램·스킬 설치, 영상 생성·렌더링, 계정 연결·API 키 사용·비용 결제는 하지 않았어요. OS별 호환성·성능·보안 감사와 외부 유료 서비스 최신 가격은 미검증이에요.