/motion-review

name: motion-review
description: "Remotionコンポジションを20項目チェックリストで品質レビューする。 「動画レビュー」「motion review」「Remotion品質チェック」等のリクエストで発動。"
triggers:
  - 動画レビュー
  - 動画の品質チェック
  - motion review
  - motion-review
  - Remotion品質チェック
  - PVレビュー
  - video review

Motion Review Skill

Remotion コンポジションをプロの動画クリエイター視点でレビューし、品質改善指示を出すスキル。 GTM Manager / Campaign Orchestrator の Quality Review ステップで自動的に呼び出される。

トリガーワード

`motion review`, `video review`, `動画レビュー`, `PVレビュー`, `Remotion品質チェック`

入力

• Remotion コンポジションファイルのパス（`.tsx`）
• （任意）レンダリング済み mp4 のパス

実行フロー

1. Read composition .tsx
2. Run 26-point checklist (A-I categories below)
3. Output structured review with P1/P2/P3 ratings
4. If any P1 exists → VERDICT: FIX_REQUIRED
5. If P2 only → VERDICT: FIX_RECOMMENDED
6. If P3 only → VERDICT: PASS

Tone（レビュー出力の文体）

• 「プロの映像ディレクターが納品前に最終チェックする」トーン
• 各チェック項目は「OK — 理由」「P1/P2/P3 — 現状 → 修正指示」の形式。感想や曖昧な形容詞は使わない
• 良い点を1-2行で認めてから問題点に入る（例: 「A1 OK — OVERLAPが12f確保されており黒フレームなし。B1 P1 — spring configが全要素 damping:12 のみ → snappy/balanced/weighty/liquid の4段階に分離」）
• 修正指示は「ファイル名:行番号 + 現状コード + 修正後コード」の3点セットで出す

トレードオフ判断基準

• P1を全て潰す > P2を多数潰す（P1が1つでもあればFIX_REQUIRED）
• interpolateで確実に静止 > springで見栄え良くするが振れるリスク
• シーン分割して情報密度を下げる > 1シーンに詰め込んで尺を節約する
• OVERLAPを大きめ(12f)にして安全マージン > 最小(4f)にしてシーンを長く取る

---

26-Point Pro Review Checklist

Category A: シーン遷移（Transitions）

A1. シーン間の黒フレーム [P1]

**チェック**: Sequence が OVERLAP フレーム分重なっているか？

• NG: 非オーバーラップの Sequence（`from={starts[i]}` が前シーンの終了と一致）
• OK: `from={starts[i] - OVERLAP}`, `durationInFrames={frames[i] + OVERLAP * 2}`
• **判定基準**: 2フレーム以上の黒が入ったら P1

// NG
<Sequence from={starts[1]} durationInFrames={frames[1]}>
// OK
<Sequence from={starts[1] - OVERLAP} durationInFrames={frames[1] + OVERLAP * 2}>

A1.5. クロスフェード＋ズームトランジション [P1]

**チェック**: フェーズ間が CrossFadeWrap（opacity fade + subtle scale）で滑らかに繋がっているか？

• NG: 白フラッシュ(opacity 0.85)のハードカットのみ → ぶつ切り感
• OK: XFADE=10フレーム(0.33秒)のオーバーラップ + 退場時 `scale(1.0→1.03)` で奥行き感 + 補助的な薄いフラッシュ(opacity 0.2)
• **判定基準**: Sequence 間に opacity crossfade がなければ P1
• **実装パターン**:

const XFADE = 10;
const CrossFadeWrap: React.FC<{children; isFirst?; isLast?}> = ({children, isFirst, isLast}) => {
  const frame = useCurrentFrame();
  const { durationInFrames: dur } = useVideoConfig();
  const fadeIn = isFirst ? 1 : interpolate(frame, [0, XFADE], [0, 1], {extrapolateLeft:"clamp",extrapolateRight:"clamp"});
  const fadeOut = isLast ? 1 : interpolate(frame, [dur-XFADE, dur], [1, 0], {extrapolateLeft:"clamp",extrapolateRight:"clamp"});
  const scaleOut = isLast ? 1 : interpolate(frame, [dur-XFADE, dur], [1, 1.03], {extrapolateLeft:"clamp",extrapolateRight:"clamp"});
  return <AbsoluteFill style={{opacity: fadeIn*fadeOut, transform:`scale(${scaleOut})`}}>{children}</AbsoluteFill>;
};
// Offsets with overlap
for (let i = 0; i < frameDurations.length; i++) {
  offsets.push(acc);
  acc += frameDurations[i] - (i < frameDurations.length - 1 ? XFADE : 0);
}

• **フラッシュは補助のみ**: opacity 0.2以下。0.5超の白フラッシュは P1（目が痛い＋ぶつ切り感）

A2. トランジション手法の多様性 [P2]

**チェック**: 全シーンが同じ exit/entrance パターンになっていないか？

• NG: すべて `opacity fade` のみ
• OK: Direction Blur, clipPath wipe, scale zoom, flash wipe を混在
• **判定基準**: 3種類以上のトランジション手法があれば OK

A3. clipPath の連続性 [P2]

**チェック**: Before→After 等の対比シーンで clipPath wipe が連動しているか？

• NG: S03 exit と S04 entrance が別タイミングで黒が入る
• OK: Sequence overlap + 方向一致（S03 右ワイプ退場 → S04 左ワイプ入場）

---

Category B: モーション品質（Motion Quality）

B1. Spring Profile の差別化 [P1]

**チェック**: 要素の重さに応じた異なる spring config が使われているか？

• NG: 全要素が同じ `{ damping: 12, mass: 0.5, stiffness: 200 }`
• OK: 最低4段階（snappy / balanced / weighty / liquid）を使い分け
• **判定基準**: 2種類以下なら P1

// 最低限のプロファイル
const SP = {
  snappy:   { damping: 8,  mass: 0.2, stiffness: 250 }, // アクセント線、バッジ
  balanced: { damping: 12, mass: 0.4, stiffness: 180 }, // テキスト
  weighty:  { damping: 16, mass: 0.8, stiffness: 120 }, // ロゴ、ウィンドウ
  liquid:   { damping: 20, mass: 1.2, stiffness: 60 },  // 背景装飾
};

B2. セカンダリ・モーション [P2]

**チェック**: 以下のうち2つ以上が実装されているか？

• [ ] Post-landing breathing（着地後の sin 波微動 ±1-2%）
• [ ] Follow-through rotation（入場時の微小回転 ±2-3deg）
• [ ] Scale bounce（scale 0.9→1.0 を opacity と同時）
• [ ] Post-count pulse（数字カウントアップ完了後の脈動）
• [ ] Drift（全文字入場後の上方ドリフト + 微拡大）

B3. BPM 同期 [P2]

**チェック**: sectionDurations とアニメーション delay がビートグリッドに乗っているか？

• NG: `sectionDurations: [3, 3, 2.5, 3]`（非整数ビート）、`delay={14}`（任意フレーム数）
• OK: `sectionDurations: [3, 3, 2.4, 3]`（beat 倍数）、`delay={beat(1)}`（18フレーム単位）
• **判定基準**: BGM の BPM を確認 → `60 / BPM * fps` = 1 beat のフレーム数

const BEAT = 18; // 140 BPM @30fps
const beat = (n: number) => n * BEAT;

---

Category C: 映像品質（Visual Polish）

C1. Film Grain のアニメーション [P1]

**チェック**: Film Grain が毎フレーム変化するか？

• NG: 固定 seed（`seed='2'`）→ フリーズテクスチャ = ないほうがマシ
• OK: `seed={frame % 5}` でフレームごとにローテーション
• **判定基準**: 固定 seed で Film Grain があったら P1（削除 or 修正）

C2. 背景の Ken Burns [P2]

**チェック**: i2v / 画像背景に微ズーム（Ken Burns）があるか？

• NG: `<OffthreadVideo>` がそのまま（壁紙貼り付け感）
• OK: 親 div に `scale(1.0 → 1.05-1.08)` を `interpolate` で適用
• **判定基準**: 背景が完全に静止していたら P2

C3. Vignette + Grain + ScanLines [P3]

**チェック**: 以下の映像フィルターが適用されているか？

• [ ] Vignette（radial-gradient, intensity 0.3-0.4）
• [ ] Film Grain（animated, opacity 0.03-0.05, mix-blend-mode: overlay）
• [ ] Scan Lines（repeating-linear-gradient, opacity 0.01-0.02）
• **判定基準**: 1つもなければ P2、1つあれば P3

---

Category D: タイポグラフィ（Typography）

D1. フォントサイズの視認性 [P1]

**チェック**: 1080p 動画で最小テキストが読めるか？

• NG: 結果行 14px、ラベル 12px（動画再生時に判読不能）
• OK: 本文 18px 以上、ラベル 14px 以上
• **判定基準**: 18px 未満の本文テキストがあったら P1

| 用途 | 最小サイズ | 推奨サイズ | |------|----------|----------| | メインタイトル | 52px | 58-72px | | サブタイトル | 36px | 42-48px | | 本文 | 18px | 20-24px | | ラベル・キャプション | 14px | 16-18px | | 数字（カウントアップ） | 80px | 100-120px |

D2. タイポ基本設定 [P3]

**チェック**: 以下が設定されているか？

• [ ] `WebkitFontSmoothing: "antialiased"`
• [ ] `textRendering: "optimizeLegibility"`
• [ ] `lineHeight` が明示的に指定されている
• [ ] `letterSp