HTMLとCSSをMP4ビデオに変換するオープンソースフレームワーク。AI エージェント向けに設計された。
中辛 の解説
スタック: TypeScript・Node.js 22+・FFmpeg・Puppeteer・GSAP。難易度: 初級〜中級。即座に使える: CLI (npx hyperframes init) またはAIスキル経由で可能。デモ: Playground と Showcase で実際の制作例を確認できます。AI エージェント（Claude Code・Cursor・Gemini CLI）を通じて、自然言語でビデオ制作指示を送ると、フレームワークが HTML 構成→アニメーション配線→メディア挿入→レンダリングの全工程を担当します。
こんなリポジトリです
こんなときに便利です
- AI コーディングエージェント（Claude Code・Cursor）でプロンプト駆動ビデオ制作を自動化する際に
- プロダクト紹介動画・PR ウォークスルー・データ可視化など複数パターンの動画を一括生成するコンテンツパイプラインの中核に
- 既存ウェブサイトのスクリーンキャプチャをベースに、字幕・グラフィック・ナレーションを重ねた説明動画を素早く作成する場合に
主な機能
ほかとの違い
生成AI スキルとエージェント対応を組み込んだ初のビデオ制作フレームワークで、プロンプト駆動で複雑な映像ワークフロー全体（企画・HTML オーサリング・アニメーション配線・メディア管理・レンダリング）を自動化できます。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js 22 以上
- FFmpeg
すぐに始める
- Node.js 22 以上と FFmpeg をインストールします。
node --version # v22 以上を確認
ffmpeg -version # インストール確認
- HyperFrames プロジェクトを初期化します。
npx hyperframes init my-video
cd my-video
- ブラウザでプレビューしながら編集します。
npx hyperframes preview
- ビデオをレンダリングします。
npx hyperframes render
- AI エージェント経由で使う場合、スキルをインストールします。
npx skills add heygen-com/hyperframes
- エージェントに "Using
/hyperframes, create a 10-second product intro" のような指示を出します。
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try heygen-com/hyperframes
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「MCP・Claude 連携」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/heygen-com/hyperframes)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る