Repolode
投稿する
heygen-com

heygen-com/hyperframes

AIコーディングエージェント向けに、HTMLやCSS、メディア、シーク可能なアニメーションから決定論的なMP4動画を生成するオープンソースフレームワーク。

GitHub で見る公式サイト
スター
66,562
フォーク
6,018
未解決の Issue
368
最終コミット
3 時間前

これは何？

HyperFramesでは、HTMLファイルとして動画を記述できます。タイミングとトラックはdata属性で設定でき、アニメーションにはGSAP、CSS、Lottie、Three.js、Anime.js、WAAPI、またはカスタムアダプターを利用できます。レンダラーはヘッドレスChromeで各フレームにシークし、FFmpegでエンコードするため、同じ入力からは常に同じ出力が生成されます。

このプロジェクトは、すでにHTMLを書いている開発者やAIコーディングエージェントを対象としています。スキャフォールディング、ライブリロード付きプレビュー、Lint、ローカルまたはDockerでのレンダリングを行うCLIに加え、計画からレンダリングまでのワークフローを案内するエージェントスキルも提供します。分散ジョブ向けのAWS Lambdaレンダリングにも対応しています。

コンポジションは通常のHTMLで、必須のビルド工程はありません。そのため、index.htmlをブラウザーで直接開いてプレビューできます。カタログには、コマンドひとつで追加できる再利用可能なトランジション、オーバーレイ、チャート、キャプションが用意されています。

主な機能

  • 01コンポジションは、タイミングやトラックを指定するdata属性を持つHTMLファイルです。
  • 02GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI、カスタムアニメーションアダプターに対応しています。
  • 03ヘッドレスChromeでフレームにシークし、FFmpegでエンコードすることで、決定論的にレンダリングします。
  • 04init、preview、lint、renderに対応するCLIを備え、Dockerもサポートしています。
  • 05プロンプトから動画を計画・制作するためのエージェントスキルを提供します。
  • 06分散ジョブ向けのAWS Lambdaレンダリングに対応しています。

ユースケース

  • Webコンテンツから、製品のローンチ動画や新機能の告知動画を生成する。
  • CIでも同じようにレンダリングできる、データ駆動型のチャートや地図のアニメーションを作成する。
  • コンテンツ制作パイプラインで、再利用可能なモーショングラフィックスを自動化する。
  • AIコーディングエージェントがHTMLを書いて動画を制作できるようにする。

トピック

#video#html#animation#rendering#ffmpeg#gsap#ai-agents#puppeteer#ai#framework

よくある質問

hyperframes とは？
AIコーディングエージェント向けに、HTMLやCSS、メディア、シーク可能なアニメーションから決定論的なMP4動画を生成するオープンソースフレームワーク。 HyperFramesでは、HTMLファイルとして動画を記述できます。タイミングとトラックはdata属性で設定でき、アニメーションにはGSAP、CSS、Lottie、Three.js、Anime.js、WAAPI、またはカスタムアダプターを利用できます。レンダラーはヘッドレスChromeで各フレームにシークし、FFmpegでエンコードするため、同じ入力からは常に同じ出力が生成されます。
hyperframes は無料で使えますか？ライセンスは？
hyperframes は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
hyperframes は今もメンテナンスされていますか？
活発にメンテナンス中。hyperframes の最終コミットは 2026年10月18日 です。
hyperframes は何に使えますか？
Webコンテンツから、製品のローンチ動画や新機能の告知動画を生成する。 CIでも同じようにレンダリングできる、データ駆動型のチャートや地図のアニメーションを作成する。 コンテンツ制作パイプラインで、再利用可能なモーショングラフィックスを自動化する。 AIコーディングエージェントがHTMLを書いて動画を制作できるようにする。
hyperframes はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/heygen-com/hyperframes

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト