Write HTML. Render video. Built for agents.
이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.
HyperFrames는 HTML, CSS, 미디어 및 탐색 가능한 애니메이션을 결정론적 MP4 비디오로 변환하는 오픈소스 프레임워크입니다. CLI를 통해 로컬에서 사용하거나, AI 코딩 에이전트와 함께 스킬을 사용하거나, 호스팅된 저작 워크플로우의 렌더링 코어로 사용할 수 있습니다.
HyperFrames 스킬을 설치한 후 원하는 비디오를 설명하세요:
npx skills add heygen-com/hyperframes다음과 같은 프롬프트를 시도해 보세요:
/hyperframes를 사용하여, 페이드인 타이틀, 배경 비디오, 미묘한 배경 음악이 포함된 10초 제품 소개를 만들어 주세요.
스킬은 에이전트에게 HyperFrames 제작 루프(비디오 계획, 유효한 HTML 작성, 탐색 가능한 애니메이션 연결, 미디어 추가, 린트, 미리보기, 렌더링)를 가르칩니다. Claude Code, Cursor, Gemini CLI, Codex 및 스킬을 지원하는 기타 코딩 에이전트와 함께 작동합니다.
HyperFrames는 에이전트가 필요에 따라 로드하는 19개의 스킬을 제공합니다. 먼저 /hyperframes를 읽으세요. 이것은 라우터이자 기능 맵입니다. "비디오 만들어 줘" 요청에 대한 워크플로우를 선택하고 아래 도메인 스킬을 가리킵니다.
npx skills add heygen-com/hyperframes를 실행하면 대화형 선택기가 나타나고, npx skills add heygen-com/hyperframes --all은 19개를 모두 한 번에 설치하며(선택기 건너뜀), npx skills add heygen-com/hyperframes --skill <name>은 하나만 설치합니다(이름만, 선행 / 없음).
| 스킬 | 사용 시기 | ||
|---|---|---|---|
/hyperframes |
비디오/애니메이션/모션 그래픽을 만들기/편집/애니메이션/렌더링하는 모든 요청에 대해 먼저 읽으세요. 도메인 스킬의 기능 맵 및 아래 생성 워크플로우의 의도 라우터입니다. |
| 스킬 | 사용 시기 | ||
|---|---|---|---|
/product-launch-video |
제품 마케팅/런칭/홍보 — URL, 브리프 또는 스크립트에서 (사이트 이름만 알려져 있어도 가능). 최대 ~3분 (최적 30-90초). | ||
/website-to-video |
일반 웹사이트를 비디오로 변환 — 사이트 투어, 포트폴리오/랜딩 페이지 쇼케이스, 사이트 자체 비주얼의 소셜 클립. | ||
/faceless-explainer |
임의의 텍스트로 주제/개념 설명 — 제품 없음, URL 없음, 웹사이트 캡처 없음; 모든 비주얼은 LLM이 창작(타이포그래피/추상/다이어그램/데이터 시각화). | ||
/pr-to-video |
GitHub 풀 리퀘스트(PR URL, owner/repo#N 참조, 또는 "this PR") → 변경 로그/기능 공개/수정/리팩터 설명, gh CLI를 통해 읽음. |
||
/embedded-captions |
기존 토킹헤드 비디오에 자막/캡션 추가(푸티지 변경 없음) — 그대로 레일, 피사체 뒤에 임베드된 클라이맥스, 또는 순수 시네마틱 임베드. | ||
/talking-head-recut |
기존 토킹헤드/인터뷰/팟캐스트 비디오를 디자인된 그래픽 오버레이로 패키징 — 로우더 서드, 데이터 콜아웃, 운동 타이틀, 풀 인용구, 사이드 패널, PiP. | ||
/motion-graphics |
짧고 내레이션이 없는 디자인 중심 모션 그래픽(~10초 미만) — 운동 타이포그래피, 통계/차트 히트, 로고 스팅, 로우더 서드, 애니메이션 트윗/헤드라인. MP4 또는 투명 오버레이. | ||
/music-to-video |
음악 트랙(오디오 파일, 또는 오디오를 추출할 비디오) → 비트 동기화 비디오 — 가사, 슬라이드쇼, 또는 운동 프로모; 음악이 페이싱을 주도. | ||
/slideshow |
프레젠테이션/피치 덱/인터랙티브 덱 — 개별 슬라이드, 조각 공개, 분기, 핫스팟 탐색, 발표자 모드. 출력은 탐색 가능한 덱이며, 렌더링된 비디오가 아닙니다. | ||
/general-video |
그 외 모든 것 — 더 길거나 여러 장면의 작품, 브랜드/시즐 릴, 타이틀 카드, 정적 루프, 자유 형식 구성. 입력 및 길이에 구애받지 않는 폴백. | ||
/remotion-to-hyperframes |
기존 Remotion (React) 컴포지션의 소스를 HyperFrames HTML로 포팅. 일방향 마이그레이션, 생성 아님. |
생성 워크플로우가 구성하는 원자적 기능 — 특정 레이어가 필요할 때 하나를 가져오세요.
| 스킬 | 내용 | ||
|---|---|---|---|
/hyperframes-core |
컴포지션 계약 — data-* 타이밍 속성, class="clip", 트랙, 서브 컴포지션, 변수, 프레임워크 소유 미디어 재생, 결정론 규칙. |
||
/hyperframes-animation |
모든 애니메이션 지식 — 원자적 모션 규칙, 씬 청사진, 전환, 런타임 어댑터 (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). | ||
/hyperframes-creative |
비애니메이션 크리에이티브 방향 — frame.md / design.md, 팔레트, 타이포그래피, 내레이션, 비트 계획, 오디오 반응형 비주얼, 컴포지션 패턴. |
||
/hyperframes-media |
오디오 + 미디어 — TTS 음성 해설, 배경 음악, 음향 효과, Whisper 전사, 배경 제거, 캡션 저작 (하나의 공유 오디오 엔진). | ||
/media-use |
모든 미디어 요구(BGM, SFX, 이미지, 아이콘)를 로컬 파일 + 원장 기록으로 해결. HeyGen 카탈로그 위의 하나의 동사(resolve)와 매니페스트 추적. |
||
/hyperframes-cli |
CLI 개발 루프 — init, lint, validate, inspect, preview, render, publish, doctor, 그리고 AWS Lambda 클라우드 렌더링 (lambda deploy / render / progress). |
||
/hyperframes-registry |
hyperframes add를 통해 레지스트리 블록 및 컴포넌트를 컴포지션에 설치 및 연결. 업스트림에 기여할 새 블록 또는 컴포넌트 저작. |
시각 디자인 핸드오프 워크플로우는 Claude Design 가이드 및 Open Design 가이드를 참조하세요.
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 브라우저에서 라이브 리로드로 미리보기
npx hyperframes render # MP4로 렌더링요구 사항: Node.js 22+, FFmpeg
아이디어가 필요하신가요? Showcase에서 완성된 비디오를 보고, 읽고, 실행하고, 리믹스할 수 있습니다.
frame.md — 비디오를 위한 디자인 시스템.
모든 브랜드에는 design.md가 있습니다. 그 중 어느 것도 카메라를 위해 작성되지 않았습니다. frame.md는 누락된 변환 계층입니다: 웹 컨텍스트 디자인 사양을 가져와 프레임에 맞게 반전시킵니다 — 동일한 토큰, 동일한 규칙이지만, AI 에이전트가 규모를 추측하거나 웹 크롬에 도달하지 않고 프로모 비디오를 구성할 수 있도록 다시 작성되었습니다.
출력은 전체 툴체인이 읽을 수 있는 DESIGN.md 상위 집합입니다. 원자는 신성하게 유지됩니다. 구성은 자유롭게 유지됩니다. 숫자는 스크립트에서 나옵니다.
[디자인 템플릿 이미지들 생략]