mcpField
M
motion-design-prompt-generator

motion-design-prompt-generator

github.com/8533502-devクリエイティブ・メディア437 回インストール6 日前に更新
リポジトリ

motion-design-prompt-generator について

AI コーディングエージェント向けのワークフロー技能で、モーション映像のプロンプトを Remotion プロジェクトに展開します。指示の保持、タイムライン設計、各要素の造形、レンダリング結果の確認を重視します。

主な機能

  1. 01プロンプトと変換の台帳
  2. 02デザイン契約とスタイルシード
  3. 03シーンのタイムライン設計
  4. 04要素別のデザインガイド
  5. 05批評とテンプレート感の確認
  6. 06決定論的な Remotion レンダリング

活用シーン

  1. 01短いアイデアを映像ブリーフに展開
  2. 02プロンプトからモーション映像を制作
  3. 03シーンの連続性とタイミングを確認
  4. 04レンダリング画像を確認してデザインを修正

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/8533502-dev/deepseek-opus-motion-skill --skill motion-design-prompt-generator

インストール後、Claude Code で/motion-design-prompt-generatorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

REFERENCE.md
安装说明.md
design-systems/
bold-poster.md
data-instrument.md
drafting-table.md
editorial-ink.md
README.md
riso-halftone.md
storybook-scene.md
swiss-kinetic.md
examples/character-rig/
README.md
examples/character-rig/src/
Film.tsx
examples/drafting-table/
README.md
examples/drafting-table/src/
Film.tsx
spec.ts
templates/remotion-starter/
package.json
tsconfig.json
templates/remotion-starter/scripts/
check.sh
cues.json
score.mjs
templates/remotion-starter/src/
Film.tsx
index.ts
Root.tsx
spec.ts
templates/remotion-starter/src/lib/
film.tsx
motion.tsx
templates/remotion-starter/src/scenes/
Scene01.tsx

詳細

Opus と同等のモーションフィルム(Remotion)

目標: 同じプロンプトを Opus 5.5 と、このスキルを実行するモデルに与えたとき、題材やスタイルにかかわらず、見た目、動き、音がほぼ同じフィルムができることです。

違いは、センスによるものではほとんどありません。振る舞いによるものです。Opus は次のことを行います。

  • 長いプロンプトに含まれるすべての指定を守る。
  • 曖昧な言葉を具体的なデザイン上の判断に落とし込む。
  • 仮のものですませず、すべての要素を適切にデザインする。
  • コーディングの前に、タイムライン全体を計画する。
  • 共有システムを構築し、一貫性を保つ。
  • 自分の出力を確認し、修正する。

より弱いモデルは、明示されない限り、これらを一つひとつ省略します。このスキルは Open Design アーキテクチャに基づき、これらを明示します。

Open Design の構成要素ここでの内容
ワークフローを担う機能的なスキルこのファイル:優先順位、各ステージ、要素別のプレイブック
すべてのレンダリングで読み込まれる DESIGN.md コントラクトsrc/spec.ts の冒頭にあるデザインコントラクト。design-systems/*.md はそのシードです
テンプレートtemplates/remotion-starter/。テスト済みです(完全なソースは REFERENCE.md を参照)
Design Jury による批評ゲートステージ 6:5 人の審査員が評価し、それぞれのスコアが ≥ 8 になるまで修正します
安易な仕上がりを防ぐチェックリストステージ 6 の禁止リスト
決定論的なレンダリングRemotion:各フレームはフレーム番号に基づく純粋関数です

優先順位

ルール同士が競合する場合は、次の順序を守ってください。

  1. プロンプト自体の言葉: すべての指定、ビート、コピー、禁止事項。
  2. スタイルに見合ったルックと完成度: 構図、配色、文字、そして適切にデザインされたすべての要素(プレイブックを参照)。テクスチャと光もここに含まれます。視聴者が最初に評価するのはここです。
  3. 連続性: 実際の変化、アイデンティティの持続、もっともらしい物理法則。
  4. リズムと音。
  5. 管理作業: 台帳、表、確認事項。これらは 1〜4 を支えるものであり、決して置き換えるものではありません。

ヘルパーと例は仕組みであって、スタイルではありません。 motion.tsx が決めるのは、要素の位置と動きです。見た目は決めません。プレーンなボックスや棒状の手足など、ヘルパーの無難なデフォルトをデザインとしてそのまま出荷してはいけません。別のフィルムに、例の題材、配色、レイアウトを流用してはいけません。どのフィルムにも独自のルックをデザインし、少なくともヘルパーなしで作る場合と同じ豊かさを持たせてください。

呼び出し方法

  • モーション作品の依頼には、すべてこのパイプラインを適用します。質問はせず、ステージ 1 で不足を補い、解读に記載します。
  • 新しいプロンプトは、毎回新しいフィルムです。 すでにフィルムを作成した会話内であっても、スターターから新たに作成します。ユーザーが変更を指示した場合(修改、改一下、在上一版基础上、fix this)に限り、以前のコードを再利用します。ファイルツールを使えるホストでは、フィルムごとに新しいプロジェクトフォルダーを作成します。
  • モード。 デフォルトでは作成します。只要提示词 / 扩写 / “prompt only” の場合はステージ 2 で停止し、拡張したブリーフを text のフェンス付きコードブロック 1 つとして出力します。
  • ホスト。 チャットのみの場合は、ファイルをコードブロックとして出力します(ステージ 7)。ファイルおよびシェルツールを使える場合は、ファイルを書き込み、npx tsc -p .、npm run render、npm run check を実行し、静止画を確認して修正した後、結果を報告します。
  • メッセージにアイデアが含まれていない場合は、「请给我一句话的创意或一段完整的提示词。」とのみ返信します。

Stage 0 — Opus のようにプロンプトを読み解く:3つの台帳

  • 仕様台帳 S01…:値や指示ごとに1行を設け、原文をそのまま引用します。対象には、長さ、サイズ、色、フォント、ウェイト、コピー、数、角度、位置、タイミング、イージング、禁止事項、ループまたはエンディング、キャラクター、ストーリーボードのすべてのビートが含まれます。spec.ts の FILM(長さ、fps、サイズ)はこれらの行に基づきます。スターターのプレースホルダー値を残してはいけません。プロンプトが途中で切れている場合は、最後に完結しているセクションの語調と密度に合わせて補完し、該当する行に S##* を付けます。

  • 変換台帳 X01…:変化を表す動詞(becomes、turns into、gathers、dissolves、unfolds、grows into、变成、化成、收拢、汇聚、展开)をすべて記録します。形式は source → target · mechanism · start–end s · what is conserved です。

  • 要素台帳 E01…:描画されるものをすべて、そのプレイブック(type、object、character、environment、data、UI、transition、texture-light、sound)とともに記録し、以下を列挙します。

    • 3つ以上の構造的な特徴。
    • サイズと座標。
    • 動き方。
    • キャラクターの場合は、デザインシートと名前付きポーズ。
    • 保持されるものの場合は、時間経過に沿った保持者。

    各シーンには、背面から前面へのレイヤー一覧も付けます。

すべての値は厳守してください。丸める、名前を変える、色を変える、タイミングを変える、省略することは禁止です。長いプロンプトの最後の3分の1も、最初と同じように重要です。2つの行が矛盾する場合は、より具体的な方を採用し、その旨を「解釈」に記します。コードでは:

  • 定数は spec.ts に置き、// S07 のようにタグを付けます。
  • ビルダーは film.tsx に置き、// E03 のようにタグを付けます。
  • ビートはシーンファイルに置き、// S31 X02 のようにタグを付けます。

Stage 1 — Opus のように不足を補う

プロンプトに記載がない項目に限って補います。台帳の行に記載された内容を上書きしてはいけません。

不足項目Opus らしい既定値
形式1920 × 1080。動きが多い場合は60 fps、落ち着いた作品やキャラクター作品の場合は30 fps。指定された形式は厳守します。手早く確認する場合は npm run preview を使い、FILM の値を下げてはいけません
長さとエンディングアイデア作品は15秒、ショーリールやブランドフィルムは30秒。リールやジングルはシームレスなループにします。ストーリーやプロモーションでは、まとまりのある最後の画面またはエンドカードにします
リズム雰囲気に合わせてテンポを決めます。落ち着いた作品は60–90 BPM、ブランド作品は110–128 BPM、エネルギッシュな作品は128–140 BPMです。密度の高い作品では各ビートにイベントを入れ、落ち着いた作品では各小節にイベントを入れます。密度の高い作品での静止は0.5秒以下、落ち着いた作品ではコピーを読むのに必要な長さにします
ナラティブ映像全体をつなぐモチーフまたは媒体を1つ設けます。各シーンは前のシーンから展開し、無関係なタイトルカードは入れません
カメラプロンプトで動きが示唆されていない限り、固定して正面から捉えます。ストーリー性のある作品では、世界全体を見渡すワイドショットで始めます
構図スタイルに応じた画面占有率と余白を考慮します。静止時に、画面の左右端から150 px以内、または上下端から90 px以内に要素を置いてはいけません
タイポグラフィ個性のあるフォントファミリーを1つ使います。見せ場となる単語や数字には、最も大きなサイズで最も太いウェイトを使います。ラテン文字:Inter、Geist、Space Grotesk、Fraunces。中国語:Noto Sans SC、Noto Serif SC
パレット役割を持たせた3〜5色を使います。アクセントカラーで次に起きることを予告します
テクスチャと光要素ごとに、そのサイズに合わせた素材感を設定します。光は、シーン内で根拠のある光源から当てます
細部映像に作り手の意図を感じさせる、繰り返し登場する小さなディテールを3つ加えます(ラベル、目盛り、凡例、タイムコード、標識など)。プロンプトにない主張、数字、コピーを追加してはいけません。プロンプトに表現がある場合は、その文言を使います
キャプションセリフ、歌詞、字幕など、画面に表示する文言はすべて、1080pで40 px以上、高コントラスト、画面下部3分の1に配置します。全文を、読み取れる時間だけ表示します(中国語は1文字あたり約0.25秒、ラテン文字は1秒あたり約3語)
サウンド雰囲気に合う生成スコアを使います。環境が主役のシーンでは環境音を使います。無音にするのは、明示的に求められた場合のみです

Stage 2 — 方向性:プロンプトからデザイン契約を導き出す

スタイルの由来:

  1. プロンプトでスタイルが指定されている場合(パレット、素材、書体、参考例など)。契約は台帳だけから導き出します。
  2. プロンプトで雰囲気、媒体、参考例が指定されている場合(「新聞のように」、「水墨」、「ターミナル」、「スイスのポスター」、「ピクサー風」など)。design-systems/ の中から最も近いシードを選び、調整します。
  3. **プロンプトがアイデアだけの場合。**以下の手法で新しい契約をまとめます。シードは出発点として任意であり、デフォルトではありません。

スタイルをまとめる手法(あらゆる題材に適用):

  1. **題材 → 世界。**この題材はどんな素材の世界に属しますか?紙、インク、ガラス、金属、布、画面、自然、都市、研究室などです。ひとつ選び、変化させる対照的な世界は最大ひとつにします。
  2. **対象者とムード → エネルギー。**落ち着いた雰囲気か、勢いのある雰囲気か。温かみがあるか、精密か。遊び心があるか、真面目か。これによりテンポ、イージング、オーバーシュート、密度が決まります。
  3. **具体化する。**形容詞ではなく値を使って契約を記述します。
    • **パレット:**役割を指定した16進数値。
    • **書体:**ファミリー、ウェイト、サイズ、トラッキング。
    • **描画要素:**線、塗り、形状をSVGの手法でどう描くか。
    • **テクスチャと光:**要素ごとに指定。
    • **構成:**画面占有率、余白、端のルール。
    • **モーションの特性:**動きの種類ごとのイージング。
    • **トランジションの文法:**どの仕組みでどのシーンを変化させるか。
    • 特徴的なディテール。
    • サウンドパレット。
    • 禁止事項。
  4. **陳腐な表現になっていないか確認する。**すべての選択を題材またはプロンプトに結び付けられる必要があります。ありきたりなグラデーション、グロー、テンプレートレイアウトを置き換えるために、契約を作成します。

design-systems/ のシード:

シード適した用途
drafting-tableプロセス、ツール、エンジニアリング
swiss-kineticブランド、ローンチ、ステートメント
editorial-ink文化、工芸、伝統、東アジアのテーマ
data-instrument解説、金融、科学
bold-poster音楽、スポーツ、若者
riso-halftoneインディー、レトロ、遊び心
storybook-sceneキャラクター、物語、MV

**短いプロンプト:**まず概要をOpus密度で完全に記述します。そこには方向性の段落、契約、構成(テンポ、名前付きシーン、シーンの変化)、キャラクター(いる場合)、タイムスタンプと数値を含むシーンごとのストーリーボードを記載します。その概要が台帳になります。プロンプトのみのモードでは、概要を出力して終了します。

Stage 3 — コードの前にタイムラインを作成する

  1. シーンごとに1行記述します:start–end s · name · what the viewer learns · carried element in → out · transition out (X##)。
  2. すべてのイベントを列挙します:t: element (E##) · action · numbers · ids。
  3. 主要な時刻をTブロックに記載します。
  4. 同じイベントからサウンドキューのリストを導き出します。

次に進む前の確認事項:

  • ビートが60/BPMの倍数になっていること。
  • 各シーンの終了状態が次のシーンの開始状態と一致すること。
  • 同じプロパティを同時に動かすアクションがないこと。
  • すべてが終了時刻より前に完了すること。
  • ループの場合、仮想時刻t = Dのフレームがフレーム0と一致し、すべての動きが静止していること。

Stage 4 — モーションの前にデザインを作る

  1. 各要素の構造的な特徴をもとに、モジュール単位で形状を作成します。
  2. キャラクターがいる場合は、まずキャラクターシートを作成します。名前付きのすべてのポーズで、各キャラクターが小道具を持った静止画を1枚作成します。
  3. 主要な構図をpx単位の正確なレイアウトとして確定します。フレーム0、各シーンまたは素材の最初の完全なフレーム、最終フレームが対象です。それぞれ、契約で定めた画面占有率と余白に合っているか確認します。
  4. これらの静的状態を、状態間のモーションより先にコード化します。弱い静止画をモーションで補うことはできません。ファイルツールを使うホストでは、まずレンダリングして確認します。

要素別プレイブック

すべてのリクエストは、以下の要素タイプで構成されます。それぞれの要素に対応するプレイブックを適用してください。

要素作成動かす確認(よくある失敗)
文字1つのファミリーを使用し、ウェイトとサイズで階層を付けます。サイズごとにトラッキングを設定し、大きな単語は1行に収め、指定された幅に合わせます。分割した単語や文字の間隔を維持し、CJK は縦書きにもできますEASE.out で登場させ、0.02~0.06 s の間隔でずらします。スロットでクリップし、レールに沿ってスライドさせ、スケールで表示します。退場前には読みやすい状態で一定時間表示します単語がつながっている、孤立した行がある、キャプションが小さすぎる、またはコントラストが低い、見せ場の文字が最も目立っていない
オブジェクト(アイコン、小道具、製品、シンボル)実物を構成する特徴を3つ以上取り入れます。立体感を出すため片側に陰影を付け、アウトラインの方針を統一し、関数として一度だけ作成します特性に沿って動かします。紙は折り目で曲がり、液体は波打ち、金属は軸を中心に回転し、光は切り替わります実物ではなくシンボルになっている、パーツが浮いている、ショット間でスケールが統一されていない
キャラクターシルエット、プロポーション、色、顔、模様をすべて color、face、parts で設計した Body デザインシートを作成します。ポーズには名前を付けます名前付きポーズ間を settle とともに poseMix でつなぎ、歩行には walk() を使います。小さくても読み取れる演技の動きを加え、小道具は grip() の位置に置き、held で描画しますショット間で見た目が変わる、手が持っている小道具に触れていない、手足が頭を貫通している、デフォルトの棒人間のような見た目、足が地面から離れている
環境(部屋、都市、風景、天候)空または壁、遠景、中景、地面、前景の順に、奥から手前へレイヤーを重ねます。光源とその光の形には理由を持たせます。フレーム内の2つの深度で天候を表現します常に続く環境の動き(天候、照明、小さなループ)を加えます。指示がない限りカメラは固定します平坦な背景、固体を通り抜ける天候、光の整合性がない、画面の端から端まで雑然としている
データ(チャート、カウンター、図、地図)まず軸と単位を設定し、台帳の値を正確に使い、ラベルを目印に付けます。1シーンにつきチャートは1つにします軸、データ、注釈の順に表示します。カウンターは目印とともに回転し、チャート同士は共通のスロットを通じて変形させます数値が誤っている、軸にラベルがない、装飾がデータに重なっている、プロンプトの表現を無視したラベル
UI/製品実際の画面、または忠実に再現した画面を使い、輪郭の鮮明な矩形、正確なプロポーション、適切な階層を保ちますカーソルまたは状態に応じて変化させ、変化する領域にズームしますスクリーンショットが引き伸ばされている、偽のインターフェースノイズ、小さな文字が読めない
トランジション物理的な仕組みを使います。モーフ(chain)、合流(converge)、マスクまたはワイプ(Reveal)、素材の変化(Reveal の下で MaterialLayer を2回使用)、展開、共通の形状に合わせたマッチカットを使います硬いエッジを使い、ビートに合わせて計画します。ターゲットの形成に合わせて、元の要素を消しますクロスフェード、プロンプトにないカット、要素が突然現れる、素材の変化をまたいでアイデンティティが失われる
テクスチャと光紙とインクを別々のレイヤー(Paper、roughFor に合わせたスケールの InkFilter)にします。パターンでハーフトーンとハッチングを表現し、光は形(光錐、明かりのついた窓、反射)として表しますシード値を固定して安定させるか、一定のステップレートで変化させますすべてに均一なテクスチャを使う、装飾的なグローやブルーム、シード値のないノイズによるちらつき
サウンドscripts/cues.json で、音楽にはピッチを付けたベッドと音形を、環境が中心のシーンには ambience のベッドを使います。映像のヒットごとにイベントを設定しますT ブロックに同期させます。ループの終端は冒頭につなげます設定漏れによる無音、音楽としてノイズを使う、ヒットの同期がずれている

全般的なルール

  1. 変化は本物であること。 すべての X 行では、同じオブジェクトが点ごとに変形します(点の数は同じにし、多数の形状には chain()、複数から1つへの変形には converge() を使います)。ターゲットが形作られると、ソースは消えます。ターゲットには完全に到達させます。プロンプトに「棒グラフになる」とあれば、最終形は棒グラフです。パーツはソースの位置で生まれ、移動します。結合や分割では、量を維持します。オーバーレイ、クロスフェード、フレーム全体の拡大縮小で変形を偽装してはいけません。
  2. アイデンティティを維持すること。 プロンプトで別の指示がない限り、要素はすべてのシーンや素材の変化を通じて、色、形、スロットを保ちます。形状はパレットインデックスを持つ Item として一度だけ記述し、各素材は MaterialLayer で描画します。互いに変化する要素には、同じスロット定数(レーン、ベースライン、アンカーなど)を使用します。
  3. 物理と奥行きを明示すること。 各シーンには、背面から前面へのレイヤーリストを設定します。天候は遮蔽物を考慮し、ガラス越しのものには色が付き、反射は元の像を鏡映し、影は同じ光源方向に従います。接触位置は計算します。足は地面に、手は持っているものに接します。
  4. 空間を表す言葉は座標であること。 1920 × 1080 の場合、中央は (960, 540)、左と右の3分の1は x ≈ 640 と x ≈ 1280、上部は y ≈ 360、下部は y ≈ 760 です。他の形式ではスケールを調整してください。
  5. エネルギーを均等に保つこと。 画面上の変化はテンポに合わせます。ピークは意図したアクセントとして計画し、意図的に静止させる場合を除き、何も起きない秒を作らないでください。npm run check で確認してください。
  6. デフォルトでサウンドを付けること。 サウンドの指定には score.mjs のみを使用します。音楽には音程のある楽器を使い、環境音には ambience ベッドを付けます。ノイズのアクセントは1秒未満に抑えます。スコアに音楽もアンビエンスもない場合、スクリプトは処理を拒否します。
  7. 完成させて確認すること。 すべてのシーンを書き終え、審査を実行し、すべての審査員のスコアが8以上になるまで修正してください。

ステージ 5 — Remotion で構築する

templates/remotion-starter/ (copy once)        tested on Remotion 4.0.537 + React 19.1.0
  src/index.ts src/Root.tsx      do not change
  src/lib/motion.tsx             helpers — do not change (API below)
  src/lib/film.tsx               your builders, Body sheets, Items (E##)
  src/spec.ts                    design contract, FILM, ledger constants (S##), T block
  src/Film.tsx                   master timeline: persistent layers, material changes, <Audio>
  src/scenes/SceneNN.tsx         one file per scene, absolute timestamps
  scripts/cues.json              sound cues (you write it) · score.mjs, check.sh — do not change

ルール:

  • 時間。 t が絶対秒数となる useTime() のみを使用します。CSS アニメーション、タイマー、Date、Math.random(rand または wobble を使用)、フレーム間での状態保持は禁止です。
  • シーンに <Sequence> を使わないこと。 すべてのシーンは絶対時間 t を受け取り、自身の時間枠外では null を返します。永続する要素は、フィルム全体を通じて Film.tsx で一度だけ描画します。
  • イージング。 EASE.* と settle() を使用します。Remotion 独自の Easing.exp は開始時に厳密には 0 にならず、非表示のレイヤーが漏れて表示されます。
  • 文字。
    • 固定表示の文字には HTML を使い、文字間隔を em で指定します。文字ごとの動きには <Letters> を使います。
    • パターン塗り、アウトライン、クリップには SVG の <text> を使います。
    • 縦書きの CJK には writingMode: 'vertical-rl' を使います。
  • フォント。 @remotion/google-fonts/<Family> から loadFont を使い、使用するウェイトのみを指定します。CJK ファミリーでは subsets を省略します。
  • サウンド。 FILM.sound = true にすると public/score.wav が再生されます。npm run studio、npm run preview、npm run render は、最初に cues.json からサウンドを再生成します。
  • 完全性。 TODO を残さないでください。ファイル内に書き切れない場合は、// CONTINUE FROM <path> を付けてファイルの末尾で止めてください。

ステージ 6 — デザイン審査

5 人の審査員が 1〜10 点で採点します。それぞれ、タイムスタンプ付きで最も悪い場面を 1 つ挙げます。

  1. 仕様。 すべての S、X、E 行が、指定された値どおりに実装されています。欠落または変更された ID を一覧にしてください。このスコアが総合点の上限を決めます。
  2. 連続性。 すべての X 行で、実際の変形が行われ、目標に到達しています。パーツはソースの位置で生成されています。アイデンティティとスロットは、シーンや素材を通して維持されています。物理挙動と奥行きが正しく表現されています。
  3. リズムとサウンド。 イベントはビートに合い、イージングは仕様と一致しています。予定外の急上昇や無音の秒数がなく、エネルギーは一定です。すべてのヒットにサウンドがあり、ループの継ぎ目は自然です。
  4. デザイン。
    • ヒーローフレームがレイアウトと一致し、占有率と余白が仕様と一致しています。
    • すべての要素がプレイブックのチェックを通過しています。文字、顔、手、小道具、データラベルを拡大した静止画を確認してください。
    • 見た目がこの映像のためにデザインされており、ヘルパーのデフォルトやサンプルのものではありません。
  5. 仕上がり。
    • テクスチャと光が要素ごとに設定されています。
    • 映像は決定論的で、Remotion のルールに従っています。
    • 禁止リストの要素が含まれていません。要求されていないグラデーション、グロー効果(ブルーム、ネオンの光輪、レンズフレア)、汎用的なフェードイン、禁止されている箇所でのバウンス、パーティクルバースト、カメラシェイク、RGB 分離、カードの上にタイトルを中央配置したレイアウト、ストックアイコンや絵文字、仮のコピー、テンプレートのように見えるものは禁止です。図形として描いた、動機のある光は使用できます。

8 点未満の審査員からの指摘をすべて、問題の深刻度が高いものから順に、最大 3 ラウンドで修正します。

ファイルツール対応ホストでは:

  1. npm run render を実行します。
  2. TIMES="<key moments>" npm run check を実行します。
  3. out/check/ のシート、静止画、audio.png、モーションカーブを確認します。

FAIL と表示された行はすべて修正してください。形式の不一致、残存する仮の仕様、音声の欠落、フレーム 0 の色のフラッシュ、不自然なループの継ぎ目が該当します。コードより静止画を優先してください。

ステージ 7 — 出力

チャットのみのホスト。 次の順序で返信します。

  1. 解釈(ユーザーの言語で、6 行以内):スタイルの参照元、前提、矛盾、推定した S##* 行。
  2. 台帳とタイムライン:S、X、E 行、シーン行、T ブロックを 1 つのフェンス付き text ブロックにまとめ、後続の修正ラウンド用に保持します。
  3. ファイル:各ファイルをパスを見出しとするコードブロックで示します。src/spec.ts、src/lib/film.tsx、src/Film.tsx、すべての src/scenes/SceneNN.tsx、scripts/cues.json が対象です。ユーザーにスターターフォルダーがない場合に限り、REFERENCE.md からスターターファイルをそのまま掲載します。
  4. パリティ表:
    • X## · source → target · helper · file。
    • E## · playbook · features drawn · builder · identity kept across materials。さらに、各キャラクターの時間経過に伴うポーズと小道具も記載します。
    • format · W×H fps duration · S##。

オーバーレイ、クロスフェード、またはフレーム全体のスケーリングで実装された X 行は失敗です。返信前に修正してください。 5. 審査結果:5 つのスコアと、確信が最も持てない 3 つの点。 6. 実行方法(ユーザーの言語で):

  • スキルパッケージ内の templates/remotion-starter フォルダーをコピーし、ファイルを対応する場所に配置します(使わない src/scenes/Scene01.tsx は削除します)。
  • npm install を実行します。esbuild の承認が必要と表示された場合は、npm approve-scripts esbuild && npm rebuild esbuild を実行します。
  • npm run studio でプレビューし、npm run preview で半解像度のプレビューを作成し、npm run render で out/film.mp4 を書き出し、npm run check で自己チェックします。
  • 問題があればスクリーンショットを送って、「審査修正」と伝えてください。

追加の依頼。 続けて → 残りのファイルのみを出力します。審査修正 → 静止画またはコードを対象にステージ 6 を実行し、変更したファイルのみを全文で出力します。

ファイルツール対応ホスト。 スターターからプロジェクトを作成し、ファイルを書き込んでから、npx tsc -p .、npm run render、npm run check を実行します。静止画を審査し、修正したうえで、フォルダー、スコア、MP4 のパスを報告します。

ヘルパー API(src/lib/motion.tsx)— ソース全文は REFERENCE.md にあります

Time      useTime() → {t, fps, frame, D, width, height} · prog(t, start, dur, ease) 0..1
          settle(t, fps, landing, {lead=0.05, dur=0.45, bounce}) spring that lands on a beat
          EASE.out / in / inOut (exact expo) · smooth · snap · linear · mix(a, b, p)
          beats(bpm).at(n) / .bar(n) / .index(t) · rand(seed) · wobble(seed, i, t) · stepped(t, perSecond)
Shapes    Pt = [x, y] · polygon(cx, cy, r, sides, rot, n=96) · circle(cx, cy, r, n) · line(x1, y1, x2, y2, n)
          toPath(pts, closed) · morphPts(a, b, p) · morphPath(dA, dB, p) · drawOn(d, p) → spread on <path>
Transform chain(t, [{at, dur, pts, ease}, …]) one object through many shapes
          converge(t, [{pts, arrive, mass, travel}], target, {baseRadius, radiusPerMass}) → {shapes, radius}
Materials Item = {d, c, w?} | {text, x, y, size, font, weight?, c, anchor?, spacing?}  (c = palette index)
          <MaterialLayer items material palette id/> material: {kind:'flat'} | {kind:'paper', shadow, shadowOpacity, edge}
          | {kind:'line'|'glass', width, fill} | {kind:'halftone', inks:[hex…], pitch, offset, angle:[deg…]}
          inkCoverage(hex, inks) → coverage per ink
Characters Body = {torso:[w,h], head:[w,h], upperArm, foreArm, thigh, shin, limb, hand, foot,
          color:{body, head, limb, hand?, shoe?, shade?, line?}, face?(box), parts?{head, torso, limb, hand, foot}(box)}
          Pose = {x, y (ground), facing ±1, lean, head, mood, look, armL/armR:[shoulder, elbow], legL/legR:[hip, knee]}
          angles in degrees: shoulder 0 down · 90 forward · 180 up; elbow bends forward; knee bends back
          <Character body pose back held front/> · grip(body, pose, 'L'|'R') hand point · nearSide(pose)
          poseMix(a, b, p) · walk(t, base, stepsPerSecond, swing) · shadeHex(hex, k) · rig(body, pose) joints
Texture   <Paper color grain fibre/> · <InkFilter id edge grain boil seed/> (filter="url(#id)") · roughFor(sizePx, strength)
          <RoughFilter id scale freq step/> · <Grain opacity freq blend/> · <Grid pitch major color/>
Layout    <Stage bg/> · <Canvas> full-frame SVG · <Reveal p from="left|right|top|bottom|circle" at/>
          <Letters text t start stagger dur ease style(p, i) box/> (keeps spaces) · <Counter from to p decimals/>
Sound     scripts/cues.json {duration, bpm, loop, palette, bed[], patterns[], events[]} → npm run score
          instruments: pluck bell pad ambience(rain|wind|room) tick kick clap hat whoosh drop knock scratch boom
Commands  npm run studio · preview · render · check (format, frame 0, loop seam, sound, motion curve)

コメント