概要
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)
トラブル対応なぜハイパーフレームで1700秒後にレンダリングされたビデオにGSAPトゥイーンが表示されないのですか？
hyperframes 0.6.52 の既知のバグ: 開始時間が約1700秒（絶対時間）を超えるGSAPトゥイーンがレンダリング中に適用されません。回避策: トゥイーンが時間0で開始し、durationを使用して表示を制御するようにアニメーションを再構成するか、コンポジションを短いセグメントに分割してください。t=0からの連続トゥイーンは正しく動作します。恒久的な修正については issue #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。恒久的な修正についてはissue #1009を追跡してください。
トラブル対応Studioで別の要素の後ろに隠れている要素を選択する方法は？
現在、プレビューをクリックすると最前面の要素のみが選択されます。隠れた要素を選択するには、レイヤーパネルを使用して手動でレイヤーを選択してください。スタックされたレイヤーを繰り返しクリックまたはmodifier+clickで循環させる機能が提案されています（issue #1125参照）が、まだ実装されていません。