heygen-com/hyperframes는 HTML, CSS, 미디어, 시간에 맞춘 애니메이션을 매번 똑같은 MP4로 렌더하는 오픈소스입니다. AI 영상 회사 HeyGen이 공개했고, 라이선스는 Apache-2.0입니다. 2026년 11월 7일 기준 깃허브 스타는 8만 개입니다.
원리
영상을 HTML로 쓰고, 요소마다 시작 시각과 길이를 붙입니다.
<video class="clip" data-start="0" data-duration="6" data-track-index="0"></video>애니메이션은 GSAP, CSS, Lottie, Three.js, Anime.js 등 시간을 되감을 수 있는 것을 씁니다. 웹페이지를 만들 줄 아는 에이전트라면 같은 방식으로 영상을 만들 수 있습니다.
Claude Code에서 쓰기
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes그다음 이렇게 부탁합니다.
/hyperframes 로 페이드인 제목, 배경 영상, 잔잔한 배경 음악이 있는 10초짜리 제품 소개 영상을 만들어 줘.스킬이 기획, 올바른 HTML 작성, 애니메이션 연결, 미디어 추가, 검사, 미리보기, 렌더까지의 과정을 에이전트에게 알려 줍니다.
스킬과 블록
| 스킬 | 쓰임 |
|---|---|
/hyperframes | 영상 만들기·고치기의 기본 규칙. 먼저 읽힘 |
/hyperframes-cli | 프로젝트 만들기, 검사, 미리보기, 렌더, 게시 |
/hyperframes-registry | 전환, 자막, 차트, 지도, 3D 등 블록 약 450개 |
/media-use | 음악, 효과음, 이미지, 목소리 같은 미디어 구하기 |
필요할 때 Figma 가져오기, 슬라이드쇼, Remotion 프로젝트 옮기기 같은 스킬을 더 설치합니다. 일부 스킬과 HeyGen의 영상·음성 모델은 유료 Pro 기능입니다.
직접 CLI로
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 브라우저 미리보기
npx hyperframes render # MP4로 렌더Node.js 22 이상과 FFmpeg가 필요합니다.
오늘 할 일
10초짜리 제품 소개 영상을 한 편 부탁해 보세요. 결과 HTML을 열어 글자 하나를 고치고 다시 렌더해 보면, 편집 프로그램 없이 영상을 고치는 감이 옵니다.
쇼츠로 보기
이 글은 비치콤버스 쇼츠 No.71의 짝 글입니다. 짧은 주소 beachcombers.co.kr/s/71.