Framefields：TypeScriptのコードで動画制作

Framefieldsは、TypeScriptのコードで動画制作を行うオープンソースのライブラリです。開発者やコーディングエージェントを使う制作者向けに、映像の構成、モーショングラフィックス、GPU描画を一つのプロジェクトにまとめます。

やさしく説明すると、このサイトは何のため？

サイトは動画エンジンと公式ドキュメントの入口です。商品紹介で、見出しが動き、グラフが伸び、立体物が回転する場面を考えてください。コードで位置と時間を定義し、Framefieldsがそれをフレームと動画ファイルに変換します。自分で書くほか、エージェントに手伝わせることも可能です。ただし環境構築と素材の準備は必要で、トップページ自体が完成したオンライン編集画面ではありません。

文字、画像、3Dを組み合わせる

ベクターテキスト、文字単位のアニメーション、柔軟なレイアウトはタイトルや説明シーンに使えます。画像と動画のレイヤーには色調整、ぼかし、粒子感、LUT、マスク、トランジションを加えられます。カメラ、照明、マテリアル、読み込んだ3Dモデルも2D要素と同じ構成で扱えます。

データグラフ、Lottie、音声トラック、手続き的な効果音にも対応します。音声から得た信号で映像のプロパティを動かすこともできます。商品デモや内容を差し替える形式に役立ちますが、適切な素材、演出、時間配分は制作側で決める必要があります。

最初のMP4を作り、検証する手順

1. 公式の導入ガイドに従い、Node.js 22以降、ESモジュール、対応する描画環境を用意します。ネイティブ依存関係のインストールスクリプトに関する設定も確認します。
2. 必要ならエージェント用スキルを導入し、文字、尺、縦横比、素材、納品形式を指定します。
3. 共通テーマ、映像構成、描画スクリプトを分離します。実際のフォントファイルを登録し、Git LFSの素材を完全に取得します。
4. 型チェック、選択したPNGフレーム、フレーム一覧の順に確認します。ローカルプレビューで音と動きを見て、画面上に修正メモを付けます。
5. QAを有効にしてMP4を書き出し、検査結果と完成ファイルの再生を確認します。

プレビューは時間移動とコマ送りに対応します。同じ構成を確認と出力に使うことで、文字のはみ出しや不自然な切り替えを見つけやすくなります。

GPUとローカル視覚処理の注意点

ネイティブWebGPU出力はChromiumの連続スクリーンショットを使いません。ただし互換性のある描画バックエンドが必要です。対応環境でのソフトウェア描画は遅くなります。製品はベータ段階のため、バージョンを固定し、実際のシーンで試してください。Gitプロジェクトを処理するワーカーを自分のインフラに配置する方法もあります。

ONNXモデルは物体検出、領域分割、姿勢推定などをローカルで実行し、被写体に追従するラベルや切り抜きに使えます。withVisionは直前に描画したフレームを参照し、フレーム0には結果がありません。連続フレームか完成動画で確認し、離れた時点の一覧だけで判断しないでください。視覚処理ガイドに詳細があります。

ライセンス、費用、データの扱い

2026年10月21日の確認時点で、プロジェクトはApache-2.0です。AIサービス、計算資源、保存領域、素材ライセンスの費用は別です。ホスト型サービスの共通価格や月間無料枠は確認できていません。

視覚モデルは初回利用時に取得され、ローカルにキャッシュされます。スキルは指示文であり、それ自体がデータを送信するものではありません。ただし、外部のコーディングエージェントや遠隔サーバーの処理方針まで同じとは限らないため、各サービスを確認してください。

よくある質問

すべてのコードを自分で書く必要がありますか？

公式スキルを使ってエージェントにTypeScriptの作成や修正を手伝わせられます。環境、素材、完成画面の確認は引き続き必要です。

どのような出力を確認できますか？

PNG、フレーム一覧、ローカルプレビュー、MP4が文書化されています。書き出した動画も音付きで再生して確認します。

オープンソースなら制作費はゼロですか？

AIの契約、端末、サーバー、フォントや音楽の権利は別です。ライブラリのライセンスだけで全工程の費用は決まりません。

公式資料とコミュニティ

• エージェント向けスキル：導入と制作手順。
• GitHubのソースと例：実装、参考作品、問題報告。
• 公式Discord：コミュニティでの相談。
• GatewaiのYouTube：参考映像。