cinematic-camera

シネマティックカメラ

remotion-best-practices および motion-graphics と併用します。つながりのないパネルを何もない空間に次々と出すのではなく、ひとつの連続した世界を構築し、その中を共有カメラで移動します。

必須の事前確認

計画やコーディングを始める前に、motion-graphics の事前確認ゲートに従ってください。指定がない場合は、次のように質問します。

どの形式にしますか：4:3 の Instagram 用ハーフスクリーン挿入映像、または 9:16 の Instagram 用全画面映像ですか？ 背景はどれにしますか：暖色系の明るい背景、すっきりした暗い背景、明るいグリッド、暗いグリッド？

9:16 や暗い背景を黙って既定にしないでください。選択を任された場合は、暖色系の明るい背景を使用します。

絶対的なビジュアル禁止事項

このスキルでは、ネオン、グロー、ブルーム、発光するエッジ、色付きの影、グラデーションのオーブ、放射状のカラーウォッシュ、シアンと紫のグラデーション、グラスモーフィズム、サイバーパンク風の照明を決して使用しません。カメラの動きによって、抑制されたシーンを雰囲気だけの AI デモに変えてはいけません。製品のアクセントカラーはフラットで控えめに保ちます。

承認済みリファレンスの必須確認ゲート

計画やコーディングを始める前に、以下を完了してください。

1. 同じプロジェクト、製品、アスペクト比、配置、またはビジュアルの仕組みに関連する、最新の承認済みレンダリングを 3～5 件確認します。
2. 元のコンポジションを開き、カメラのキーフレーム、タイミング、間隔、タイポグラフィ、色、情報密度、登場、退場、終了時のホールドを確認します。
3. 実際のクリップまたは代表的なフレームを確認します。ファイル名だけでは不十分です。
4. 本物のアセットを洗い出します：ロゴ、マスコット、スクリーンショット、録画、映像、過去の出力。
5. そのクリップが承認済みのシステムをどのように引き継ぐかを説明する、短いビートマップを作成します。
6. プロジェクトのリファレンスがない場合は、固定のフォールバックを使用します：暖色系のオフホワイトを基調とした物理的・エディトリアルな世界、濃いインク色、落ち着いたニュートラルカラー、控えめでフラットなブランドアクセントを 1 色、ニュートラルな影、装飾効果なし。

リファレンスの優先順位：同じ動画 → 同じ製品・シリーズ → 同じアスペクト比・用途 → リポジトリ内のその他の承認済みサンプル → 固定のフォールバック。

公式ギャラリー：https://github.com/Liamrjohnston/remotion-motion-graphics-skill

最近承認された制作物が基準であり、任意の参考資料ではありません。目新しさを狙って新しい美的スタイルを作り出さないでください。

基本コンセプト

ビューポートよりも大きなひとつの世界を構築します。アクションをクローズアップで始め、完了するまでホールドし、周囲の状況を見せ、対比や見せ場へ移動してから落ち着かせます。

パネルを使っても構いませんが、ひとつの世界と意味のある空間的な関係を共有させてください。何もない空間に、互いにつながりのないカードを別々に出すのは避けます。

カメラリグ

焦点とズームに、ひとつの共有キーフレームタイムラインを使用します。

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* focal x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* focal y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* Entire scene in world coordinates */}
  </div>
</AbsoluteFill>

• 寸法は確認済みの形式から決め、隠れた既定値は使いません。
• ワールドの幅は通常、ビューポート幅の 2～2.5 倍です。
• 連続するキーを繰り返すとホールドになります。
• カメラの移動には通常 14～24 フレームをかけます。
• 最後に、ほぼ同じ値のキーを 2 つ置いて、エディター上で安定してホールドします。
• カメラ、カーソル、エフェクト、つながりのあるオブジェクトは、同じ座標系に保ちます。

振り付け

1. すでに動いているものをクローズアップで映して始めます。
2. メインのアクションが完了するまでホールドします。
3. より大きなシステムを見せます。
4. 対比や見せ場へ移動します。
5. 引きながら、補助的なオブジェクトを順番に動かし終えます。
6. きれいにカットできるよう、最後は落ち着かせます。

ルール：

• カメラが次のアクションへ移動し、アクションはホールド中に完了します。
• 1 ビートにつき、メインのアクションは 1 つです。
• 状態を示す場合に限り、タイピング、時計の刻み、チェック、再生、進捗、カーソル移動などの細かな動きを使います。
• シーンを置き換えるより、連続的に変化させる方法を優先します。
• せわしない急旋回より、滑らかな移動を優先します。
• 動きは因果関係を説明するためのものです。弱いコンセプトの埋め合わせに使ってはいけません。

信頼性とテキスト

• 利用可能な場合は、本物のロゴ、映像、スクリーンショット、録画、UI、検証済みデータを使用します。
• 汎用的な色付きの四角形、偽のマーク、架空の UI、偽の数値に置き換えないでください。
• 製品名、ファイル名、カウンター、コマンド、進捗、本物の UI テキストは使用できます。
• ナレーションの文を繰り返したり、フレームが空いて見えるという理由だけで説明用のバッジを追加したりしないでください。

初回チェックでの却下基準

すべての回答が「いいえ」になるまで、レンダリング結果を表示しないでください。

1. フォーマットまたは背景が確認されていませんか？
2. ネオン、グロー、色付きの照明、グラデーションのかすみ、ガラスパネル、または雰囲気重視のAI表現がありませんか？
3. シーンが、何もない空間に一般的なカードをばらばらに配置したものになっていませんか？
4. ユーザーが選択していない、または承認済みの参考資料で必要とされていないのに、ダークテーマを使っていませんか？
5. カメラの動きは因果関係を導くのではなく、装飾になっていませんか？
6. 利用可能な場合に、実際のアセットが不足していませんか？
7. 選択したInstagramの表示位置で、重要な要素が読み取れなくなっていませんか？
8. 結果が、承認済みの参考資料の間隔、密度、素材、動きのリズムに合っていませんか？

チェックを通過するまで、非公開で修正してください。

QAと納品

1. 冒頭、各カメラの到達点、トランジション、見せ場、終了時の静止画をレンダリングします。
2. フレーミング、密度、アイデンティティ、素材の節度、仕上がりについて、承認済みの参考資料と並べて比較します。
3. 実際のアセットが読みやすい状態に保たれていることを確認します。
4. 静止 → 移動 → 静止になっており、移動中にアクションが隠れていないことを確認します。
5. MP4全体を確認し、移動中の空白、見切れ、動きのないフレーム、ありきたりな埋め草、ネオン／グロー、弱い終了時の静止をチェックします。
6. 同じ承認済みのビジュアルシステムに見える場合に限り、納品します。

技術的な制約

• useCurrentFrame()、spring()、interpolate()で動きを制御し、CSSアニメーションは使用しません。
• interpolate()の入力範囲は、厳密に昇順でなければなりません。
• 空間の広さは控えめにします。大きなぼかしや影付きのレイヤーはコストが高く、通常はビジュアルルールにも違反します。
• カウントアップするデータには、等幅数字を使用します。