heygen-com/hyperframes

できること

• HTML / CSS / メディア / seek できるアニメーション（GSAP など）を決定的に MP4 へ書き出す
• npx hyperframes init でひな形、preview でライブリロードのプレビュー、render で MP4 出力
• ローカルまたは Docker でレンダリング
• Claude Code、Codex、Cursor、Gemini CLI などに入れる21個の skill とプラグイン（/hyperframes が入口）
• ブランドの design.md を動画向けに変換する frame.md、部品カタログ

使い方

npx hyperframes init my-video のあと npx hyperframes preview、npx hyperframes render。Node.js 22 以上と FFmpeg が必要。エージェントから使うなら Claude Code で claude plugin marketplace add heygen-com/hyperframes と claude plugin install hyperframes@hyperframes。

活用できそうな場面

• スクリプトやエージェントから、プロダクト紹介や図解の動画を自動で作る用途に使えそう
• 同じ入力で同じ動画ができるので、CI で動画を生成する構成にも向きそう

向いている人

動画を React ではなくプレーンな HTML で書いて自動生成したい人。エージェントに動画を作らせたい人

似ているもの

• Remotion：headless Chrome と FFmpeg で描画する点は同じ。Remotion は React コンポーネントで書き、こちらは素の HTML で書く

技術

TypeScript の monorepo（core、engine、producer など）。Puppeteer（headless Chrome）と FFmpeg。Node.js 22 以上。Apache-2.0。

注意点

バージョンは 0.8 系で、まだ 1.0 前。更新がとても頻繁（ほぼ毎日リリース）。2026年3月作成。HeyGen 社の製品で、README に同社のホスト版ワークフローの核としての位置づけも書かれている。