create-motion-graphics

モーショングラフィックスの作成

プラグインホストとプロジェクト

chatcut MCP サーバーと、ユーザーのエディターの URL またはプラグインのプロジェクト結果にあるプロジェクト ID を使用します。このプラグインは、ローカル開発用 URL を含む Web エディターで動作します。Web プロジェクトでは ChatCut Desktop を開いたり、chatcut_desktop を使用したりしないでください。chatcut ツールが利用できない場合は、接続エラーを報告してください。代わりにエディターのネイティブ Agent にタスクを送信しないでください。

デザインの前にモーショングラフィックスの参考資料を探す

ビジュアルの方向性を確認する

制作では、承認済みのプロジェクトスタイル、またはユーザーから提供されたブランドや参考資料を再利用します。仕様全体をまだ把握していない場合は、manage_design_style get を使用します。通常のテキストや配置の編集では、新たなスタイルの選定やカタログの再スキャンは不要です。

新しい方向性が必要な場合、またはユーザーが他の候補の閲覧を求めた場合は、まず browse_library references: {view: "style-overview"} を使用します。番号付きコンタクトシートをすべて確認し、complete になるまで nextOffset に従ってください。ここには、既存の Design Styles とリンクされたものも含め、公開済みでエージェントが利用できるスタイルの代表例が含まれています。list_presets は従来のカタログの一部にすぎず、このビジュアル概要の代わりにはなりません。ページの読み込みに失敗した場合は再試行してください。黙って省略するのではなく、概要が未完了であることを報告します。

音声主体の動画では、候補となるスタイルを絞り込む前に、発話内容を把握し、代表的な動画フレームを確認してください。すでにコンテキストにある文字起こしやフレームの情報を再利用します。スタイルのプレビューと併せて、トピック、話し方のトーン、画面上の言語、映像の色合い、被写体の構図、背景を考慮します。

ビジュアルの方向性がまだ合意されていない場合は、現在のコンテンツと映像に合う候補を最大6つ選び、それぞれの hero パーツを確認します。ホストの widget-forms スキルを読み込み、実際の heroPreview.url 画像を短い名前とともに表示します。ツールから返された画像はエージェントが判断するための情報であり、ユーザー向けの選択画面ではありません。テキストだけの選択肢では、ビジュアルの違いが伝わりません。各選択肢を対応する参照 ID に紐付けます。選択肢を繰り返したり、別途「さらに表示」オプションを追加したりせず、フォームの「その他」分岐で好みや別の候補群を受け付けます。ユーザーがすでに方向性を選んでいる場合、またはスタイルの選択を明示的に委任している場合を除き、新しいスタイルを適用してモーショングラフィックスを制作する前に、選択を待ちます。「その他」という回答は承認ではありません。

選択したスタイルを適用する

選択した代表例の summary、hero、members を確認します。 manage_design_style を使って、その designStyleAction に従います。

• apply_preset：返された presetId をそのまま使用します。参照メタデータを保存するだけのために、プリセットを複製または更新しないでください。
• apply：既存の保存済みユーザースタイルに対して、返された designStyleId を再利用します。
• create：独立した参照例に新しいユーザー所有のスタイルが必要な場合に限ります。選択した参照例から、パレット、フォント、再利用可能なビジュアルルールを定義して保存します。参照例に記載されたパレットを再利用し、記載がない場合は代表画像から一貫性のあるパレットを導き出します。designSpec.referenceSources: [{id: "<reference ID>"}] と個別の heroPreview.url を、thumbnailUrl と designSpec.images: [{role: "style reference", url: "<heroPreview.url>"}] の両方に保存します。 applyToProject: true を使用し、配列にパッチを適用する際は既存の画像を保持します。

適用後、最新の完全な仕様とソース ID を get で取得します。以前のスタイルのキャッシュ済みルールを引き継がないでください。新しいスタイルの場合、パレット、フォント、ソース、カバー、参照画像が保存されたことを確認します。ソース ID だけでは画像は保存されません。 参照画像は視覚的な根拠であり、埋め込む映像や再現するサンプル文言ではありません。

画面上の実際のテキストに応じて、バイリンガルテキストやラテン数字も含め、fontRecommendations["zh-Hans"] / .en を使用します。承認済みのフォントプランがあれば再利用します。言語グループが空の場合は未解決です。参照例のタイポグラフィの特徴と見出し・本文の階層を再現し、グリフの対応範囲と実行時の利用可能性を確認します。選択したファミリーと役割を designSpec.fonts に保存し、言語、ウェイト、イタリック、必須の軸を styleGuide に保存します。別のスタイル向けのフォーム例で、このプランを代用することはできません。不足しているフォントを選定する場合、またはタイポグラフィを明示的に調整する場合に限り、フォントのマッチング を読みます。中国語フォントのマッチングは、英字の字形ではなく、生成した中国語の効果画像から始めます。

必要な MG フォームにインスタンスを対応させる

発話内容とターゲットフレームを使用して、どの MG フォームが有用かを判断します。 参照プレビューでその選択を絞り込みます。ビデオ全体で確認済みのビジュアル 言語を維持し、必要な各フォームに適したインスタンスを見つけます。 ユーザーが比較を求めない限り、インスタンスは自分で選択してください。異なるフォームで 異なるインスタンスを使用できます。繰り返し登場するコンポーネントは、検査済みのものを再利用できます。 返された場合は nextReferenceSearch に従ってください:

• 関連メンバーがある場合は、kind: "instance", styleId: "<representative UUID>" を 閲覧するか、関連するメンバー ID を読み取ります。
• 必要なフォームに適合するメンバーがない場合は、インスタンスライブラリ全体を コンテンツ/フォームの query または facets.form で検索し、styleId、facets.style、 スタイル名の用語は省略します。たとえ他のフォームに同じスタイルの一致が すでにある場合でもです。
• カバーコラージュを比較してから、選択した ID を parts: ["summary", "hero"] で読み取ります。 アニメーションには motion を、実装には code を追加します。コードに基づく 参照が templateInspection を返す場合は、保存されたプロパティスキーマ/デフォルト値のために その読み取り専用呼び出しを使用します。JSX は値を宣言せずに props を読み取ることがあります。 legacyTemplateRefs はテンプレート ID です: manage_template get はメタデータを読み取り、 list_assets は MG プロパティを読み取ります。どちらもテンプレートを適用したり コピーしたりするものではありません。inspect_asset は現在のプロジェクトのメディア/MG 用であり、 カタログのソース ID 用ではありません。

インスタンスのコンポジション、階層、スペーシング、reveal 構造を、固定された プロジェクトのフォント、パレット、マテリアル、実際のショットに適合させます。より広範な フォーム検索でも適合するものがない場合は、スタイルボードを拡張し、その制限を 明示します。関連する詳細の読み取りはバッチ処理します。1つのインスタンスを見つけても、 無関係なフォームをカバーするわけではありません。 分割レスポンスの場合は pendingIds に従います。known には、返されたバージョンと まだコンテキスト内にあるパーツのみが含まれる場合があります。各モーションシートは、 実際のタイムスタンプにおける1つのデザインです。モンタージュは1つのレイアウトではなく、 静止画像はアニメーションを確立しません。

新規または大幅に再設計されたトーキングヘッドオーバーレイについては、 オーバーレイコンポジションを参照してください。 結果に表示される materials の本番ファイルのみをインポートし、それらのプロジェクトアセット ID を使用します。ターゲットフッテージと合成された MG を確認します。

オーサリング時に参照を使用する

選択したインスタンスの実装を借用する場合はその code を読み取るか、 manage_template list_assets でリンクされたテンプレートプロパティを読み取ります。 下記のコードワークフローで参照として使用し、プロジェクトスタイルを維持します。

選択した画像も検査します。URL、ID、検索結果だけでは、閲覧済みの参照には なりません。外観には STYLE エビデンスを、構造にはスタイルを横断した FORM エビデンスを 保持します。選択した参照が失敗した場合は、検査済みと主張するのではなく、 再試行するか不足しているエビデンスを報告します。

ChatCut プラグインタスクで、インライン JSX としてオーサリングまたはパッチ適用される Motion Graphic アセットが必要な場合にこのスキルを使用します。組み込みの ChatCutエージェントには 独自の motion-graphic-gen ワークフローがあります。このプラグインタスクからそれに 切り替えないでください。

Codex プラグインの Motion Graphics は直接オーサリングされます。新しい JSX アセットには create_motion_graphic_from_code を、既存の MG JSX には edit_asset を使用します。 このサーフェスは submit_motion_graphic を提供しません。リクエストを Gemini プロンプトや 生成ブリーフに変換しないでください。直接オーサリングツールが欠けている場合は、 停止して、利用できない ChatCut プラグインツールを報告してください。

Motion Graphic ソースは chatcut MCP ツールを通じてインラインで渡します。ツールが インライン JSX を直接受け付ける場合、ChatCut リポジトリ、ai-working/、/tmp、 ローカル HTTP サーバー、生成されたコードファイル、推測されたアプリケーションパスに コードを配置しないでください。

基本原則

• キャンバスサイズ、fps、既存のビジュアル言語、配置、またはタイムラインの競合がまだ判明していない場合は、プロジェクトの状態を確認してください。
• JSX を作成する前に、コードを書く前に 必要な入力を特定してください。
• 利用可能なインラインコードアセットのワークフローを通じて、モーショングラフィックアセットを作成または更新してください。正確なペイロード形状については、現在のツールスキーマを使用してください。
• 編集にタイムライン上の配置が必要な場合は、タイムライン編集ワークフローを通じてアセットを配置または移動してください。
• 構造的または視覚的な変更の後は、プロジェクトの状態を再確認し、表示されるフレームを検証してください。

コードを書く前に

JSX を書く前に、この編集に必要な情報のみを特定してください。

• 配置: 開始時間、再生時間、判明している場合は対象レイヤー、およびグラフィックが合成される対象フレーム。
• 編集における役割: このモーショングラフィックが動画内で果たす役割。
• コンテンツ: 必ず表示される必要がある正確なテキスト、数値、メディア、または視覚的な事実。
• タイミング: 内部のモーションを音声、音楽、または視覚的なイベントに同期させる必要があるかどうか。
• ビジュアルソース: ユーザー提供のスタイル、プロジェクトのデザインスタイル、ブランドカラー/フォント、または承認済みの既存モーショングラフィック。
• 編集可能なフィールド: どのテキスト、色、数値、ブール値、画像、または動画の値をプロパティにするか。

結果を大きく変えるような、不足している重要な入力のみを尋ねてください。

ビジュアルシステムと配置

確認済みの完全なデザインスタイルと、上記で確認した参照を使用してください。新しい カスタムの方向性については、バッチ処理の前に 1 つの合成結果を確立してください。承認済みの 方向性や定型的な修正には、改めてのスタイル確認は不要です。

各コンポジション、位置、サイズ、可読時間は、実際のショット と発話のスパンから選択してください。共有のタイポグラフィ、パレット、マテリアル、モーションを維持しつつ、 参照のフォルムをコンテンツに適応させてください。固定の左右アンカーやカード コンテナは、コンポジションがそれを必要とする場合にのみ適切です。

同一の情報構造を持つ意図的に反復されるコンポーネントには、アイテムごとのプロパティを持つアセットを 再利用してください。新しい構造には、独自のインスタンス 参照とコンポジションが必要です。オーバーレイの境界はグラフィックをきつく囲むようにしてください。 タイムラインの寸法は、フレームに視覚的にまたがるデザインにのみ使用してください。

アセットの再生時間と内部のビートを、配置されたタイムラインスパンに一致させてください。タイミングが 大きく変わった場合は、未完成のアニメーションを切り詰めるのではなく、MG を更新してください。 バッチの合成済みの定着フレームを並べて確認し、衝突、 可読性、意図しない繰り返しを修正してから完了を報告してください。

編集可能なプロパティ

ユーザーに表示され、変更される可能性が高い値を編集可能なプロパティとして公開してください。

• 表示されるテキスト、プライマリカラー、アクセントカラー、主要な数値はプロパティにしてください。
• ユーザーが合理的に変更する可能性がある場合、フォントの選択は font プロパティにしてください。
• 画像および動画のソースは image / video プロパティにしてください。
• コードのキーは、プロパティスキーマのキーと完全に一致させてください。
• 値は item.props から読み取ってください。ユーザーが後で合理的に変更する可能性がある表示コンテンツをハードコードしないでください。
• アイテムレベルのプロパティオーバーライドは、視聴者のタスク、情報構造、視覚的フォルムが同一である、意図的に反復されるコンポーネントにのみ使用してください。これらのいずれかが異なる場合は、別の MG アセットを作成し、代わりにパレット、タイポグラフィ、モーションロジックを共有してください。

プロパティのエントリでは、安定したキー、ユーザー向けのラベル、タイプ、デフォルト値を宣言してください。サポートされるプロパティタイプには、テキスト、数値、色、ブール値、セレクト、フォント、画像、動画が含まれます。

フォント

モーショングラフィックスでは、プレビューとローカル書き出しの一貫性を保つため、ChatCut のレンダラーで利用できるフォントを使用する必要があります。STKaiti、PingFang SC、Microsoft YaHei、Arial、Helvetica、Comic Sans MS、system-ui、-apple-system など、マシン固有のシステムフォントや、汎用 CSS ファミリーを主要なレンダリングフォントとして使用しないでください。利用できるフォントはマシンによって異なり、フォールバックが発生する可能性があります。

フォントを選択または置き換えるときは、search_fonts を呼び出し、返された正規のファミリー名を fontFamily の値と、一致する font プロパティの defaultValue にそのまま使用してください。カタログに返される Google Fonts またはプロジェクトのカスタムフォントを使用してください。指定されたマシン固有のフォントがカタログにない場合は、ローカルで一貫してレンダリングできる保証がないことを説明し、似た雰囲気の対応フォントを検索して、ユーザーがフォントのフォールバックを明示的に受け入れない限り、そのフォントを使用してください。

アセットとコンポジション

1 つの参照例が、複数のタイムラインアイテムで構成される完全なコンポジションを示している場合があります。これは、自己完結型の MG アセットが 1 つあることを意味するものではありません。参照スクリーンショット、制作素材、現在のプロジェクトの映像素材は、区別して扱ってください。

一般的なメディアとグラフィックを組み合わせるデザインでは、デフォルトでアイテムを分けてください。

• 再利用可能な紙／テクスチャ／背景：コンポジションの背後に画像または動画アイテムを配置します。
• 現在のプロジェクトの写真、商品画像、映像素材：独立したメディアアイテムにします。エージェントが選択／置き換え、トリミング、配置、対応するエフェクトの適用を行います。ユーザーが手作業でレイヤーを組み立てることは想定していません。
• タイポグラフィ、図形、アニメーション装飾：透過 MG アイテムを使用します。メディアをその間に配置する必要がある場合は、背景の装飾と前景のテキストを分けます。

作成を始める前に、レイヤー順、対象のメディア矩形、開始時間／長さ、登場タイミングを計画してください。参照画像の写真や紙を再生成しないよう、MG の概要／コード範囲に、MG の外側にすでに存在するレイヤーを明記してください。前景のテキストに誤って影響しないよう、白黒／カラー／粒子のエフェクトは対象のメディアアイテムに適用してください。実際の再生／書き出し環境でエフェクトがサポートされていることを確認してください。レイヤーを分けただけでは、Web とデスクトップの互換性があることの証明にはなりません。

1. 現在のプロジェクトで browse_assets のアセットを再利用してください。出力に必要な制作ファイルのみを My Assets にインポートします。asset-import を読み込み、import_media セッション／アップロードヘルパーを使用してください。プロジェクトメディアを登録しても、パブリックリソースライブラリには公開されません。
2. 通常の制作メディアは、返された現在のプロジェクトのアセット ID を使用して edit_item で配置してください。エージェントが、例に含まれる人物、コピー、データを現在のタスクの内容に置き換えます。参照画像にあるエフェクト適用後の完成スクリーンショットを背景として使用しないでください。
3. 利用可能なタイムラインツールでは表現できない、画像で塗りつぶした文字や緊密に同期する内部マスクなど、視覚的な仕組み上必要な場合に限り、メディアを MG に埋め込んでください。この例外では、image／video プロパティのデフォルト値とオーバーライドを、URL、ローカルパス、参照ライブラリの ID ではなく、現在のプロジェクトの完全なアセット ID に紐付けてください。item.props 経由で読み取り、空の値をガードし、ランタイムにソースを解決させてください。画像プロパティを宣言しても、ファイルはインポートされません。
4. メディアの有無、トリミング、エフェクト、レイヤー順、タイミングを含め、登場時と表示が落ち着いた状態のフレームで、コンポジション済みのタイムラインを確認してください。独立した透過 MG のプレビューでは、別途配置された写真／背景は意図的に表示されません。デザイン全体の評価はタイムライン上で行ってください。メディアを意図的に埋め込んでいる場合、サムネイルが正しいだけでは再生できる証拠になりません。表示されない場合は、インポート、ID の紐付け、バイトデータの準備状況を確認してください。

ライブラリの hero／motion 画像は調査用の素材であり、表示するだけならプロジェクトにインポートする必要はありません。必要な制作ファイルが見つからない場合は、その旨を報告するか、利用可能な適切な素材に置き換えてください。必要なレイヤーを黙って省略してはいけません。

デザイン原則

確定したスタイルと確認済みのインスタンスに基づいて完成状態のフレームをデザインし、その後、そこへアニメーションで移行させます。参照元の階層構造と視覚的な関係性を活用して現在のコンテンツを読みやすくし、埋め草のラベルや既定のカード枠を追加しないでください。

明示されたタイポグラフィ、マテリアル、モーションのルールは制約として扱います。ハードカットのスタイルにフェードやスプリングを加えてはいけません。ガラス、グレイン、グローなどの表現は、採用されたビジュアル言語で求められる箇所にのみ使用します。参照元の表現上の選択だけでなく、抑制の度合いも維持してください。

キャラクター、イラスト、複合図形は、それぞれ単一の視覚的な要素です。複数のパーツを視覚的につなげたり、取り付けたり、位置をそろえたりする必要がある場合は、名前付きアンカーを使用し、共通の座標空間を持つ単一の <svg> 内にそれらのパーツを描画してください。個別のラッパーで left / top を別々にハードコードすると、目に見える隙間が生じます。

テキストレイアウトの安全性

テキストを含むMGでは、アニメーションを付ける前に、完成状態のフレームを実際のレイアウトとして設計してください。関連するテキストブロックには、Flexboxまたはグリッド、gap、padding、maxWidth、lineHeight、自然な折り返しを使用します。テキストを意図的な装飾やタイポグラフィアートとして扱う場合を除き、読みやすいテキストを、それぞれ独立してハードコードした top 値で積み重ねないでください。

編集可能なテキストは既定より長くなる場合があります。十分に長い文章も収まるようにスペースを確保し、whiteSpace: "normal" と overflowWrap: "break-word" で折り返せるようにしてください。コンテンツがきれいに収まらない場合は、階層、サイズ、密度を抑えるか、形式を変更します。

アニメーションによる変形はレイアウトに影響しません。テキストが拡大、脈動、スライド、またはスタッガーで他のテキストの近くに配置される場合は、アニメーションの最大状態を考慮した視覚的な余裕を確保してください。グラフィックレイヤー、影、マーク、装飾的なタイポグラフィには意図的な重なりを使えますが、通常の読みやすいテキスト同士を衝突させてはいけません。

動的なテキストでは、各行を意図的に固定する場合を除き、強制的な <br> や手動の改行は避けてください。幅を制約した折り返しを優先します。

次の基本コンポーネント形状を使用します。

const Component = ({ item }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  const props = item.props || {};
  const accentColor = props.accentColor;

  const rootStyle = {
    position: "absolute",
    inset: 0,
    backgroundColor: "transparent",
  };

  return <div style={rootStyle}>{/* content */}</div>;
};

モーショングラフィックコードの契約

違反すると実行時にクラッシュします。厳守してください。

1. 構文： JavaScript JSX のみを使用してください。TypeScript は使用できません。
2. インポート： import 文は使用できません。次のグローバル変数が事前に注入されています：React、spring、useCurrentFrame、useVideoConfig、interpolate、interpolateColors、Math、random、Easing、AbsoluteFill、Sequence、Series、Img、Video、Audio。
3. 注入済みグローバル変数の使用： フックとコンポーネントは直接利用できます。名前空間オブジェクトを介して参照しないでください。
4. エクスポート： export default は使用できません。const Component = ... を定義してください。
5. タイミング： コンポーネント内で Sequence をラップしてはいけません。フレームに基づくフラットなロジックを使用してください。
6. ロジック： JSX の props にインラインロジックを記述しないでください。return の前に変数で値を事前計算してください。
7. ヘルパー： 未定義の関数を使用しないでください。複数形の interpolateColors を使用してください。ヘルパーはすべてローカルで定義してください。
8. AbsoluteFill： AbsoluteFill はコンポーネントであり、スタイルオブジェクトではありません。スプレッド構文で展開しないでください。内側のレイヤーには使用できますが、ルートには使用しないでください。
9. ルート要素： ルートは <div style={rootStyle}> にしてください。
10. アセット： <Img> と <Video> のソースには、画像／動画の編集可能な props を使用してください。URL をハードコードしないでください。アセットが指定されていない場合は、図形、テキスト、CSS でデザインしてください。
11. フック： フレームは useVideoConfig() ではなく、useCurrentFrame() から取得してください。
12. ローカルボックス： コンポーネントは ({ item }) props を受け取る必要があります。アセットの width／height は、タイムラインのキャンバスではなく、表示されるローカル構成を囲むMG本来のボックスです。position:absolute; inset:0 でそのボックス全体を埋めてください。タイムラインの配置によって、最終的な画面サイズと位置が決まります。
13. レイアウト制御： テキストブロックや構造化コンテンツには、フレックスボックスまたはグリッドを使用してください。デザインが空間的な関係、複合図形、フレームの装飾、描画／アニメーションされるマークに依存する場合は、SVG または絶対位置指定のジオメトリを使用してください。1行表示が必要な場合を除き、テキストは自然に折り返すようにしてください。
14. 編集可能な props： item.props から編集可能な値を読み取る必要があります。props.key の後に || "Default" や ?? false などのフォールバック値を追加しないでください。宣言済みのランタイムプロパティには、すでに値が設定されています。
15. プロパティスキーマ： 一致する編集可能なプロパティを宣言してください。表示されるすべてのテキストコンテンツと主要色／アクセントカラーを含めてください。
16. 画像／動画の props： メディアプロパティにプロジェクトのアセット ID を保存し、item.props からランタイム値を読み取ってください。その値が真の場合にのみ、<Img>／<Video> を描画してください。
17. 背景： デフォルトの背景は透明です。背景面を追加する場合は、transparentBackground ブール値プロパティを公開してください。
18. エクスポートコスト： インラインの <svg> マークアップはフレーム間で変化しないようにしてください。エクスポート時にマークアップが変化した場合にのみ SVG が再描画されるため、<svg> 属性ではなくラッパーの <div>（transform、opacity）をアニメーションしてください。写真を含む SVG より HTML／CSS の図形を優先し、大きなぼかしレイヤーより boxShadow のグローを優先してください。どちらもエクスポートされるフレームごとに数倍のコストがかかります。

レンダラーの CSS 対応状況

レイアウトは安全です。flexbox、grid、gap、padding、margin、position、width、 height、inset、whiteSpace、overflowWrap は、エクスポートレンダラーが結果を 測定する前にブラウザーによって解決されます。これらの描画時プロパティは安全ではありません。エクスポートでは失われるか変更されますが、エディターのプレビューでは正しく表示されます。

• backdropFilter — レンダラーは要素の背後にすでに描画された内容をサンプリングできません。代わりに、映像をリアルタイムにぼかすのではなく、半透明の backgroundColor に境界線と柔らかな boxShadow を加えて、すりガラスのような質感を作ります。
• mixBlendMode / isolation — レイヤーは通常のブレンドモードでのみ描画されます。代わりに、最終的な色を直接指定するか、半透明の塗りつぶしを重ねます。
• zIndex — レンダラーは DOM の順序で要素を描画します。代わりに、上に重ねたい要素が最後に来るよう、要素自体の順序を並べ替えます。
• visibility: 'hidden' — 要素がエクスポートに描画されることがあります。代わりに、display: 'none' または opacity: 0 で非表示にします。
• backgroundBlendMode — 背景レイヤーは通常のブレンドモードでのみ描画されます。代わりに、最終的な色を直接指定するか、色の上に半透明のグラデーションを重ねます。
• perspectiveOrigin — レンダラーはこのプロパティ（およびこれが調整する perspective プロパティ）を読み取りません。代わりに、独自の transform に perspective() を含む要素の transformOrigin を使って、消失点を移動します。
• perspective（スタイルプロパティ）— レンダラーはこのプロパティを読み取らないため、3D 回転した子要素は、平らにつぶれたように描画されます。代わりに、回転する要素自身の transform の先頭に perspective() を指定します。例：transform: 'perspective(800px) rotateY(30deg)'。
• transformStyle: 'preserve-3d' — 入れ子になった 3D シーンは合成されないため、親要素の回転で向きが変わった子要素は表示されません。代わりに、各面をそれぞれ独立した要素として配置し、完全な transform（perspective()、共通のカメラ回転、面ごとの回転と translateZ）を指定します。backfaceVisibility: 'hidden' を追加し、面を奥から手前の順に並べます。
• gradient interpolation hints and color spaces — 色ヒント（red、30%、blue）や明示的な補間色空間（in oklch）は、エクスポート用レンダラーでは保持されません。代わりに、通常のグラデーション構文で中間色の停止点を明示的に指定します。
• boxShadow with inset — 内側のシャドウはスキップされ、外側のシャドウのみが描画されます。代わりに、グラデーション背景または半透明の境界線で内側に陰影を付けます。
• background / backgroundImage 内の url() — 画像背景は描画されず、単色の backgroundColor のみが反映されます。代わりに、コンテンツの背後に <Img> を配置します。
• vertical writingMode — 縦書きのテキストはまったく描画されません。代わりに、文字ごとに要素を作ってフレックス列に並べるか、横書きの行を 90 度回転させます。
• HTML 要素の filter: url(...) — SVG フィルターへの参照は無視されるため、要素にはフィルターが適用されずに描画されます。代わりに、CSS のフィルター関数（blur()、drop-shadow()、brightness()、…）を使用するか、独自の <svg> 内の図形に SVG フィルターを適用します。
• HTML 要素の clipPath: url(...) — クリップパスへの参照は無視されるため、要素は切り抜かれずに描画されます。代わりに、基本図形の circle()、ellipse()、inset()、polygon() または path('…') を使用します。
• URL masks with unsupported sources or layout — マスクローダーはラスター画像を必要とします（SVG マスクは使用できません）。また、サポートされていないサイズ、繰り返し、位置、原点、クリップ、またはアルファ以外のモードは受け付けません。代わりに、PNG/WebP のラスター画像マスクを使用し、maskSize: '100% 100%'、maskRepeat: 'no-repeat'、maskPosition: '0% 0%'、maskOrigin: 'border-box'、maskClip: 'border-box'、および maskMode: 'alpha' または maskMode: 'match-source' を指定します。または、グラデーションマスクを使用します。
• <svg> 内の currentColor — すべての <svg> は、マークアップと継承した色をキーとして画像にラスタライズされキャッシュされるため、フレームごとに色が変わると、各フレームで SVG のデコードが新たに発生します（数百個のグリッドでは、エクスポート速度が 10 fps から完全停止にまで落ちました）。代わりに、SVG の塗りつぶしと線に明示的な色または prop の値を指定し、多数の小さな図形のグリッドは、セルごとに <svg> を置くのではなく、CSS（border-radius のドットや境界線付きの三角形）で描画します。
• SVG <animate> / <animateTransform> / <animateMotion> / <set> — SMIL アニメーションはコンポジションのフレームではなくブラウザーの時計に従って実行されるため、プレビューはスクラブに追従しません。また、エクスポートでは各 <svg> が毎回新たにラスタライズされるため、アニメーションは常に最初の瞬間のままです（描画されていく線や伸びていくバーは表示されません）。代わりに、useCurrentFrame() と interpolate() または spring() を使って属性を制御します。例：strokeDashoffset={interpolate(frame, [0, 20], [length, 0], { extrapolateRight: 'clamp' })}。 エクスポート時に安全に使えるもの：filter: blur() のグローや boxShadow のグローは要素の範囲を超えて広がります。<svg> のルート要素は絶対配置やパーセント指定のサイズが可能で、<image> を含めることもできます。カンマ区切りのグラデーション背景やタイル状のグラデーション背景（backgroundSize ＋ backgroundRepeat）は、すべてのレイヤーが描画されます。大きくぼかしたレイヤーより、コストを抑えてエクスポートできる boxShadow のグローを優先してください。画面上の <svg> は、マークアップまたは継承された色が変わるたびに画像のデコードが発生するため、1フレームあたりの SVG は数十個程度に抑え、ドット、バー、三角形を繰り返すグリッドは通常の div で作成してください。

Canvas：<canvas>（2D および WebGL）は描画したとおりに正確にエクスポートされるため、パーティクルフィールド、プロシージャル描画、ノイズなど、ほかの方法では何百もの要素が必要になるものに使用してください。width／height 属性には CSS サイズと同じ値を設定し、React.useEffect(() => { ... }, [frame, props]) またはコールバック ref で描画してください。シークや分割エクスポートではフレームが順不同でレンダリングされるため、毎回 frame と props からキャンバス全体を同期的に消去して再描画します。タイマー、requestAnimationFrame、非同期処理は使用せず、前のフレームの状態を蓄積しないでください。コストの高い静的レイヤーは、React.useMemo 内で new OffscreenCanvas(w, h) を使って一度だけ作成し（document は使用できません）、各フレームで drawImage してください。Canvas のテキストには、すでに読み込まれているフォントしか使えないため、DOM 要素にも同じ fontFamily を設定してください。画像はキャンバスに描画できないため、代わりにその上または下に <Img> を重ねてください。フレームごとの描画は軽量にしてください。エクスポート時間にそのまま加算されます。

モーションツールキット。 これらのヘルパーは、エクスポート名のままグローバル変数として事前に注入されています（Remotion パッケージのほか、Icon、d3、culori、useGsapTimeline）。インポートしないでください。

• 自ら描画される線と形状のモーフィング（@remotion/paths）：getLength(d)、getPointAtLength(d, length)、getTangentAtLength(d, length)を使ってパスに沿って要素を動かします。interpolatePath(progress, fromD, toD)は一方の形状を別の形状へモーフィングします。evolvePath、parsePath、scalePath、translatePath、reversePath、cutPath、getSubpaths、normalizePath、warpPath、getBoundingBoxでパスデータを編集できます。SVGマークアップはフレーム間で不変に保つ必要があるため、ストロークやモーフィングのアニメーションには<canvas>を使います。ctx.setLineDash([len, len]); ctx.lineDashOffset = len * (1 - progress); ctx.stroke(new Path2D(d))で線が描かれていくアニメーションを実現し、ctx.fill(new Path2D(interpolatePath(progress, a, b)))でモーフィングします。
• 形状（@remotion/shapes）：makeStar、makePie、makeHeart、makeArrow、makeCallout、makeSpark、makeCircle、makeEllipse、makeRect、makeTriangle、makePolygonは{ path, width, height }を返します。コンポーネントの<Star>、<Pie>、<Heart>、<Arrow>、<Callout>、<Spark>、<Circle>、<Ellipse>、<Rect>、<Triangle>、<Polygon>は、これらを静的なSVGとして描画します。フレームごとに変化する形状（塗りつぶされていく円グラフなど）には、代わりにそのpathをキャンバスに描画します。
• 有機的な動き（@remotion/noise）：noise2D(seed, x, y)、noise3D、noise4Dは[-1, 1]の範囲で決定論的な値を返します。漂流、揺らぎ、浮遊するパーティクルには、Math.randomの代わりにframe / fpsを軸の1つとして渡します。
• テキストレイアウト（@remotion/layout-utils）：measureText({ text, fontFamily, fontSize, fontWeight })は{ width, height }を返します。fitText({ text, withinWidth, fontFamily, fontWeight })は幅いっぱいに収まるfontSizeを返し、fitTextOnNLinesとfillTextBoxは折り返しに対応します。キネティックタイポグラフィ（計測した幅に基づいて単語ごとに配置）、テキストに合わせて伸びる下線やハイライト、行幅ぴったりに収まるタイトルに使えます。レンダリング時と同じfontFamilyと太さで計測してください。createRoundedTextBox（@remotion/rounded-text-box）は、複数行テキストの背後に置くハイライト形状として{ d, boundingBox }を返します。
• スタイルと変形（@remotion/animation-utils）：interpolateStyles(value, inputRange, [styleA, styleB])はスタイルオブジェクト全体（色、不透明度、サイズ）を補間します。makeTransform([Transform.translate(x, y), Transform.rotate(deg), Transform.scale(s)])は、Transformのビルダー（translate、rotate、scale、skewと各X/Y/Zバリアント、perspective、matrix）から変形文字列を生成します。
• モーショントレイル（@remotion/motion-blur）：<Trail layers={6} lagInFrames={0.6} trailOpacity={0.9}>…</Trail>は素早い動きの後に残像を残します。子要素はuseCurrentFrame()からアニメーションする必要があります。カメラのモーションブラーには対応していません。エクスポート時にサンプルを合成できないためです。
• アイコン：<Icon name="rocket" size={56} color="#ffca28" strokeWidth={2} />は、ケバブケース名（"arrow-right"、"chart-line"、"shield-check"、"coffee"、"users"、"globe"、"lightbulb"、"brain"、…）で指定した任意のLucideアイコンを描画します。必ず明示的にcolorを指定し、アイコン自体のpropsではなくラッパー（scale、不透明度、位置）をアニメーションさせます。不明な名前は、最も近い実在する名前とともに拒否されます。
• チャート（d3.*）：スケール（d3.scaleLinear、d3.scaleBand、d3.scaleTime、d3.scaleOrdinal、…）、形状（d3.line、d3.area、d3.arc、d3.pie、d3.stack、d3.curveMonotoneXなどの曲線）、配列（d3.max、d3.extent、d3.range、d3.bin、…）、レイアウト（d3.treemap、d3.pack、d3.partitionを使うd3.hierarchy）に対応しています。d3が計算するのは数値とパス文字列だけです。バーやタイルはframeに応じて大きくなるように配置したdivとして描画し、生成されたパスはnew Path2D(d)を使って<canvas>にストロークまたは塗りつぶします（円グラフが大きくなる場合はarcGen({ ...slice, endAngle: slice.startAngle + (slice.endAngle - slice.startAngle) * progress })）。d3-selection、トランジション、タイマーは使わないでください。利用できません。
• 色（culori.*）：culori.interpolate([a, b], 'oklch')は、結果をculori.formatHexに渡せる0～1の関数を返します。OKLCHでブレンドすると、RGBで灰色を経由する場合よりも鮮やかな色を保てます。culori.wcagContrast(a, b)は背景に読みやすいテキスト色を選び、culori.samples(n)はパレット用の等間隔な色の値を返します。
• GSAPタイムライン（useGsapTimeline）：const scope = useGsapTimeline(({ timeline, selector }) => { timeline.from(selector('.word'), { y: 40, opacity: 0, duration: 0.5, ease: 'back.out(1.7)', stagger: 0.08 }, 0); })の後に、<div ref={scope}>…</div>を使います。タイムラインは一時停止され、現在のフレームに合わせてシークされるため、決定論的です。秒単位で再生時間を指定し、selectorを通じてclassNameで対象要素を指定します。play()、seek()、コールバック、ランダム値は呼び出さないでください（例外が発生します）。DrawSVG（{ drawSVG: '0%' }）、MorphSVG（{ morphSVG: targetPathElement }）、MotionPath（{ motionPath: { path, align, alignOrigin: [0.5, 0.5] } }）プラグインが登録されています。DrawSVGとMorphSVGはフレームごとにSVGマークアップを書き換えます。これはSVGをフレーム間で不変に保つルールの例外です。1つのグラフィックにつき最大2つのパスに使用し、それ以上の描画にはキャンバスを使ってください。GSAPがアニメーションさせるプロパティはGSAPに任せてください。その要素のtransformやopacityをReactのstyleでも設定しないでください。
• <FitText maxFontSize={56} minFontSize={32} lines={1} style={{ width: 360 }}>{props.value}</FitText>は、テキストが最大lines行でボックスに収まるまでサイズを小さくします。ボックスには幅の上限を設定する必要があります。
• 3D：エクスポート時にperspective()が投影されるのは要素自身のtransform内だけです。そのため、回転させる要素自体にtransform: 'perspective(800px) rotateY(30deg)'を指定します。立体形状（立方体、両面を持つ反転カードなど）を作る場合は、各面を兄弟要素にし、perspective(800px) rotateX(a) rotateY(b) <face rotation> translateZ(d)という完全なチェーンを適用し、backfaceVisibility: 'hidden'を設定して、背面から前面の順に並べます。
• useCurrentFrame、spring、interpolateなどの注入されたグローバルは直接呼び出してください。Reactから分割代入するとundefinedになります。 共有の Web 検証。 create_motion_graphic_from_code と edit_asset によるソース／スキーマの変更には、同じ Web バリデーターが使用されます。metadata.renderContract: "web-renderer-v1" を付与する前に、構文／API エラーと既知のレンダラー非互換性を修正する必要があります。不確実な静的検出結果は、レンダリング失敗ではなく、処理を妨げない警告です。最善を尽くした修正は最大 1 回まで行い、その後は繰り返し書き換えずに、スタンプが付与された結果を受け入れてください。アセットの編集では、報告された自動修正を適用できます。生成では、上限のある試行回数の範囲内で既知の非互換性に対する再試行を行い、それらが残っている場合はスタンプなしで完了することがあります。edit_item による配置とインスタンスの変更では、ソースの再検証やスタンプの書き込みは行われません。validateOnly では書き込みを行いません。inspect_asset と preview_timeline は引き続き読み取り専用で、スタンプを付与することはありません。デスクトップでは、別個のネイティブポリシーを使用します。

配置とレビュー

タイミングだけを根拠に JSX を作成しないでください。まず対象フレームを確認します。タイミングから分かるのは「いつ」かであり、フレームから分かるのは形状、配置、背景です。複数のオーバーレイをまとめて作成する場合は、対象フレームのスクリーンショットまたはコンタクトシートを1つ用意し、最終的なアンカー、サイズ、表示時間を決める前に、各 MG が定まった状態になるフレーム、発話の範囲、読み取り時間、配置の関係を判断します。

まず、定まった状態のフレームを設計します。MG が最も読みやすい瞬間を選び、その時点で最終レイアウトを配置してから、その構成へアニメーションさせます。

JSX を作成する前に、関連する4つの編集上の判断を行います。これらは、モーショングラフィックアセットの準備と、その後のタイムライン配置に役立ちます。

判断	問い	出力
内容	どのアイデアを視覚レイヤーにする価値がありますか？	MG が伝えるメッセージまたは視覚的な事実。
タイミング	いつ表示し、いつ消すべきですか？	発話の範囲、読み取り時間、表示時間、内部の動きのタイミング。
形状と配置	どのような MG で、合成後のフレームのどこに配置すべきですか？	MG の形状とサイズ、アセット作成後の edit_item 配置。
背景	映像に重ねるオーバーレイですか、それとも独立した場面ですか？	透明または不透明の背景。

配置の原則：

• 確認したフレームを基に、映像と MG を一体として構成します。被写体、カメラのフレーミング、視覚的な重み、字幕がある場合はその字幕、そして MG の役割を考慮します。
• その瞬間にフレームが最も見やすくなる位置に MG を配置します。
• ズームせずに動画の表示サイズで必要な情報が読めるようにします。MG が浮いているように感じられる場合は、形状、タイミング、スケールを変えるか、使用を見送ります。
• 字幕については、字幕がある場合、または表示予定の場合にのみ考慮します。
• 全画面 MG は、扱いにくいオーバーレイ配置の代替策ではなく、意図的な演出として扱います。

全画面の演出を意図している場合を除き、透明なオーバーレイを既定とします。透明なオーバーレイにも自然なボックスサイズのアセットを使用します。配置のためだけに、タイムラインサイズの透明なアセットを使用しないでください。

配置とレビュー：

• edit_item を使って配置します（追加／更新）。フレームが分かったら、明示的な矩形を指定するのが望ましいです。水平方向のアンカー1つ、垂直方向のアンカー1つ、幅、高さを指定します。
• スクリーンショットで確認します。1回のツール呼び出しで複数のフレームを渡すと、定まった状態とアニメーション途中の一時的なフレームを並べて確認できます。結論を出す前にフレームを比較してください。一部のフレームだけで見える切れ、要素の欠落、「デザインの破綻」は、実際の欠陥ではなくアニメーションによるものです。不明な点があれば、何かを調整する前に問題のあるフレームの前後を追加でキャプチャします。判断は定まった状態のフレームに基づいて行います。
• フレーム全体を確認します。必要な情報が動画の表示サイズで明確に見えること、字幕がある場合は読みやすいこと、MG の内容が正しいこと、テキストが判読できること、構成のバランスが取れ、意図が感じられることを確認します。
• テキストの多い MG では、最も多くのテキストが表示される定まった状態のフレームを確認します。テキスト同士の重なり、行の切れ、自然なアセットボックスからのはみ出し、アニメーションのスケールや移動の状態によって隠れる読み取り可能な内容がないかを確認します。
• 問題がある場合は、まず位置とサイズを調整します。位置やサイズで解決できない場合は、デザインの形状を変更します。繰り返し使用する各コンポーネントの形状は、展開する前に対象フレームで確認します。

アセットとタイムラインの流れ

新しいアセットを作成する

現在の ChatCut アセット作成ツールに、インライン JSX と編集可能なプロパティメタデータを渡して、新しいモーショングラフィックスアセットを作成します。正確なフィールド名と対応する時間形式については、ツールのスキーマを使用してください。

編集要件に基づき、MG の自然なボックス、時間、アセット名、説明、プロパティスキーマを選択します。アセットの時間は、内部の登場、表示、退場のタイミングを含め、配置予定の範囲に合わせます。アセット作成の手順ではアセットのみを作成します。タイムラインへの配置は別の手順です。

create_motion_graphic_from_code では、その自然なボックスを width／height に渡します。タイムラインの寸法は、意図的にフレーム全体を覆う MG にのみ使用してください。コンテンツが画面の一部だけを占める場合は、全画面キャンバスの MG に画面座標を組み込むのではなく、edit_item で範囲を指定したアセットを配置して拡大縮小します。

既存のアセットにパッチを適用する

パッチを適用する前に、既存のアセットコードとプロパティスキーマを確認します。要求された変更に必要な場合を除き、無関係な動作、プロパティキー、タイムラインのタイミングは維持してください。

現在のアセット更新ツールを使い、インラインソース全体を置き換えてパッチを適用します。

タイムラインに配置する

配置、移動、トリミング、インスタンスごとのプロパティオーバーライドには、タイムライン編集ワークフローを使用します。ツールが検証に対応している場合は、大規模または不確実なトランザクションをドライランで確認します。

検証

ツール呼び出しが成功しても、検証が完了したことにはなりません。

• アセットの作成または更新後に、アセットの状態を再度読み取ります。
• 配置、移動、トリミング、プロパティオーバーライドの後に、タイムラインの状態を再度読み取ります。
• 表示に関わる変更では、通常の ChatCut のビジュアル検証手順を使って、実際に合成されたフレームを確認します。
• バッチ処理では、合成後の静止フレームを並べて比較します。各ビジュアルジョブに適した形状になっていること、繰り返されるサーフェス／アンカー／リズムが意図的であること、各配置がそれぞれの対象フレームに適していることを確認します。
• 結果が正しくない場合は、再試行する前に原因を分類します。無効なツール形式、無効な JSX、プロパティキーの不足または誤り、タイムラインへの配置、アセットの非同期準備、キャンバス／エクスポートの安全性のいずれかを確認します。
• create_motion_graphic_from_code または edit_asset のエクスポート契約エラーには、ブラウザーのエクスポートで描画できないスタイルが一覧表示されます。それらを書き換えて再試行します。レガシー警告は、renderContract がなかったことを示します（Renderer CSS Support を参照）。
• 配置の問題はタイムライン編集で修正し、レンダリングの問題は JSX／プロパティの変更で修正します。