개요
Hyperframes는 개발자가 HTML 및 CSS로 동영상을 만들고 머리 없이 Chrome 확실성 렌더링을 통해 MP4를 내보낼 수 있도록 해줍니다. CLI가 프리뷰 및 렌더링을 지원하고 AI 프로그래밍 에이전트와의 기술 플러그인 깊이 통합을 제공합니다. GSAP, Lottie 등 애니메이션 실행을 지원하며 어댑터 모드를 사용합니다.
README 미리보기
\n \n \n \n \n \n\n\n\n \n \n \n \n \n\n\nWrite HTML. Render video. Built for agents.\n\n\n \n\n\nHyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents.\n\n## Quick Start\n\n### Option 1: With an AI coding agent (recommended)\n\nInstall the HyperFrames skills, then describe the video you want:\n\n```bash\nnpx skills add heygen-com/hyperframes\n```\n\nThis teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code, the skills register as slash commands — invoke `/hyperframes` to author compositions, `/hyperframes-cli` for the dev-loop commands (init, lint, preview, render), `/hyperframes-media` for asset preprocessing (TTS, transcription, background removal), `/tailwind` for `init --tailwind` projects, `/gsap` for timeline animation help, or the adapter skills (`/animejs`, `/css-animations`, `/lottie`, `/three`, `/waapi`) when a composition uses those runtimes.\n\nFor Claude Design, open [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it, then attach the file to your Claude Design chat. It produces a valid first draft; refine in any AI coding agent. See the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design).\n\nFor Codex specifically, the same skills are also exposed as an [OpenAI Codex plugin](./.codex-plugin/plugin.json) — sparse-install just the plugin surface:\n\n```bash\ncodex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets\n```\n\nFor Claude Code, the repo also ships a [Claude Code plugin manifest](./.claude-plugin/plugin.json): test it locally with `claude --plugin-dir .`. The m