H
HyperFrames
HTML・CSS・JavaScriptで動画を組み立てるオープンソースのフレームワーク
デフォルトのカバー
紹介
HyperFramesは、HeyGenが生み出したApache 2.0ライセンスのフレームワークで、AIエージェントや開発者が一般的なWeb技術で動画を作成・編集できます。タイミングはHTMLのdata属性、見た目はCSS、アニメーションはGSAPで指定します。
- 掲載日
- 2026年11月2日
- ウェブサイト
- hyperframes.heygen.com
- 料金体系
- 無料
- 会社
- HeyGen
製品情報
HyperFramesとは？
HyperFramesは、AIエージェントや開発者がHTML・CSS・JavaScriptで動画を構成・編集できるオープンソースのフレームワークで、コードで動画を作る「バイブコーディング」型の手法を取り入れています。
HyperFramesの使い方
タイミング用のdata属性を付けたHTMLを書き、CSSで装飾し、JavaScript(GSAP)でアニメーションを付けます。Claude Codeなどのエージェントにスキルとして追加することもできます。
HyperFramesの主な機能
- コードによる動画編集
- HTML・CSS・JSでの動画構成
- Apache 2.0のオープンソース
- Claude Codeなどのエージェントと連携
- GSAPによるアニメーション
HyperFramesの活用例
- 1AIエージェントによる動画コンテンツの自動生成
- 2データ連動型の動画レイアウトの制作
- 3スクリプトによる繰り返し編集の自動化
HyperFramesに関するよくある質問
HyperFramesのライセンスは?+
Apache 2.0です。
HyperFramesをClaude Codeに追加するには?+
npx skills add heygen-com/hyperframes を実行すると、スキルとして追加できます。
HyperFramesのアニメーションには何を使いますか?+
HTMLとCSSに加えて、GSAPによるアニメーションに対応しています。
HyperFramesはどのカテゴリに入っていますか？+
HyperFramesはAIコードエディタ、AI動画編集に掲載されています。