개요
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
FAQ (3)
문제 해결GSAP 트윈이 hyperframes에서 1700초 이후 렌더링된 비디오에 나타나지 않는 이유는 무엇인가요?
hyperframes 0.6.52의 알려진 버그: 시작 시간이 약 1700초(절대값)를 초과하는 GSAP 트윈이 렌더링 중에 적용되지 않습니다. 해결 방법: 트윈이 시간 0에서 시작되고 duration을 사용하여 가시성을 제어하도록 애니메이션을 재구성하거나, 컴포지션을 더 짧은 세그먼트로 분할하세요. t=0에서 연속적인 트윈은 정상적으로 작동합니다. 영구적인 수정을 위해 이슈 #1107을 추적하세요.
문제 해결HyperFrames를 v0.6.11로 업그레이드한 후 렌더링된 비디오 하단에 흰색 또는 검은색 막대가 나타나는 이유는 무엇인가요?
이는 HyperFrames v0.6.11+ (최신 v0.6.31 포함)에서 알려진 회귀 문제입니다. 1080x1920 세로 구성의 처음 약 37초 동안 하단 스트립이 비디오 요소로 덮이지 않습니다. 현재 유일한 해결 방법은 올바르게 렌더링되는 v0.6.10으로 다운그레이드하는 것입니다. 다음 명령어를 사용하세요: npx --yes hyperframes@0.6.10 render --output out.mp4. 영구적인 수정을 위해 이슈 #1009를 추적하세요.
문제 해결Studio에서 다른 요소 뒤에 숨겨진 요소를 선택하는 방법?
현재 미리보기를 클릭하면 가장 위에 있는 요소만 선택됩니다. 가려진 요소를 선택하려면 레이어 패널을 사용하여 수동으로 레이어를 선택하세요. 반복 클릭이나 modifier+클릭을 통해 쌓인 레이어를 순환하는 기능이 제안되었지만(issue #1125 참조), 아직 구현되지 않았습니다.