Communitygithub.com

Iwang-f/motion-reel

コードからモーションビデオをレンダリングするスタジオ(canvas + window.seek(t)、Playwright、ffmpeg、合成サウンド)。ユーザーがローンチ動画、ショーリール、Reels、TikTok、ストーリーコンテンツ、アニメーション解説、モーション広告を依頼したり、下書きやカルーセルを動画にしたい、またはモーションスタジオリポジトリで「新しいフィルム」を欲しがったときに使用します。`/motion-reel build <film>` でボードが承認されたフィルムをビルドします。

motion-reel とは?

Motion Reel は、独自のエンジンでモーションビデオを構築するためのAIエージェントスキルです。このスキルは、プリプロダクション(企画、ストーリー、アセット、ボイスオーバー、ビートグリッド、ショットリスト、ボード)とビルド(`/motion-reel build <film>`)の2つのセッションに分かれており、ショットリストとボードに対するオーナーの1回の承認をカットポイントとします。サポートされるプラットフォームは、Claude CodeなどのターミナルベースのAIエージェントです。このスキルの仕組みは、まず `tools/brief.mjs` で企画を確定し、Visual Grammarに基づいてビジュアルワールドとスタイルガイドを定義し、ストーリーとVOスクリプトを作成、音楽のビートに合わせてショットリストを構成、`film.js` でボードを描画し、オーナーの承認後にビルドに移行します。ハードルールとして、`seek(t)` による純粋な時間関数の使用、コンテキストコスト管理、ファイルベースの状態管理などが厳格に定められています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Iwang-f/motion-reel-skill/tree/HEAD/.claude/skills/motion-reel

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

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

ドキュメント

Motion reel

このリポジトリの独自エンジンで新しいフィルムを構築します。ユーザーが明示的に指定しない限り、Remotion や HyperFrames に切り替えないでください。リポジトリのレンダリング契約は CLAUDE.md にあり、このファイルよりも優先されます。

フィルムは2つのセッションで実行され、ショットリストとボードに対するオーナーの1回の承認をカットポイントとして区切られます。

  • プリプロダクション(このファイル): 企画、ストーリー、アセット、ボイスオーバー、ビートグリッド、ショットリスト、ボード。
  • ビルド(/motion-reel build <film>): build.md を読んで従ってください。このファイルはスキップします。

カットにより、ビルドは新しいコンテキストで開始されます。プリプロダクションでは、ウィンドウにリファレンス、テイク、ボード画像が表示され、以降のターンはすべてそのコストを支払います。

1. 企画を確定する

オーナーの下書きに対して node tools/brief.mjs --in=<draft.md> を実行します(--film=<film> はプロジェクトが存在する場合に使用します。これにより、埋め込まれた base64 を含まない brief/original.md が書き込まれます)。ツールはヘッダー、予算に対するVOの単語数、および下書きで未確定の項目を出力します。下書きがない場合は、リクエストから docs/brief-template.md のヘッダーフィールドを埋め、各ギャップに対してデフォルトを提案します。オーナーは「oke」または修正で回答します。

コードに触れる前、クレジットを見積もる前に、未確定の項目を1つのメッセージで質問します。brief/decisions.md にすでにある回答はそのまま使用します。ツールが認識できない項目を追加します。

  • 重複: 同じ主題または柱に関する過去のフィルム(projects.json)。どれか、および今回のフィルムで追加する内容を述べます。リメイクの場合は古いフォルダーをそのまま残し、その decisions.md のどの回答がまだ有効かを尋ねます。
  • 製品 + URL(またはトピック)。OpenView フィルムの場合は、docs/content-map.md の柱とフォーマット。
  • ブランド: OpenView フィルムは lib/brand.js を使用します。その他のブランド: 色、フォント、1つのアクセントカラー、実際のロゴ。
  • リファレンス: フレーム、動画、または画像フォルダー。または「なし」(その場合はそのように述べます。デフォルトのルックはありません)。
  • 音楽: 提供されたトラック(長さを測定する)または「合成」(デフォルト)。
  • ボイスオーバー: .env に ELEVENLABS_API_KEY が必要です。空の場合は停止し、変数名を指定します。

言語、声、長さ、アスペクト比、主題(ティッカーを含む)、データソース(アプリ、キット、イラストレーション)、エネルギーが確定した時点で企画は確定します。これらの各項目が過去のフィルムの初回テイク後に変更されるとコストが発生します(mi-demo-40 はVOを3回支払いました)。回答を <project>/brief/decisions.md に記録します。

別のツールからのパッケージ(ストーリーボード、zip、ハンドオフ)は、変更を加えずに <project>/references/<tool>-<date>/ にコピーします。このフォルダーはコミット対象外です。その企画のみに対して tools/brief.mjs を実行します。決定にそのファイルが必要な場合のみ、その他のファイルを開きます。そのショットリストとスクリプトは、下書きの順序と同様に重要な素材です。

制限(企画または法的ルールにより画面に表示してはならない単語、図、事実)は <src>/forbid.json に入れます(tools/forbid-lib.mjs)。tools/vo.mjs はクレジットを使用する前にそれらを拒否し、tools/check.mjs は画面上でそれらを検出すると失敗します。パターンで認識できない制限(パーセンテージを伴わない名前など)は brief/decisions.md に記載し、すべてのボードとレビューシートと照らし合わせて確認します。

フィルムスラッグ([a-z0-9-]+)を選択します。以下のすべてはこれによって指定されます: <film>。

プロジェクトレイアウト。 新しいフィルムには、CONTENT プロジェクトフォルダー(CLAUDE.md 「新しい動画プロジェクトフォルダー」)と、projects.json への行 "<film>": "CONTENT/<n>. <Title> (<date>)" が与えられます。ツールはそこから検出します(tools/paths.mjs)。

  • ショットリストと企画: <project>/brief/(shotlist.md)
  • コード: <project>/src/(film.js、timeline.js、vo-lines.json、beats.json、sfx-<film>.mjs)
  • テイクとメディア: <project>/assets/
  • ボード、シート、レンダリング: <project>/output/

古いフィルムは docs/<film>-shotlist.md、film/<film>/、assets/<film>/、out/ を保持します。以下では、<shotlist>、<src>、<assets>、<output> は該当するものを意味します。

2. プリプロダクション

  1. アセット。 <assets>/ に配置し、アニメーションの前にリストします。

    • OpenView のロゴとシンボル: lib/brand.js を介してのみ描画します。SVG をフィルムにコピーしないでください。
    • OpenView マスコット: lib/mascot/ のコードリグ(lib/mascot/index.js のヘッダーとエクスポートのAPI)。
    • OpenView Market Intel: 最新の origin/main からの図と名前。Market Intel UI キットを使用してコードで描画します。企画が実際のアプリを要求する場合のみ、実行中のアプリをキャプチャします。その場合は CLAUDE.md の「Market Intel source」に従います。capture_mi.mjs --review からバンドを選択し、lib/proof.js で描画します。
    • URL を持つ別の製品: Playwright を使用して実際のスクリーンショット、ロゴ、色、フォントをキャプチャします。
  2. ビジュアルワールド。 REFERENCES/motion/visual-grammar-2026-10.md を読み、次に <shotlist> の先頭に ## World を記述します(すべてのショットの前に)。1つの場所、そのオブジェクト、その中に立つ人物、光の状態、企画内の各図と関係がどのように指示可能なものになるかを記述します。lib/world.js で描画します。デザインシステムは製品自身の画面に留まります。

    スタイルガイド。 リファレンスが存在する場合、最初にそれを測定します。 uv run --python 3.11 --with librosa --with numpy tools/ref_probe.py refs/<film>/ref.mp4 refs/<film>/analysis.json 次に docs/<film>-style_guide.md を記述します: パレット(16進数)、タイプ、ショット長、トランジション、カメラムーブ、テクスチャ、テキストの出入り方法。文法は採用し、コンテンツは採用しません。ハウスルックは CLAUDE.md の「Look」と docs/motion-vocab.md です。他のフィルムのスタイルガイドは、そのフィルムの記録であり、ハウスの記録ではありません。

  3. ストーリー。 story.md を読み、主題をそのトピックラダーに通し、スパインテーブルを <shotlist> の先頭に記述します(すべてのスクリプトの前)。スパインは、すべての行が埋まり、そのファイルの最後のスクリプトテストが最初の行とアウトラインに合格した時点で完了します。下書きの順序はここでは重要ですが、スクリプトではありません。下書きの ALUR CERITA と KANDIDAT HOOK(docs/brief-prompt.md)はその最初のバージョンです。VOの見積もりとともにスパインを表示します。これはフィルムを変更するのに最も安価な瞬間です。下書きから、同じメッセージで下書きがカバーし、スクリプトが削除する内容を、両方の単語数とともに指定します。pandu-supra-80 は最初のフィルムの後、「ga selengkap draft」として戻ってきて、拡張に3つの追加セッションが必要でした。

  4. ボイスオーバー(企画にVOがある場合): CLAUDE.md の「Voice-over」に従います。スパインから調査者ボイス(story.md 「The viewer」)でスクリプトを記述し、単語予算内に収め、図を発話時にカウントします。インドネシア語の1.7は、6つのフィルムが1.12(1.65~1.75 words/film-second)で実行されたため、完全な予算は企画の秒数に近くなります。character のデフォルトは calm, fair narrator, talking to one person です。次に <src>/vo-lines.json と story.md の最後のセクションを作成し、tools/script.mjs が合格するまで続けます。その credits 行が見積もりです。tools/vo.mjs で生成し、--check を渡します。定義と法律用語は、図と同様に references/sources.md に出典が必要です。R-120は登録名を画面から除外しますが、ソースファイルからは除外しません。 テイクがシーンの長さを決定します: <src>/timeline.js は lib/vo-clock.js 上のシーンリストです(sceneTimeline; モデル: iata-55)。node tools/prepare.mjs --film=<film> はテイクをチェックし、クロックを beats.json に書き込みます。

  5. ビートグリッド。 提供されたトラック: BPM/ビート/ダウンビート/ヒットを測定し(librosa)、<src>/beats.json に保存します。 合成: BPM を選択し、<src>/sfx-<film>.mjs を記述します。これは lib/synth.mjs 上のキューのリストです(モデル: iata-55 の src/sfx-iata-55.mjs)。これにより、beats.json と <output>/<film>-audio.wav(-14 LUFS)が出力されます。

  6. ショットリスト。 ビートグリッド上に <shotlist> を記述します。すべてのショットに、フレーム、カメラ、画面テキスト、SFX、そのスパインビート、docs/motion-vocab.md の使用するエフェクト、および次のショットへのカットの理由(次のステップ、同じポジション、因果関係、タイムジャンプ、コールバック、サイズ変更)を含めます。カットの理由がないショットは、カメラムーブとして次のショットに結合されます。製品への入り方を1つのムーブとして計画します。ワールドオブジェクトが画面になるようにし、カットの両側のショットでその名前を指定します。これは delisting-18-80(45~50秒)のビルドでオーナーの唯一のクリエイティブな修正を引き出しました。ここで密度をシーンごとに計画します。各ムーブが保持する動きの数です。なぜなら、最近のすべてのフィルムの最初のビルドは密度で4~5をスコアし、ラウンドを追加に費やしたからです。オーナーの承認が必要な決定をリストします。ここで停止しないでください。ショットリストはボードとともにオーナーに送られます。

  7. ボード。 最初に <src>/film.js でフィルムの最もワイドなショットと最もクローズなショットを描画します(エクスポート board: [{ t, shot, note }])。そのペアだけを確認します(node tools/board.mjs --film=<film> --only=<wide>,<close>、その -view.jpg)。これらは、ワールドがどれだけの情報を保持する必要があるか、およびその図がクローズアップに耐えられるかを示します。再描画には2ショット分のコストがかかります。次に、ショットごとに1つのスチルを描画します。 node tools/board.mjs --film=<film> を実行します。そのテキストは機械的なレビューです。warn … mid-move の行(t を確定フレームに移動)と layout の指摘(テキストが安全領域外、キャプションバンド内、重なり、小さすぎる)をすべて修正し、テキストがクリーンであることを確認するためにもう一度実行します。 ボードの -view.jpg 概要のみ、または18ショットを超える場合は印刷される pages をそれぞれ1回だけ、見た目を確認します。読みにくい部分を1パスで修正し、見た目-修正-再レンダリングのループは行いません。シーンごとのシート(--scenes はオーナー用であり、このレビュー用ではありません)。 その概要での見た目テスト: ミュートにして、画像だけでストーリーを追います。見知らぬ人がスライドではなく、場所、人々、物を見るはずです。キャプション以外に、ショットは最大6単語まで、オブジェクト上に表示します。企画が完全な形で要求するプルーフプレートと行は唯一の例外です。これに失敗する場合は、テキストをトリミングするのではなく、ショットを再描画します。

  8. オーナーレビュー(唯一のゲート)。 承認が必要な決定とともに、ショットリストとボード(<output>/<film>-board.png)を一緒に表示し、その単一の承認を待ちます。承認前はモーションやサウンドはありません。

  9. ハンドオフ。 オーナーがレビューを承認したら、<shotlist> の先頭に ## Build brief セクションを記述します。承認された内容、未解決の内容、ビルドに必要なファイル(フィルムモジュール、テイク、ビート、SFXスクリプト)を記載します。その後、新しいコンテキストでビルドを開始します。

    • デスクトップアプリ: 新しいコンテキスト(フォークではない)で新しいセッションを開始し、プロンプト /motion-reel build <film> を入力します。
    • ターミナル: オーナーに /clear を実行し、続けて /motion-reel build <film> を実行するよう指示します。

    プリプロダクションはここで終了します。オーナーによるショットリストとボードの承認が完了基準であり、ビルドは新しいセッションに属します。

3. ハードルール

  • 純粋な時間関数: seek(t) のみ。Math.random、タイマー、CSSトランジション、レンダーモードでの requestAnimationFrame、フレーム間の状態は禁止。
  • -view.jpg プレビューを開く。フル解像度画像は、1つのディテールの --crop としてのみ使用します。画像は見た目用です。機械的なチェックはツールの数値に依存します(node tools/check.mjs --film=<film>: シークスイープ、決定性、フォントpx、レイアウトlint)。
  • コンテキストがコストであり、ターンがそれを増幅します。300kでの1ターンは、100kでの3ターンと同じコストがかかります。最近のメッセージの3分の2は1つのツールを実行していました。1つのステップのすべての独立した読み取り、検索、編集を1つのメッセージで送信します。ツールは実行するものであり、読むものではありません(--help で使用法を確認)。編集は編集で行い、ファイル全体を書き直さないでください。長いコマンドはバックグラウンドで実行し、通知を待ちます。sleep やポーリングループは使用しないでください。
  • 別のフィルムのソースはテンプレートではありません。フィルムはコードの3~16%しか共有しません。必要な1つの関数を検索し(Grep、またはオフセット/制限付きRead)、その film.js は閉じたままにします。
  • 状態はファイルに保存されます: brief/decisions.md、references/sources.md、<shotlist>、docs/review_log.md。プロジェクトは250kで自動圧縮されるため、会話内でのみ保持されている事実はフィルムの途中で消える可能性があります。
  • シークレットは .env からのみ。キーを印刷、ログ、ペーストしないでください。
  • ブランドごとに1セッション。エンジン、シンセ、エクスポートパイプラインは再利用され、再構築されません。

関連スキル