개발 도구 TypeScript
heygen-com/hyperframes
HTML·CSS·미디어와 특정 시점으로 이동할 수 있는 애니메이션을 조합해 MP4 영상을 만드는 오픈소스 프레임워크다.
총 스타64325
포크5782
주간 순위4
주간 기간 증가5123
총 스타·포크의 마지막 관측: 2026-10-15T17:21:04.487430+00:00
01 Inside the project 기술을 이해하는 시간
WHY01
어떤 문제를 해결하나요?
웹 기술로 작성한 화면을 영상으로 만들려면 장면별 시간 제어, 프레임 캡처, 오디오 처리와 인코딩이 필요하다. HyperFrames는 이를 HTML 기반 구성과 명령줄 제작 도구로 연결한다.
HOW02
눈여겨볼 특징
HTML의 데이터 속성으로 요소의 시작 시간, 길이, 트랙을 지정하고 GSAP·CSS·Lottie 등으로 애니메이션을 구성한다.
화면 표시 없이 실행하는 Chrome에서 각 시점의 프레임을 캡처하고 FFmpeg로 영상 인코딩과 오디오 믹싱을 수행한다.
명령줄에서 프로젝트 생성, 문법·구성 검사, 브라우저 미리보기, MP4 렌더링을 지원한다.
전환·자막·차트용 재사용 구성 요소와 제품 소개·PR 설명·음악 기반 영상 등을 위한 에이전트 작업 지침을 제공한다.
USE CASE03
이럴 때 활용해요
제품 화면과 소개 문구, 배경 음악을 HTML로 구성해 출시 영상을 만들거나, CI에서 재사용 가능한 템플릿으로 기능 소개 영상을 생성하는 데 활용할 수 있다.
공식 자료를 바탕으로 생성·검토한 AI 해설입니다. 직접 설치하거나 성능을 검증한 결과는 아닙니다. 해설 확인:
02 On the radar 관측 데이터
총 스타 수 관측 시점의 누적값
공식 순위 위쪽일수록 높은 순위
목록에서 관측한 시점만 표시하며, 목록 밖의 구간은 연결하지 않습니다.
관측 수치 전체 보기
| 수집 시각 | 목록 | 순위 | 총 스타 | GitHub 기간 증가 |
|---|---|---|---|---|
| 2026-10-15T17:21:06.393821+00:00 | 월간 | 5 | 64325 | 13722 |
| 2026-10-15T17:21:04.487430+00:00 | 주간 | 4 | 64325 | 5123 |