Play a finished motion-graphics ad in sync with the rough drafts it grew from, and export the breakdown as MP4.

Null Motion — 概要

Null Motion は、完成したモーショングラフィックス広告がどのように構築されたかを、ドラフトごと、フレームごとに示す無料のローカルツールです。最終フィルムを画面の上部に、ラフな白黒ドラフトを下部に配置し、すべて同じタイムラインに同期します。ブレークダウンを調べたり、単一の MP4 ビデオとしてエクスポートしたりできます。

機能

上部に最終フィルム — 広告全体がループ再生され、全幅で表示されます。
下部にドラフト — 広告の各セクション（Hook、Reveal、App、End card など）には、シンプルな HyperFrames シーンがあります：白黒、Arial テキスト、フラットなシェイプ、1 つのシンプルな動き。仕上げ前のアイデアを示します。
すべて同期 — プレイヘッドがドラフト上を移動します。現在画面に表示されているセクションのドラフトは、フィルムにフレームごとに追従し、オレンジ色のアウトラインが表示されます。他のドラフトは、それぞれのパートをループし続けます。
ワンクリックエクスポート — ダウンロード → プレビュー全体 で、フィルムとそのドラフトをフレームごとに 1920 幅、24 Mbps の MP4 にレンダリングし、フィルムのオーディオを含めます。

クイックスタート

git clone https://github.com/blixvip/NullMotion.git && cd NullMotion
npm start                # Node 22+、インストール不要

次に、http://127.0.0.1:4343 を開き、リファレンスを選択して、ダウンロード → プレビュー全体（Chrome または Edge）を押すと MP4 が取得できます。

npm install 不要、API キー不要、アカウント不要。リポジトリには 3 つのリファレンスが同梱されているため、初回実行で動作します。

Null Studio とは異なります。 このリポジトリは、無料のローカルなローンチフィルムプレビューです。ポーズカット、キャプション、YouTube、Twitch、Kick クリップは Null Studio の機能で、nullmotion.com にある別のホスト型製品です。これらはこのコードには含まれていません。

ショーケース

リポジトリには、ドラフト付きの 3 つのリファレンスが同梱されており、すぐに再生できます：

リファレンス	長さ	ドラフト
Infinite · Global payments	0:30	7
SaaS · Launch sequence	1:02	8
Motion study 08	0:03	3

これらのクリップは他のクリエイターのもので、例として使用されています。受注作品を主張するものではありません。

仕組み

セクション。 scripts/plan-sections.mjs は、実際のシーンチェンジ（FFmpeg シーン検出を使用）で各リファレンスを 3〜8 のセクションに分割し、すべてのカットを保持します。2 ビートのドラフトは、フィルムがカットする正確な瞬間に切り替わります。
ドラフト。 public/drafts.mjs は小さな HyperFrames エンジンです：各ドラフトは、一時停止した GSAP タイムライン上の 640×360 の HTML シーンです。セクションは 1 つまたは 2 つの ビート（text、logo、phone、window、input、chat、cards、list、chart、cloud など）で記述され、実際のフレームのレイアウト、テキスト、タイミングに一致するように記述されます。
再生。 ページは、フィルムのクロックから各ドラフトのタイムラインを駆動します。アクティブなセクションはフィルムに追従し、他のセクションはループします。
エクスポート。 フィルムの非表示コピーが半分の速度で再生されます。requestVideoFrameCallback がデコードされたすべてのフレームをキャプチャし、ドラフトはそのフレームの正確な時間に描画され、WebCodecs がフレームのタイムスタンプ付きで 24 Mbps でエンコードします。オーディオはリファレンスからコピーされ、mp4-muxer が MP4 を書き込みます。リアルタイムで録画されるものはないため、フレームがドロップされることはありません。

要件

	必要なもの
Node.js 22+	ローカルサーバーの実行（`npm start`）。インストールする依存関係はありません。
Chrome または Edge	MP4 エクスポート（WebCodecs + `requestVideoFrameCallback`）。再生は最新のブラウザで動作します。
FFmpeg / ffprobe（オプション）	独自のリファレンスのインポート、セクションの計画、ショーケースの再構築、インポートしたリファレンスのオーディオ抽出。
Python 3（オプション）	`scripts/import-motionclone.py`。

独自のリファレンスを持ち込む

Python、FFmpeg、ffprobe がインストールされている場合：

python scripts/import-motionclone.py --source /path/to/MotionClone
node scripts/plan-sections.mjs      # セクション + シーンカット + コンタクトシート

インポートされたメディアは、.local-media/ と public/references/（どちらも Git で無視されます）にローカルに保存され、ショーケースよりも優先されます。各セクションのビートは public/references/drafts.json で記述します。記述されていないセクションにはプレースホルダードラフトが作成されます。npm run showcase は、ローカルライブラリから showcase/ を再構築します。

インポーターは非破壊的なセグメントを作成し、サムネイルを抽出し、ソースビデオがこのリポジトリと同じドライブにある場合はハードリンクします（それ以外の場合はコピーします）。元のファイルは読み取りのみです。サーバーはバイトレンジをストリーミングするため、シークしてもビデオ全体がメモリに読み込まれることはありません。

FAQ ハイライト

エクスポートには Chrome または Edge が必要 — Firefox と Safari はプレビューを再生できますが、エクスポートはできません。
エクスポートにはフィルムの長さの少なくとも 2 倍の時間がかかります — フィルムは半分の速度でレンダリングされるため、フレームがスキップされることはありません。レンダリング中はタブを前面に保ってください。
エクスポートに音声がない？ — 独自にインポートしたリファレンスの場合、サーバーは最初のエクスポート時に FFmpeg でオーディオを抽出するため、FFmpeg が PATH にある必要があります。
「Invalid cross-device link」（EXDEV）でインポートに失敗しましたか？ — 最新の main をプルしてください。インポーターは、ハードリンクが不可能な場合にビデオをコピーするようになりました。
インポート時に「No data/ folder」？ — --source は、MotionClone プロジェクトフォルダー（data/ を含むフォルダー）を指している必要があります。単一のビデオではありません。
ポート 4343 が使用中ですか？ — PORT や HOST を設定します。例：PORT=5000 npm start または HOST=0.0.0.0 npm start。
「Generation not connected」？ — これは意図的です。生成、レンダリングサービス、Premiere はこのリポジトリでは接続されていません。サーバーはこれらの呼び出しに 501 NOT_CONNECTED で応答します。ドラフトは作成されたものであり、AI 生成ではありません。
縦型クリップ、ポーズカット、キャプション？ — いいえ。これらは Null Studio の機能です。

プロジェクトレイアウト

public/demo.html · demo.mjs · demo.css   プレビューページとエクスポーター
public/drafts.mjs                        HyperFrames ドラフトエンジン（ビートの種類）
public/scraps.mjs                        Interface リファレンス用に手動で作成されたドラフト
public/editor.*                          以前のローンチエディター、/editor にあります
showcase/                                公開された 3 つのリファレンス
scripts/                                 インポート、セクション、ショーケース、波形、チェック
server.js · media.js                     静的サーバー、メディアストリーミング、オーディオ抽出
test/                                    サーバー、メディア、エディターテスト

npm run dev     # 変更時に再起動
npm run check   # UI ファイルチェック
npm test        # node --test

注記

ブラウザはこのプロジェクト自身のオリジンのみを呼び出します。
以前のローンチエディター（リファレンスタイムライン、トリミング、ブランドオーバーレイ）は /editor にあり、元の Null Motion テンプレートギャラリーは /index.html にあります。
バンドルされた GSAP と mp4-muxer はライセンスを保持します。THIRD_PARTY_NOTICES.md を参照してください。ブランドアートワークとリファレンスフッテージはそれぞれの所有者に帰属し、プロジェクトライセンスの対象外です。

貢献

Null Motion は小さく、依存関係がゼロで、npm start で実行できます。貢献者を募集しています：

Good first issues — 小さく、範囲が明確で、参照するファイルが含まれています。
Help wanted — 新しいドラフトビートの種類、エクスポートオプション、クロスプラットフォームテスト。
アイデアと質問 — Discussions または Discord。

問題にコメントして主張してください。プルリクエストは数日以内にレビューされます。すべての貢献者はリリースノートに記載されます。

ライセンス

MIT。バンドルされた GSAP と mp4-muxer は独自のライセンスを保持します（THIRD_PARTY_NOTICES.md を参照）。リファレンスフッテージとサードパーティのブランドマークは所有者に帰属します。

コミュニティ

質問、ヘルプ、フィードバック、リリースニュース、レンダリングはすべて Discord に投稿してください。Null Motion が役に立ったなら、⭐ を付けていただけると他の人が見つけやすくなります。

blixvip/NullMotion