SonuSV7719/cinematic-camera

シネマティックカメラ

remotion-best-practices および motion-graphics と併用してください。一つの接続された世界を構築し、その中で共有カメラを移動させます。虚空に独立したパネルをポップアップさせることはしません。

必須インテーク

計画またはコーディングの前に、motion-graphics のインテークゲートに従ってください。見当たらない場合は、次のように尋ねてください:

どのフォーマットをご希望ですか: 4:3 ハーフスクリーン Instagram 用、または 9:16 フルスクリーン Instagram 用？ また、どの背景が良いですか: ウォームライト、クリーンダーク、ライトグリッド、ダークグリッド？

ユーザーが選択を委ねた場合は、ウォームライトを使用します。

絶対的ビジュアル禁止

このスキルは、ネオン、グロー、ブルーム、発光エッジ、色付きシャドウ、グラデーションオーブ、放射状カラーウォッシュ、シアン-パープルグラデーション、グラスモーフィズム、またはサイバーパンクライティングを決して導入しません。カメラの動きは、抑制されたシーンをバイブコーディングされたAIデモに変えることはできません。プロダクトアクセントはフラットで抑制されたままに保ちます。

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

計画またはコーディングの前に完了してください:

1. 同じプロジェクト、製品、アスペクト比、配置、またはビジュアルメカニズムに関連する最新の承認済みレンダーを3～5点検査します。
2. ソースコンポジションを開き、カメラのキーフレーム、タイミング、スペーシング、タイポグラフィ、色、密度、エントランス、エグジット、エンドホールドを検査します。
3. 実際のクリップまたは代表的なフレームを検査します。ファイル名だけでは不十分です。
4. 本物のアセットをインベントリ化します: ロゴ、マスコット、スクリーンショット、録画、フッテージ、および以前の出力物。
5. クリップが承認済みシステムをどのように継続しているかを説明する短いビートマップを作成します。
6. プロジェクトのレファレンスが存在しない場合は、ロックされたフォールバックを使用します: ウォームオフホワイトの物理的/編集的世界、ダークインク、ミュートされたニュートラル、1つの抑制されたフラットなブランドアクセント、ニュートラルシャドウ、装飾効果ゼロ。

レファレンスの優先順位: 同じ動画 → 同じ製品/シリーズ → 同じアスペクト比/ユースケース → 他の承認済みリポジトリの例 → ロックされたフォールバック。

正規ギャラリー: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

最近の承認済み作品がベースラインであり、オプションのインスピレーションではありません。目新しさのために新しい美学を発明しないでください。

コアアイデア

ビューポートよりも大きな1つの世界を構築します。アクションにタイトにオープンし、それが完了するまでホールドし、コンテキストを明らかにし、コントラスト/ペイオフに移動し、そして安定させます。

パネルは存在しても構いませんが、それらは世界と意味のある空間的関係を共有しなければなりません。空のスペースに独立して現れる切断されたカードを避けてください。

カメラリグ

焦点とズームのために1つの共有キーフレームタイムラインを使用します:

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`,
    }}
  >
    {/* 世界座標内のシーン全体 */}
  </div>
</AbsoluteFill>

• 寸法は確認されたフォーマットから取得され、隠れたデフォルトは使用しません。
• 世界の幅は通常、ビューポート幅の2～2.5倍です。
• 隣接する繰り返しキーはホールドを作成します。
• カメラの移動は通常14～24フレームかかります。
• 安定したエディタホールドのために、ほぼ同一の2つのキーで終了します。
• カメラ、カーソル、エフェクト、および接続されたオブジェクトは、1つの座標系に留まります。

コレオグラフィ

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() の入力範囲は厳密に増加している必要があります。
• 世界は適度に保ちます。大きくぼかした/影付きのレイヤーは高コストであり、通常はビジュアルルールに違反します。
• ティックデータには等幅数字を使用します。