` - **検出方法**: `OffthreadVideo` を含むシーンで、兄弟/子要素の `rgba(` や `opacity` 値を確認 - **判定基準**: overlay opacity が 0.5 未満 or 0.7 超の場合は P2 #### J3. 静的PNG画像の長時間表示 [P2] **チェック**: 静的なPNG/JPG画像が3秒以上アニメーションなしで表示されていないか？ - NG: draw.io のスクリーンショットPNGを `` でそのまま3秒以上表示（紙芝居感） - OK: React SVGアニメーション化し、要素が `spring()` でスタッガード登場する - **変換指針**: draw.io等の図解PNGがある場合 → 構成要素（ノード、矢印、テキスト）を分解 → 各要素を ``, ``, ``, `` で再実装 → `spring()` でスタッガードアニメーション - **検出方法**: `

= 3` かつ `interpolate` / `spring` が画像に適用されていない場合 - **判定基準**: 3秒以上の静的PNG表示があったら P2（アニメーション化を推奨） --- ## 出力フォーマット ```markdown ## Motion Review Report **対象**: {composition_file_path} **評価**: {A+ / A / B+ / B / C+ / C / D} **VERDICT**: {PASS / FIX_RECOMMENDED / FIX_REQUIRED} ### P1 Issues (Must Fix) | # | Check | Issue | Fix | |---|-------|-------|-----| | 1 | A1 | シーン間に黒フレーム | Sequence を OVERLAP フレーム重ねる | ### P2 Issues (Should Fix) | # | Check | Issue | Fix | |---|-------|-------|-----| ### P3 Issues (Nice to Have) | # | Check | Issue | Fix | |---|-------|-------|-----| ### Passed Checks A1 ✓, B1 ✓, B2 ✓, ..., F1 ✓, F2 ✓, F6 ✓, ... ### 総評 {1-2行のサマリー} ``` ## 評価基準 | Grade | 条件 | |-------|------| | A+ | P1=0, P2=0, P3≤1 | | A | P1=0, P2=0, P3≤3 | | B+ | P1=0, P2≤1 | | B | P1=0, P2≤3 | | C+ | P1≤1, P2≤3 | | C | P1≤2 | | D | P1≥3 | ## 使用例 ### 単体実行 ``` motion review mv-composer/src/compositions/AgentCampBrandPV.tsx ``` ### Campaign Orchestrator からの呼び出し Quality Review ステップで `channel = TikTok | YouTube` の場合、成果物の Remotion ソースファイルに対してこのスキルを自動実行する。 VERDICT が FIX_REQUIRED の場合、Auto-fix Loop に入る（max 3回）。 --- ## Render & Review Loop（自己改善ワークフロー）レンダリング後に自動で品質チェックし、問題を検出したら修正→再レンダリングを繰り返す。 max 3イテレーションで収束させる。 ### トリガーワード `render and review`, `レンダリング＆レビュー`, `自己改善ループ` ### フロー ``` [1] Render npx remotion render src/index.ts {CompositionId} out/{Name}_v{N}.mp4 ↓ [2] QA Frame Extraction VIDEO=out/{Name}_v{N}.mp4 QA_DIR=data/qa_{Name}_v{N} mkdir -p "$QA_DIR" DURATION="$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$VIDEO")" ffmpeg -y -i "$VIDEO" -vf "fps=12/${DURATION}" -frames:v 12 "$QA_DIR/qa_%02d.png" → data/qa_{Name}_v{N}/ に12フレーム出力 ↓ [3] Visual Review（QAフレーム目視） Read ツールで各フレームを確認: - 黒フレーム検出（opacity=0の遷移境界） - テキスト見切れ・改行崩れ - 要素重なり・余白不足 - 色彩・視認性の問題 ↓ [4] Code Review（20項目チェックリスト）対象 .tsx ファイルを Read → 本スキルの A1-H8 をチェック ↓ [5] VERDICT 判定 ├─ PASS (P1=0) → 完了。ユーザーに結果報告 ├─ FIX_RECOMMENDED (P2のみ) → 修正提案をユーザーに提示 └─ FIX_REQUIRED (P1あり) → 自動修正 → Step 1 に戻る（max 3回） ↓ [6] Auto-fix（P1の場合のみ自動実行） - P1 の修正を .tsx に適用 - v{N+1} としてレンダリング - 再度 Step 2-5 ``` ### 実行方法会話内で以下のように指示: ``` CCTrend-All をレンダリングしてレビューして ``` Claude Code が以下を自動実行: 1. `npx remotion render src/index.ts CCTrend-All out/CCTrend-All_v1.mp4` 2. Step 2 の `ffprobe` / `ffmpeg` コマンドで12枚のQAフレームを抽出 3. QAフレームを Read で目視確認 4. .tsx を Read → 20項目チェック 5. レビューレポート出力 6. P1があれば自動修正 → v2 レンダリング → 再レビュー ### 注意事項 - **max 3回**のイテレーションで止める。3回で解決しない場合はユーザーに報告 - P2/P3 は自動修正しない。提案のみ - レンダリング前に `npx tsc --noEmit` で型チェック - QAフレームは `data/qa_{Name}_v{N}/` に世代管理（上書きしない） - 各イテレーションでバージョン番号をインクリメント（v1→v2→v3） ## TwinPlanetIntro 品質水準（参考: A グレード）以下は A グレードの実装で確認された技法一覧。新規コンポジションはこれらを参考にすること: | 技法 | 実装パターン | |------|------------| | 文字単位スタッガー | `chars.map((c, i) => spring({ delay: i * 4 }))` + translateY(30→0) | | 着地後呼吸 | `p > 0.9 ? Math.sin(frame * 0.08) * 0.015 : 0` | | clipPath ワイプ | `clipPath: inset(0 ${x}% 0 0)` で右→左に開示 | | 確定的パンの多様性 | `(i * 7 + 3) % 11` で seeded random motion | | Ken Burns 微ズーム | `scale(1.0 → 1.08)` over 120 frames | | Pulsing accent line | 着地後に `sin(frame * 0.12) * 3` で幅パルス | | 全画面フラッシュ | `[0,3,8] → [1,0.9,0]` で 8 フレームフェード | | Count-up + pulse | cubic ease-out → 完了後 sin 波 ±3% | | Blur 背景フォールバック | `blur(30px) brightness(1.1)` で背景穴埋め | | 統一退場アニメーション | SceneWrap: zoom-out 6% + fade |