HTML 로 쓰면 영상이 나옵니다
HyperFrames · 리액트 없이 HTML 을 영상으로 렌더하는 오픈소스
영상 만드는 코드를 리액트로 짜야 한다면 대부분 여기서 멈춥니다. 이건 HTML 이면 됩니다. 마지막 장은 저희가 직접 만들어 본 것입니다.
HyperFrames 는 HTML 을 영상으로 렌더하는 오픈소스입니다. 헤드리스 크롬이 프레임마다 화면을 떠서 FFmpeg 로 붙입니다. HeyGen 이 공개했고 별 50,356개에 Apache-2.0 입니다. 설명란 문장이 "Write HTML. Render video. Built for agents" 입니다.
- 준비물은 Node.js 22 이상과 FFmpeg 둘뿐이고 빌드 단계가 없습니다. index.html 을 브라우저로 바로 열어 확인합니다.
- GSAP·CSS·Lottie·Three.js 중 쓰던 애니메이션을 그대로 붙입니다. 같은 입력이면 같은 프레임이 나와서 자동화에 걸기 좋습니다.
- 두 번째 장의 네 프레임도 저희가 움직인 것입니다. 저장소가 내놓은 템플릿은 정지 이미지라, 색과 서체만 공식 값을 그대로 쓰고 모션은 저희가 넣었습니다.
- 마지막 장은 저희가 이걸로 만든 ASAP 브랜드 스팅입니다. AGI Soon As Possible의 머리글자가 그대로 ASAP이라, 네 글자만 남기고 나머지를 덜어냈습니다.
- 1080×1350 6초짜리 180프레임이 7.4초 만에 934KB로 나왔습니다. 이 한 편 기준이고, 다른 도구와 같은 조건으로 재 본 값은 아닙니다.
- 렌더 전에 검사기가 세 번 막았습니다. 위치를 좌표로 옮기면 프레임마다 글자가 튄다고 했고, 글자 크기가 무너진 것과 회색이 흐린 것을 잡아냈습니다. 고친 뒤에야 파일이 나왔고 첫 프레임과 끝 프레임 차이는 0픽셀입니다.
- Remotion 과 같은 방식입니다. 둘 다 헤드리스 크롬으로 찍어 FFmpeg 로 붙입니다. 갈리는 건 리액트 컴포넌트로 쓰느냐 HTML 로 쓰느냐입니다. 원문도 Remotion 에서 영감을 받았다고 먼저 밝힙니다.
- 라이선스는 저희가 직접 확인했습니다. Remotion 은 개인과 직원 3명 이하 회사까지만 무료이고 그 위로는 회사 라이선스를 사야 합니다. HyperFrames 는 Apache-2.0 이라 그 기준선이 없습니다.
heygen-com/hyperframes
Write HTML. Render video. Built for agents.
- GitHub 별
- 70,228
- 라이선스
- Apache-2.0
- 언어
- TypeScript
- 확인한 날
- 2026.10.23
설치 · 출처 npm
npm i -g hyperframes출처 HyperFrames (github.com/heygen-com/hyperframes)
광고
카드 내용
- 무엇을 만드나이 프레임들이 전부 HTML 입니다
저장소가 함께 내놓은 디자인 템플릿입니다. 브라우저가 그린 화면을 그대로 영상으로 굳힙니다.
출처: 공식 저장소 디자인 템플릿 - 공식 자산움직임도 마크업으로 적습니다
저장소 문서에 실린 공식 로고 모션입니다. GSAP·CSS·Lottie 중 쓰던 걸 그대로 붙입니다.
출처: 공식 저장소 문서
광고
