heygen-com / hyperframes

HTML을 작성하세요. 비디오를 렌더링하세요. 요원들을 위해 만들어졌어.

퀵스타트 | 쇼케이스 | 놀이터 | 카탈로그 | 문서 | 디스코드

하이퍼프레임스는 HTML, CSS, 미디어, 그리고 탐색 가능한 애니메이션을 결정론적 MP4 비디오로 변환하는 오픈소스 프레임워크입니다. CLI와 함께 로컬에서 사용하거나, AI 코딩 에이전트가 기술을 갖추거나, 호스팅된 저작 워크플로우의 렌더링 코어로 활용할 수 있습니다.

퀵 스타트

AI 코딩 에이전트와 함께

HyperFrames 스킬을 설치한 다음, 원하는 영상을 설명하세요:

다음과 같은 프롬프트를 시도해 보세요:

'/hyperframes'를 사용해 10초짜리 제품 소개 영상을 만들고, 페이드인 타이틀, 배경 영상, 은은한 배경 음악을 만듭니다.

이 기술은 에이전트에게 HyperFrames 제작 루프를 가르칩니다: 비디오 계획, 유효한 HTML 작성, 와이어 시크블 애니메이션, 미디어 추가, 린팅, 미리보기, 렌더링 등. 그들은 Claude Code, Cursor, Gemini CLI, Codex 및 기타 코딩 에이전트와 함께 일하며 기술을 지원합니다.

시각적 디자인 인수오프 워크플로우에 대해서는 Claude Design 가이드와 Open Design 가이드를 참고하세요.

CLI 수동

요구 사항: Node.js 22+, FFmpeg

당신이 만들 수 있는 것들

아이디어가 필요하신가요? 완성된 영상을 쇼케이스에서 감상하고, 읽고, 진행하고, 리믹스할 수 있습니다.

• 제품 출시 영상 및 기능 발표
• 애니메이션 코드 차이점, 내레이션, 캡션이 포함된 PR 워크스루
• 데이터 시각화, 차트 경주, 지도 애니메이션
• 역동적인 캡션, 오버레이, 음악이 포함된 소셜 비디오
• 문서-비디오, PDF-비디오, 웹사이트-비디오 설명
• 자동 콘테용 재사용 모션 그래픽

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.