Gitframes: コードでAIエージェントが駆動する、GPUレンダリング可能な動画制作npmパッケージ

Photoshop、After Effects、Blenderクラスの動画ツールを、AIエージェントがコードで駆動する単一のnpmパッケージとして提供します。 ⚠️ ベータ版: gitframesは現在活発に開発中です。APIはリリース間で変更される可能性があり、一部の機能は不完全または不安定な場合があります。 Gitframesはコーディングエージェントのために構築されています。通常3つのデスクトップアプリケーション（PhotoshopグレードのコンポジットとVFX、After Effectsスタイルのモーショングラフィックス、タイポグラフィ、キーフレーム、Blenderスタイルの3Dシーン、カメラ、モデル）に分割される作業を、軽量なnpmパッケージ1つにまとめます。エージェントはTypeScriptでコンポジションを作成し、フレームをチェックしてMP4をレンダリングします。これにより、マルチギガバイトのクリエイティブスイートをインストールしたりライセンスしたりする必要がなくなります。 純粋なソフトウェアエンジニアリングとしてのコードファースト動画制作 — ヘッドレスブラウザ不要、DOMリフローなし、スクリーンショットパイプラインなし。Node.jsおよび最新のWebGPUブラウザで、Dawn / WebGPU / Metal / Vulkanを介してGPUハードウェア上で直接レンダリングします。 Gitframesで作られたもの 例/フォルダ内のすべてのフレームは、TypeScriptからgitframesによってレンダリングされています。静止画をクリックするとYouTubeで視聴できます。 Gitframesローンチ 22_gitframes_launch フルサークル 21_full_circle ダンサーショーケース 19_gitframes_film 注: AIコーディングエージェントを使用していますか？ gitframesスキルを1行でインストールできます。 Claude Code /plugin install gitframes その他のエージェント（Codex、Cursor、Hermes、Gemini CLI、Copilotなど） npx skills add gatewai-dev/gitframes 詳細はエージェントスキルとプラグインを参照してください。 目次 なぜGitframesなのか アーキテクチャ比較 主な機能と能力 1. Slug GPUベクタータイポグラフィとAE互換性 2. PhotoshopグレードのWebGPU 2D VFX 3. 統合された3Dシーングラフ、カメラ、メッシュシェーディング 4. オーディオレイヤー、プロシージャルSFX、リアクティブシグナル 5. アニメーションチャート 6. オンデバイスビジョンとトラッキング 7. ヘッドレス準拠とFrameGridテスト 8. ブラウザでのライブプレビュー モノレポアーキテクチャ クイックスタートガイド 1. 基本的なコンポジションとキネティック自動レイアウト 2. カメラと3Dモデルを備えた統合3Dシーン 3. オーディオサウンドトラック、プロシージャルSFX、リアクティブシグナル 4. チェーン化されたWebGPUポストプロセッシングVFX 5. ビジョン: ピン、マット、リフレーム 6. ヘッドレス動画とFrameGridレンダリング エンジニアリングドクトリンとベストプラクティス エージェントスキルとプラグインリファレンス ショーケース例 開発とビルド コミュニティ ライセンス なぜGitframesなのか 現代の自動動画生成は、通常、汎用ウェブブラウザのアーキテクチャによって制約されます。プロセスオーバーヘッド、非決定的なDOMレイアウトリフロー、遅いスクリーンショットキャプチャなどです。Gitframesは動画コンポジションをソフトウェアエンジニアリングとして扱います。 Pillar | それが意味すること 🚀 ヘッドレスブラウザオーバーヘッドゼロ Puppeteer、Chromium IPC、page.screenshot()は不要です。GitframesはDawn/WebGPUを介してネイティブGPUデバイスと直接通信し、@napi-rs/webcodecsでハードウェアエンコードします。 🎯 決定論的でフレーム精度のクロック 絶対フレームクロック、離散サンプルポイント、フレーム精度のオーディオBeatGrids。浮動タイマー、ドリフト、フレームドロップはありません。 🔠 解析的で解像度に依存しないタイプ Slugアルゴリズムは、WGSLでピクセルごとにグリフのアウトラインを評価します。テクスチャアトラスやスケーリングアーティファクトはなく、10pxから10,000pxまでシャープです。 🎨 Photoshopグレードのトーン＆空間VFX 50以上のモジュラーGPUシェーダー: Curves、Levels、Selective Color、3D LUT、Halftone、Film Grain、Unsharp Mask、Mesh Warp、Screen-Space Relighting。 🧊 統合された3D＆2D深度コンポジット 2D flex/boxツリーを3Dホモグラフィ平面、マルチプレーンリグ、メッシュ（OBJ、FBX、glTF/GLB、STL、PLY、VOX、3DS、OFF）にネストし、PBRガラスとSSAOを使用します。 🔊 内蔵プロシージャルオーディオDSP マルチトラックサウンドトラック、決定論的なプロシージャルトランジションSFX（whoosh、impact、riser）、オーディオからビジュアルを駆動するリアクティブシグナル。 👁️ オンデバイスニューラルビジョン Apache-2.0 ONNXモデルからのオブジェクトトラッキング、インスタンスセグメンテーション、マルチパーソンポーズ、パーソンマット — ディスクへのラウンドトリップなしでリアクティブシグナルを供給します。 ☁️ クラウドネイティブ＆CI/CD対応 ワーカーあたり約200〜400MBのRAM（Chromiumの2〜4GB vs）で、サーバーレスGPUレンダークラスター（AWS G4/G5、Modal、RunPod、Kubernetes）に最適です。 アーキテクチャ比較: Gitframes vs. Remotion vs. Hyperframes プログラムで動画を生成する開発者は、通常、Remotion（React/Chromium）またはHyperframes（Canvas2D/SVGウェブアニメーション）を検討します。以下のマトリックスは、基本的なエンジニアリング次元を比較しています。 詳細比較マトリックス 機能 / 次元 | Gitframes | Remotion | Hyperframes ---|---|---|--- 基盤エンジン | ネイティブWebGPU (Dawn / Metal / Vulkan経由のWGSLコンピュート＆レンダーパイプライン) | Chromium / Puppeteer (React DOM, HTML/CSSレイアウト) | Canvas2D / WebGL / SVG (ブラウザまたはNode Skia) レンダリングアーキテクチャ | 直接ハードウェアフレームバッファレンダリング＆ハードウェアビデオエンコーディング (@napi-rs/webcodecs) | ヘッドレスChromeを起動し、CDP / page.screenshot()経由でフレームをキャプチャ | ソフトウェアまたはハードウェア2Dキャンバスコンテキスト スループット | 60–120+ FPS (リアルタイム〜超高速GPU実行) | 5–20 FPS (DOMリフロー、IPC、ラスタライズ) | 20–40 FPS (CPU描画コマンド / JS) メモリフットプリント | ワーカーあたり約200–400 MB (ブラウザなし) | ワーカーあたり1.5–4.0 GB+ (Chromium + V8 DOMヒープ) | 約500 MB–1 GB (Skia/Canvasバインディング) タイポグラフィエンジン | Slug GPU — WGSLでの解析的ベジェ評価、無限ズーム、After Effectsセレクター | ブラウザDOMテキスト (CSSフォント、ラスタライズ、3Dトランスフォーム下でぼやける) | Canvas2D / パステキスト (CPUラスタライズグリフ) 2D VFX＆ポストプロセッシング | 50以上のWebGPUシェーダー (Curves, Levels, Selective Color, 3D LUT, Film Grain, Halftone, Liquify, PBR Glass, Relight) | CSS FiltersまたはカスタムWebGLキャンバスラッパー | 基本的なCanvas2Dコンポジットと2Dフィルター 3Dグラフィックス＆深度 | ネイティブ3Dシーングラフ — LookAt/Turntableカメラ、マルチプレーン、スキニング (OBJ/FBX/glTF)、SSAO、PCSS、DoF | 内蔵なし (React DOM内にThree.js/Fiberを埋め込む) | ミニマルな2.5Dレイヤー; 統合メッシュパイプラインなし モーションブラー＆物理 | 物理的な180°シャッター速度バッファ（MRT + 閉形式スプリングキネマティクス） | CSSトランジション / JS補間; 合成ブラーハック | フレーム補間または手動マルチパス オーディオエンジン＆DSP | ネイティブオーディオDSP＆プロシージャルSFX (マルチトラックミキシング、ビートグリッド、リアクティブシグナル) | <Audio>再生; 基本的なボリュームカーブ | 基本的な静的オーディオ再生 チャート＆データビジュアライゼーション | Layer.chart — ネイティブベクターノードから構築された線、エリア、棒、散布図、ローソク足、円グラフ、ドーナツチャート。段階的な表示アニメーション付き | DOMチャートライブラリ (Recharts, Chart.js) | カスタムキャンバス描画操作 AI＆コンピュータービジョン | オンデバイスONNXビジョン — COCO-80検出 + インスタンスマスク (RTMDet-Ins)、COCO-17ポーズ (RTMO)、パーソンマット (Selfie Segmenter); WebGPUテンソル条件付け (Canny, depth-to-normals, optical flow, deflicker) | 外部で事前にレンダリングされたアセット; ネイティブGPUテンソル条件付けなし | 外部で事前にレンダリングされたアセット ヘッドレス検証 | FrameGridコンタクトシート、シングルフレームスナップショット、Skia MSEピクセル不変アサーション | Playwright/Puppeteerのビジュアルスナップショット | 手動フレーム検査 / キャンバス差分 Docker / クラウドポータビリティ | コンパクト (~500 MBのスリムイメージにネイティブGPU/Vulkanドライバーを含む) | 重い (~2–3 GBにChromium、フォント、X11/Mesaを含む) | 中程度のコンテナサイズ 主な機能と能力 1. Slug GPUベクタータイポグラフィとAE互換性 従来のテキストは、CPUラスタライズまたは低解像度のSDFアトラスに依存しており、3Dカメラスイープ下ではぼやけます。GitframesはSlugアルゴリズム（SlugPipeline）を統合しています。 解析的GPU評価 — WGSLフラグメントシェーダーがピクセルごとに正確な立方/二次ベジェ曲線を解きます。グリフは、CPUでの再ラスタライズなしに、10pxまたは10,000pxでシャープさを保ちます。 After Effects互換のアニメーター — レンジセレクター（square、ramp_up、ramp_down、triangle、smooth）、easeHigh/easeLowカーブ、シード付きPRNG文字シャッフル（TextAnimator）。 人間らしいタイピングのケイデンス — 重み付けされた句読点の遅延（カンマ3倍、文末5.5倍、改行7倍）と、末尾のスクランブル解決（TypewriterAnimator）。 3Dボリューメトリックフォーメーション — 円筒ドラム、対数渦巻き、二重らせんリボンにテキストをマッピングし、サーフェスノーマルバンキング（evaluateVolumetricFormation）を使用します。 動的な行間と傾斜 — ベースライン、中央、またはトップに固定された、面積保存ユニモジュラーせん断とアコーディオン行間。 2. PhotoshopグレードのWebGPU 2D VFX (50+ シェーダー) プロフェッショナルな画像/動画編集の包括的なスイート...