HTML로 쓰면 MP4가 나와요… 오픈소스 HyperFrames, 깃허브 별 6만 2천에 사흘 동안 배포 7번
HyperFrames는 HTML·CSS와 애니메이션을 그대로 MP4 영상으로 굽는 오픈소스 도구예요. Claude Code 같은 코딩 에이전트에게 말로 시켜 모션그래픽을 만들 수 있고, 굽는 값이 따로 붙지 않는 Apache 2.0 라이선스예요.
- HyperFrames는 HTML·CSS·미디어·애니메이션을 MP4로 바꾸는 오픈소스 프레임워크예요. 같은 입력이면 같은 프레임이 나오고, index.html을 브라우저에서 바로 미리 볼 수 있어요.
- 코딩 에이전트용 스킬 21개가 함께 와요. 제품 소개 영상, 얼굴 없는 설명 영상, 말하는 영상에 자막 넣기, 10초 안쪽 모션그래픽, 음악 박자에 맞춘 영상 같은 작업 흐름이 스킬로 나뉘어 있어요.
- 라이선스는 Apache 2.0이고 README는 '굽는 횟수에 따른 요금도, 상업 사용 문턱도 없다'고 적었어요. 10월 11~13일 사흘 동안 새 버전이 7번(v0.8.146~v0.8.152) 나왔어요.
숫자가 튀어나오는 장면, 로고 등장, 화면 아래 이름표처럼 10초 안쪽의 모션그래픽을 편집 프로그램 없이 뽑아 볼 수 있어요. /motion-graphics 스킬은 MP4나 배경이 투명한 오버레이로 내보낸다고 적혀 있어서, 평소 쓰는 편집기에 얹기만 하면 돼요.
/embedded-captions는 이미 찍은 영상은 건드리지 않고 자막만 얹고, /talking-head-recut은 이름표·숫자 강조·인용문 같은 그래픽을 덧입혀요. 10월 7일 버전부터는 받아쓰기가 데스크톱 앱 안에서 돈다고 배포 글에 적혀 있어요.
Remotion과 달리 React와 번들러 없이 평범한 HTML 파일로 장면을 써요. GSAP · CSS 애니메이션 · Lottie · Three.js를 붙일 수 있고, 로컬과 AWS Lambda 두 길로 구울 수 있어요. 기존 Remotion 컴포지션을 옮기는 /remotion-to-hyperframes 스킬도 있어요.
설치 3단계 · 값 0원(굽는 요금 없음) · 라이선스 Apache 2.0 · 필요: Node.js 22 이상, FFmpeg 1) Claude Code에서: claude plugin marketplace add heygen-com/hyperframes → claude plugin install hyperframes@hyperframes (다른 에이전트는 npx skills add heygen-com/hyperframes) 2) 이렇게 시키기: "/hyperframes로 10초짜리 제품 소개 영상을 만들어 줘. 제목이 서서히 나타나고, 배경 영상과 잔잔한 음악을 깔아 줘." 3) 직접 할 때: npx hyperframes init my-video → npx hyperframes preview(브라우저 미리보기) → npx hyperframes render(MP4로 굽기)
영상마다 반복되는 숫자 카드나 제목 장면을 매번 손으로 만드는 분이라면, 가장 자주 쓰는 10초짜리 한 장면부터 HTML로 옮겨 보면 좋을 것 같아요. 다만 코딩 에이전트와 Node.js·FFmpeg 설치가 먼저라서, 터미널이 처음이면 첫 설치에 시간이 걸릴 수 있어요.
아바타 영상 회사 HeyGen이 공개한 오픈소스 HyperFrames가 깃허브 주간 트렌딩에 올라 있어요. 소개 문구는 세 문장이에요. "Write HTML. Render video. Built for agents."(HTML을 쓴다. 영상으로 굽는다. 에이전트를 위해 만들었다.)
웹 페이지를 만드는 HTML과 CSS로 장면을 쓰고, 요소마다 시작 시각과 길이를 속성으로 적어요. 그러면 프레임 단위로 똑같이 재생되는 MP4가 나와요. README는 이를 '결정적(deterministic) 출력', 곧 같은 입력이면 같은 프레임이 나온다고 설명해요. React나 전용 타임라인 형식이 필요 없고, 빌드 단계 없이 index.html을 브라우저에서 바로 미리 볼 수 있어요.
함께 오는 에이전트 스킬은 21개예요. 맨 앞의 /hyperframes가 요청을 읽고 맞는 작업 흐름으로 보내요. 흐름에는 웹사이트 주소로 만드는 제품 소개 영상(/product-launch-video), 글만으로 만드는 얼굴 없는 설명 영상(/faceless-explainer), 말하는 영상에 자막 얹기(/embedded-captions), 10초 안쪽 모션그래픽(/motion-graphics), 음악 박자에 맞춘 영상(/music-to-video), 발표 자료(/slideshow) 등이 있어요.
저장소는 10월 13일 23시 33분 기준 별 62,307개, 포크 5,583개예요. 배포가 잦아서 10월 11일부터 13일까지 사흘 동안 v0.8.146부터 v0.8.152까지 7번 나왔어요. 10월 13일의 v0.8.151은 색 보정한 영상을 내보낼 때 JPEG 프레임 갈무리 때문에 생기던 색 잡음을 없앴다고 적었어요. 직접 설치해 이번 버전을 돌려 보지는 않았어요.
