hyperframes
무엇인가
HyperFrames는 브라우저 렌더링 파이프라인을 영상 인코딩에 연결하는 계열의 도구다. 컴포지션이 곧 HTML 파일이고, 타임라인은 그 파일 안의 data 속성으로 표현된다. 별도 영상 편집기나 전용 타임라인 포맷을 두지 않고, 웹 페이지를 작성하는 방식 그대로 영상을 정의한다.
어떻게 동작하나
컴포지션은 HTML 파일이며 타이밍과 트랙은 data 속성으로 지정한다. 애니메이션은 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 직접 만든 프레임 어댑터로 구동한다. 렌더러는 헤드리스 Chrome에서 각 프레임을 탐색(seek)하고 그 결과를 FFmpeg로 인코딩한다. 실시간 재생을 캡처하지 않으므로 같은 입력에서 같은 영상이 나온다. 브라우저에서 즉시 미리보기할 수 있고 로컬 또는 Docker에서 렌더한다.
무엇과 다른가
실시간 화면 캡처 방식과 달리 프레임을 하나씩 탐색해 인코딩하므로 출력이 결정적이다. React를 요구하지 않고 독자적 타임라인 포맷도 두지 않는다. 에이전트 쪽에서는 스킬이 제작 루프를 가르친다. 기획, 유효한 HTML 작성, 탐색 가능한 애니메이션 연결, 미디어 추가, 린트, 미리보기, 렌더 순서다. `/hyperframes` 라우터가 요청에 맞는 워크플로를 고르고 필요한 스킬을 그때 설치한다.
어떻게 쓰나
에이전트용 스킬은 `npx skills add heygen-com/hyperframes`로 설치한다. 비대화형 실행이나 최신 main 기준 설치에는 `npx hyperframes skills update`를 쓴다. `npx hyperframes init`은 라우터, `hyperframes-*` 도메인 스킬, `media-use`로 구성된 코어 세트를 최신으로 유지하고 부분 설치를 확장하지 않는다. 카탈로그에서 블록과 컴포넌트를 설치해 컴포지션에 붙인다. Codex 업로드용 플러그인 아카이브는 `dist/hyperframes-plugin.zip`으로 생성된다.
전제와 한계
렌더에는 Node.js 22 이상과 FFmpeg가 필요하다. Codex 플러그인 아카이브는 100MB 업로드 한도를 넘으면 실패한다. `skills add`는 skills.sh 레지스트리 blob을 해석하므로 main보다 몇 시간 늦을 수 있다. 스킬 선택기는 대화형 전용이라 `--skill` 없이 비대화형으로 실행하면 20개 스킬이 모두 설치된다. `.claude/skills`와 `.agents/skills` 아래 저장소 내부 스킬 6개는 기본적으로 제외된다.