> X学習(@MakeAI_CEO/status/2067428340651413633「Claude・Codexで使える動画編集ツール」)を受けて shadow に導入・実機検証。
> cli-image-generation(静止画3ルート)の動画版。サブスク/無料枠で追加課金なし・ローカル完結。
## 何のためのツールか
**Hyperframes**(HeyGen製・Apache 2.0・OSS) = 「HTML/CSSでシーンを書く → ヘッドレスChromeでフレームキャプチャ → FFmpegでMP4化」する動画レンダリングエンジン。Claude Code が各シーンのHTML/CSS+GSAPアニメを書き、Hyperframes がレンダリングする連携。
- **APIキー不要・ローカル実行・Mac限定ではない**(投稿の引用元が言及した別ツールはMac限定だが、Hyperframes本体はLinux/shadowで動作確認済)
- 利用形態は2つ: ①ローカルCLI/Skills版(推奨・認証不要) / ②ホスト型MCP(mcp.heygen.com・HeyGen OAuth必要・Claude Code CLIはウィジェット非対応でプレビューURLのみ)
- **Claude Code CLI運用は①ローカル版一択**
## 実機検証結果（shadow 100.115.94.5）
- 配置: `~/workspace/hyperframes-test/demo/`
- 要件すべて充足: Node 22+(23.11.1) / FFmpeg(6.1.1) / Chrome+Chromium 両方
- 実証: 「ジャッジメントですの！」5秒イントロ(日本語+グロー+GSAPアニメ) → **H.264 / 1920x1080 / 5.0秒 / 900KB**・レンダ約29秒
- 検証ツール `npm run check`(lint) が文字はみ出し・字幕重なりを**座標付きで指摘** → Claudeが自己修正して0エラー化 → render成功。「検証ツールを自作して持たせる」思想と噛み合う
- 生成MP4はwin機 `~/Downloads/hyperframes-test/judgement-intro.mp4` にDL済
## 使い方
```bash
cd ~/workspace && npx -y hyperframes@latest init
npx -y skills add heygen-com/hyperframes --yes # .agents/skills/ に16スキル(--global不可)
# index.html を編集（.clip div + window.__timelines["main"] のGSAP）
npm run check # lint+validate+inspect（はみ出し/重なりを座標で指摘）
npm run render # → renders/
npm run dev # ブラウザライブプレビュー
```
## Gotcha
- **`--global` 不可**(PromptScript非対応) → プロジェクトローカル(`--yes`)で導入
- **`skills add` は対話プロンプトでハング** → 必ず `--yes`（SSH非対話で固まる）
- 日本語タイトルのoverflow対策: `position:absolute + width:1920px + text-align:center` が安全
- 低メモリ環境は自動で1ワーカー・screenshotモードにフォールバック(動くが遅い)。高速化は `npx @puppeteer/browsers install chrome-headless-shell`
- 匿名テレメトリ送信あり(内容/パス/個人情報は送らない)。`hyperframes telemetry disable` で停止可
## ポリシー整合
HeyGen(米)・Apache2.0・ローカル完結で外部送信なし(テレメトリ除く) → 非中華・機密保護に適合。
同投稿言及の Remotion(React動画)/Selects/Adobe MCP も候補だが、動画の本命は当面 Hyperframes(無料・ローカル)。
## 関連
- rules: `~/.claude/rules/cli-video-editing.md`(本記録の運用ガイド・66行)
- cli-image-generation(静止画3ルート Grok/Codex/Gemini) — 本件はその動画版
- 公式: hyperframes.heygen.com / github.com/heygen-com/hyperframes