シネマティックカメラ
remotion-best-practices および motion-graphics と併用してください。切断されたパネルを虚空にポップアップさせるのではなく、一つの接続されたワールドを構築し、その中で共有カメラを移動させて映像を作り上げます。
必須の情報収集
計画やコーディングを始める前に、motion-graphics の情報収集ゲートに従ってください。見つからない場合は、次のように質問します。
どのフォーマットを希望されますか？4:3のハーフスクリーン（Instagram挿入用）か、9:16のフルスクリーン（Instagram用）ですか？また、希望する背景は、ウォームライト、クリーンダーク、ライトグリッド、ダークグリッドのいずれですか？
ユーザーに確認せずに9:16やダークをデフォルトにしないでください。ユーザーが選択を委ねた場合は、ウォームライトを使用します。
絶対的なビジュアル禁止
このスキルでは、ネオン、グロー、ブルーム、発光エッジ、色付きシャドウ、グラデーションオーブ、放射状の色の滲み、シアン-パープルのグラデーション、ガラスモーフィズム、サイバーパンク照明を決して導入しません。カメラの動きが、抑制の効いたシーンを「バイブス重視のAIデモ」に変えてはいけません。プロダクトのアクセントはフラットで控えめに保ちます。
必須の承認済みリファレンスゲート
計画またはコーディングを開始する前に完了します：
- 同じプロジェクト、製品、アスペクト比、配置、またはビジュアルメカニズムに関連する、最新の承認済みレンダリング3〜5件を検査します。
- ソースコンポジションを開き、カメラのキーフレーム、タイミング、スペーシング、タイポグラフィ、色、密度、エントランス、エグジット、エンドホールドを検査します。
- 実際のクリップまたは代表的なフレームを検査します。ファイル名だけでは不十分です。
- 本物のアセット（ロゴ、マスコット、スクリーンショット、録画、映像、以前の出力）を棚卸しします。
- クリップがどのように承認されたシステムを継続しているかを説明する、短いビートマップを作成します。
- プロジェクトのリファレンスが存在しない場合は、固定されたフォールバックを使用します：ウォームオフホワイトの物理的／編集的なワールド、ダークインク、ミュートされたニュートラル、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, [/* 焦点 x */], {
easing: ease,
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* 焦点 y */], {
easing: ease,
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* ズーム */], {
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つのプライマリアクション。
- マイクロモーションは状態を示すためだけに使用します：タイピング、ティック、チェック、再生、進行状況、カーソル移動。
- シーン置換よりも連続的な変換を優先します。
- 狂ったようなホイップよりも滑らかな移動を優先します。
- モーションは因果関係を説明します。弱いコンセプトを補うために使用してはいけません。
真正性とテキスト
- 利用可能な場合は、実際のロゴ、映像、スクリーンショット、録画、UI、検証済みデータを使用します。
- ジェネリックな色付きの四角、偽のマーク、架空のUI、偽のメトリクスを決して代用しないでください。
- 製品名、ファイル名、カウンター、コマンド、進捗状況、実際のUIテキストは使用可能です。
- フレームが空っぽに感じられるからといって、ナレーションの文章を繰り返したり、説明バッジを追加したりしないでください。
初回拒否ゲート
すべての質問に「いいえ」と答えられるまで、レンダリングを表示しないでください：
- フォーマットまたは背景が未確認でしたか？
- ネオン、グロー、色付き照明、グラデーションの滲み、ガラスパネル、バイブス重視のAI処理はありますか？
- シーンは、虚空に浮かぶ接続されていないジェネリックなカードの集まりですか？
- ユーザーが選択したか、承認されたリファレンスが必要としているわけでもないのに、ダークが使用されていますか？
- カメラの動きが因果関係を導くのではなく、装飾していますか？
- 本物のアセットが利用可能であるにもかかわらず、欠落していますか？
- 選択されたInstagramの配置で、重要な要素が判読不能ですか？
- 結果が、承認されたリファレンスのスペーシング、密度、マテリアル、モーションリズムと一致していませんか？
ゲートを通過するまで、非公開で修正してください。
QAと納品
- オープニング、各カメラの到達地点、トランジション、ペイオフ、エンドホールドの静止画をレンダリングします。
- 承認されたリファレンスと並べて、フレーミング、密度、アイデンティティ、マテリアルの抑制、洗練度を比較します。
- 本物のアセットが判読可能であることを確認します。
- ホールド→移動→ホールドであり、移動中にアクションが隠れていないことを確認します。
- 完全なMP4を検査し、空の移動、クロップ、デッドフレーム、ジェネリックなフィラー、ネオン/グロー、弱いエンドホールドがないか確認します。
- 同じ承認されたビジュアルシステムのように見える場合にのみ納品します。
技術的制約
useCurrentFrame()、spring()、interpolate()を使用してモーションを駆動します。CSSアニメーションは使用しないでください。interpolate()の入力範囲は厳密に増加している必要があります。- ワールドは適度なサイズに保ちます。大きなぼかし/シャドウレイヤーはコストが高く、通常はビジュアルルールに違反します。
- ティックデータには表形式の数字を使用します。