heygen-com/hyperframes

HTML을 작성하세요. 비디오를 렌더링하세요. 에이전트를 위해 만들어졌습니다.

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

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

퀵 스타트

AI 코딩 에이전트와 함께

Claude Code의 경우, 버전 관리 플러그인을 설치하세요:

/plugin → 마켓플레이스에서 하이퍼프레임 마켓플레이스의 자동 업데이트를 활성화하세요. 그 다음 /hyperframes:hyperframes를 사용하세요. 플러그인 가이드를 참조하세요. Copilot, VS Code, 커서, Gemini CLI, 업데이트 및 마이그레이션을 위한 것입니다.

독립 실행형 기술(OpenCode 포함)의 경우, 다음을 사용하세요:

선택기는 사전 선택된 것이 없는 상태로 열립니다 — *핵심 기술 그룹만 있으면 됩니다: /hyperframes 라우터가 각 생성 워크플로우를 주문 즉시 설치합니다. 에이전트와 비인터랙티브 실행은 대신 npx hyperframes skills update를 사용해야 합니다 — T3는 핵심 세트를 정확히 설치하는 반면, skills add --all는 21개의 공개된 기술 모두를 설치합니다. .claude/skills / [.agents/skills 아래 있는 6개의 저장소 내부 기술은 기본적으로 제외됩니다.

Write HTML. Render video. Built for agents.

Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord

Download the desktop app: macOS · Windows · Linux (.deb)

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video.

Quick Start

With an AI coding agent

For Claude Code, install the versioned plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

To enable auto-update for the hyperframes marketplace, run claude in a terminal in your project. In Claude Code’s terminal UI, run /plugin, then select