Communitygithub.com

モーション映像スタジオ

Chromeでフレーム単位に描くコードだけで、音、ノートPCのモック、数値の品質ゲート付きの完成したモーショングラフィックス映像を作る。

モーション映像スタジオ とは?

このスキルは、モーショングラフィックス、ローンチフィルム、製品説明、アプリのプロモ、ショートをコードだけで仕上げます。HTML、Canvas、CSSをChromeが1フレームずつ描きます。実際のサウンドデザイン、画面をノートPCに嵌めたモック、好みではなく測った数値の品質ゲートを含みます。After Effects、Remotion、有料ツールには依存しません。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

モーションフィルムスタジオ

モーションデザイン経験のない人のためにモーショングラフィックス動画を作ります。すべてコードで、自分のコンピュータ上で動作し、費用はかかりません。品質は推測ではなくスキャナで確認します。この方法で作成された動画は注目を集め、測定可能な品質ゲートを通過し、ノートPC画面リールとして Instagram に公開されます。

どのレポートでも正直に:スキャナは測定するもので、視聴や聴取はしません。「動画を視聴した」「聞いた」「バズる」とは決して言わないでください。何を測定したか、人間がまだ視聴・聴取すべきかを報告してください。

Step 0: 必ず初回チェックを実行(スキップ不可、推測不可)

  1. ワークスペース(デフォルト ~/motion-studio)を見つけるか作成する。<workspace>/direct-engine/node_modules がない場合、scripts/setup.sh <workspace> を実行(Node 20+、ffmpeg、Chrome が必要;スクリプトが不足を正確に教えます)。その後 python3 scripts/doctor.py <workspace> を実行し、結果を平易な言葉でユーザーに伝えます。
  2. 次に構築前にユーザーにインタビューする(references/onboarding.md を読み込む)。以下の順で、1回の短いメッセージで番号付きで質問します:
    • 動画の目的は?誰が見る?動画を見た後、視聴者に何をしてほしい?(コメント、クリック、購入)
    • 参考動画はありますか?ある場合、<workspace>/references/ にファイルを置くよう依頼し、それを分析する(references/reference-analysis.md を読み込む)。ない場合はその旨を伝え、ハウススタイルを使用することを提案し、リンクがあれば確認することを提案する。
    • 効果音、音声(自分で録音したものかテキスト読み上げ)、音楽はありますか?ない場合、無料の選択肢を伝え、セットアップを提案する(references/sound-and-music.md を読み込む)。音はオプションの飾りではありません:実際に録音された音のない動画は安っぽく感じられます。
    • 画面に表示する実際の証拠:実際の数値、スクリーンショット、ターミナル出力、製品 UI。数値を捏造しないこと。
    • プラットフォームとアスペクト比:16:9 または 9:16(references/social-ship.md を読み込む;Instagram リールは 9:16)。
  3. 計画を5行で伝え、ユーザーの了承を得てから構築を開始する。

パイプライン(各ステージにリファレンスがあります;該当ステージに到達したら読み込むこと)

  1. ブリーフ:1文の約束、5~8シーン、各シーンに1つの焦点。最初にフックを入れる。
  2. 言葉:短い話し言葉(各3~7語)、音声がオフでもメッセージが伝わるように画面上の言葉を配置。バズワードや em ダッシュ、AI 特有の言い回し(「アンロック」「エレベート」「シームレス」)は使わない。
  3. ルック:3色のパレット、1つのフォントファミリー、奥行き(ソフトライト、ボケ、ビネット)、1つの焦点オブジェクト。references/craft-rules.md を読み込む。
  4. ビルド:assets/starter を <workspace>/projects/<name>/ にコピーし、scene/main.js を編集する。シーンを書く前に references/scene-contract.md を読み込む。まず静止画をレンダリングし、次に --scale 1 でドライレンダリング、最後に --scale 2 で最終レンダリング。
  5. サウンド:シーン内にキューシートを作成、実際の録音音、音声、音楽をミックス、-14 LUFS、音声は他のすべてより 12 dB 上。references/sound-and-music.md を読み込む。
  6. 証明:scripts/scan_all.sh を実行、すべての P0 と P1 を修正、再スキャン、繰り返す。references/qa-and-fix-loop.md を読み込む。
  7. 公開:ソーシャルエクスポート、キャプション、投稿計画、オプションでノートPCモックアップ(references/laptop-mockup.md)。references/social-ship.md を読み込む。

厳格ルール(これらは測定値であって好みではありません)

  • フレーム 0 は完成したコンポジションで、決して黒では始まらない。0.35 秒までに何かが目に見えて変化し、最初の1秒で動きがある。少なくとも 2.6 秒ごとに可視イベントがある。2つの必須イベントは少なくとも 0.5 秒離れている。
  • 必読テキストは 1920 幅のフレームで少なくとも 54 px(電話で約 11 pt)。それより小さいテキストはテクスチャ専用で、メッセージを伝えてはならない。
  • 何もフレームあたり 45 px 以上動いてはいけない(テレポート禁止)。UI ではオーバーシュートは最大 10%、ヒーローポップでは 15%。transform と opacity のみアニメーション可能。テキストに will-change は使わない。粒状ノイズは控えめに。
  • 小さなアクセントテキストはコントラスト比 3:1 以上必要。明るいライムやイエローをクリームの上に使わない:小さいテキストにはより暗いインクバージョンを使用する。
  • オーディオ:-14 LUFS 統合、トゥルーピーク -1 dBTP 以下、音声はベッドの上に少なくとも 12 dB、ヒットは 500 Hz 以上のエネルギーを持ち電話スピーカーでも聞こえる、すべての可視ヒットはそのフレームに音がある。
  • 画面に出るすべての数字は、シーン内の実際のデータとその出典に基づく。架空の統計を入力してはいけない。
  • 1シーン1アイデア、1フォーカスオブジェクト、3つ以下の動く領域。カーソルは落ち着いた円形のオーブ;シーン変更はそれを引き起こしたものから成長する。

コマンド(ワークスペース = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

モーションリント:node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json の後 node qa/motion_lint.mjs series.json を実行。

効率的な作業方法

小さなステップ、短いメッセージ、スキャンが必要な場合のみ再レンダリング(フルレンダリングには数分かかります)。多くのサブエージェントを実行しないでください。静止画を使用してレンダリング前にルックを確認してください。修正グループごとに再スキャン。

報告

最後に:測定したもの(実際の数値)、人間がまだ視聴・聴取すべきもの、ファイルパスを報告します。チェックに失敗してパスした場合は、そのチェックと理由を明記してください。

関連スキル