igoharaujo/remotion-sun-video

スキル：Motion Video 3D（Remotion + Three.js + PiP）

使用するタイミング

• 「3D動画を作って、私が話してる動画を隅に表示して」
• 「[テーマ]についてのTikTok風映画動画を作って」
• 「3D背景とアニメーションする字幕付きの動画を作って」
• 「[私の音声/私の動画]でXについて話す動画を作って」

哲学（ゴールデンルール）

動画は創造的であり、テーマに文脈的に適合していなければなりません。 汎用的な3Dを追加するだけでは不十分です。台本の各フレーズは、そのコンセプトを翻訳する独自の視覚的要素を生み出す必要があります。例：

• フレーズ「8分20秒」→ デジタルオドメーターが8:20まで回転
• フレーズ「30万km/s」→ SF HUDスピードメーター、針付き
• フレーズ「飛行機なら3周する」→ 地球を周回する飛行機、軌跡付き
• フレーズ「光が太陽から地球に届く」→ レンズフレアのある光子が移動

ユーザーはこのレベルの文脈的創造性を要求します。決してフェードインするだけの静的テキストにしてはいけません。

前提条件（開始前に確認）

1. Node.js + npm がインストールされていること
2. FFmpeg がインストールされていること（brew install ffmpeg）
3. Whisper-cpp がインストールされていること（brew install whisper-cpp） — 単語の同期に必要
4. FREESOUND_API_KEY が ~/.zshrc に設定されていること（SFX API、必須）
5. ナレーターの動画/音声 が public/eu.mp4 または public/audio/*.mp3 にあること

不足しているものがあれば、停止してユーザーに知らせてください。

1. プロジェクト構造

~/Documents/[プロジェクト名]/
├── public/
│   ├── eu.mp4                 # ナレーターの動画（PiPがある場合）
│   ├── audio/*.mp3            # 純粋な音声（動画がない場合）
│   ├── images/[テーマ]/       # ダウンロードした画像（credits.json 付き）
│   └── sfx/                   # Freesound からダウンロードしたSFX
├── src/
│   ├── three/                 # 3Dシーン（Three.js）
│   ├── components/            # 字幕、HUD、オーバーレイ
│   ├── timeline.json          # すべてのタイミング（唯一の真実の情報源）
│   └── Root.tsx
├── scripts/
│   ├── align-words.py         # Whisper → 単語タイムスタンプ
│   ├── gen-sfx.mjs            # ローカル合成（パッド、ドローン）
│   ├── fetch-freesound.mjs    # 必須：APIからSFXをダウンロード
│   ├── finalize.sh            # -14 LUFS + faststart
│   └── contact-sheet.sh       # セーフゾーン付きコンタクトシート
├── out/
│   ├── final_[テーマ].mp4
│   ├── thumbnail.png          # 1080x1920 のカバー
│   └── contact_sheet.png
└── timeline.json

2. 必須ワークフロー（順序通り）

フェーズ0：ブリーフィング

ユーザーと確認すること：

• 動画のテーマ
• 音声の実際の長さ（決してオチをカットしない）
• カラーパレット（デフォルト：ディープブラック + テーマに合わせたアクセントカラー）
• 3D背景のスタイル（セクション3参照）
• PiP（動画がある場合）：位置は右下、x ≤ 940
• 字幕：キネティック（セクション5参照）

フェーズ1：セットアップ + Whisper

1. Remotion + @remotion/three + @react-three/fiber + three を初期化/確認
2. scripts/align-words.py を実行して音声を文字起こし
3. 各単語の正確なタイミングで timeline.json を作成
4. シーンをコーディングする前に停止し、承認を待つ

フェーズ2：テーマ別3D背景（セクション3参照）

フェーズ3：PiP（ある場合）+ 字幕 + HUD（セクション4、5参照）

フェーズ4：Freesound経由のSFX（セクション6参照）— 必須

フェーズ5：レンダリング + ミックス + コンタクトシート + サムネイル

3. 動的3D背景（創造性必須）

ルール： 背景を静的であってはなりません。継続的な動きと浮遊する要素が必要です。テーマに基づいてスタイルを決定します：

テーマ	3D背景
宇宙 / 宇宙	3層のパララックス星、微妙な星雲、地平線の惑星
プログラミング / テック	浮遊するコードマトリックス、「ビット」パーティクル、ワイヤーフレーム回路、アニメーショングリッド
iPhone / ミニマリスト	浮遊するほこりの粒子（低速、様々なサイズ）、ソフトなボリューメトリックライト、ストレンジャーシングス アップサイドダウンスタイル
自然	浮遊する有機的な葉/パーティクル、フィルターされた太陽光、パララックスによる奥行き
都市 / アーバン	遠くのネオンライト、雨のパーティクル、パララックススカイライン
科学 / ラボ	浮遊する分子、ワイヤーフレームの試験管、輝くパーティクル

常に含めるもの：

• パララックス（最低3層、異なる速度）
• カメラの動き（動画全体にわたる微妙なドリフト）
• ボリューメトリックライティング（柔らかな光、フラットではない）
• ポストプロセス（ブルーム、微妙なビネット）
• テーマに沿った色（汎用的なパレットは使わない）

4. PiP（トーキングヘッド）— 動画がある場合

• Remotion の <OffthreadVideo> を使用
• 正確なアスペクト比（顔を歪めない）
• 位置： 右下、ただしセーフゾーンを尊重（x ≤ 940）
• スタイル： 角丸24px、ソフトシャドウ、細い境界線
• 決して 元の動画の色、背景、アスペクト比、音声を変更しない
• スケールアップ は見せ場の瞬間のみ（例：1.12倍）
• 音声のみの場合： PiPの代わりに、声に合わせて脈動する「オーディオビジュアライザーHUD」を追加

5. 字幕（キネティック + 「長方形なし」）

アニメーションルール：

• 単語ごと（フレーズごとではない）— 各単語を発話の正確なフレームに配置
• イーズアウト + オーバーシュート（単語あたり約0.15秒）
• キーワード： 白くフラッシュ → アクセントカラーに落ち着く + グロー + 一時的にスケールアップ
• 事前にレイアウトされた行（単語が行を飛び越えないようにする）

⚠️ 重要なルール：長方形なし

テキストの背後に solid background-color を使用しないでください。 可読性のために、以下のみを使用：

• text-shadow: 4px 4px 8px rgba(0,0,0,0.9)
• filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8))
• オプション：孤立した単語の背後に不透明度15%以下の放射状グラデーション
• 絶対に使用しないこと： フレーズ全体を囲む <div style="background: rgba(0,0,0,0.7)">

テキストは背景の上に浮かんでいるように見え、カードのように見えてはいけません。

配置：

• 水平方向中央
• Y座標：1400〜1550
• 最小サイズ：72px（スマートフォンで読めるサイズ）

6. Freesound API経由のSFX（必須）

ユーザーはFreesound APIからサウンドをダウンロードすることを要求します。 ローカル合成のみを使用しないでください。

フロー：

1. ~/.zshrc に FREESOUND_API_KEY があることを確認
2. scripts/fetch-freesound.mjs を作成/使用して検索およびダウンロード
3. 最小限のSFXマップ（テーマに合わせて調整）：

場面	タイプ	Freesoundでのクエリ
オープニング	ソフトなデジタルブート	"soft digital boot"
テキストのインパクト	シネマティックヒット	"cinematic impact hit"
カウンター	クロックチック	"digital counter tick"
スピードメーター	スピードメーターのうなり	"engine whine pitch up"
飛翔物体	ジェットの通過音	"jet flyby whoosh"
3Dのリビール	盛り上がるライザー	"cinematic riser"
到着 / クライマックス	ブーム + チャイム	"cinematic boom chime"
最終CTA	ソフトチャイム	"soft notification chime"

4. 最初にCC0でフィルタリング。フォールバックはCC-BY（public/sfx/CREDITS.json に記録）
5. public/sfx/ に保存
6. 継続的なサウンド（スペースパッド、ドローン、ロングライザー）のみ scripts/gen-sfx.mjs でローカル合成

ミキシング：

• ボイス：決して加工しない（-14 LUFSを達成するための+ゲインのみ、リミッター-1 dBTP）
• SFX：ダッキング -3dB（ウィッシュ）、-8dB（ブーム）— つまり、ボイスの下でSFXを下げる、ボイスを下げるのではない
• スペースパッド：-24dB 継続、フェードイン1秒、フェードアウト2秒
• 最終ラウドネス：-14 LUFS、最大ピーク -1 dBTP

7. TikTok セーフゾーン（必須）

• キャンバス：1080x1920、60fps
• セーフエリア： x ∈ [60, 1020]、y ∈ [120, 1670]
• アクションバー（右）： x > 960 に侵入しない
• トップバー： y < 120
• ボトム（キャプション）： y > 1670
• PiP： 決して x > 940 に重ならない
• 常に セーフゾーンのオーバーレイ付きコンタクトシートで検証

8. 最終チェックリスト

• 長さ = 音声の実際の長さ（オチをカットしない）
• Whisperが単語ごとに文字起こしと同期を完了
• テーマ別3D背景 + 動的 + パララックス
• キネティックタイポグラフィの字幕、長方形の背景なし
• PiPがセーフゾーンを尊重（x ≤ 940） — ある場合
• 少なくとも5つの創造的な文脈的要素（HUD、飛翔物体）
• Freesound APIからダウンロードしたSFX（合成のみではない）
• ミキシング -14 LUFS / -1 dBTP
• セーフゾーンオーバーレイ付きコンタクトシート
• サムネイル生成（out/thumbnail.png）
• 3秒フック検証済み（3D要素 + テキスト + SFX + カメラ）
• ffprobe で 1080x1920、60fps、H.264 + AAC を検証

9. macOSのトラブル（Sandbox）への対処

Claude Codeが「Operation not permitted」でフォルダへのアクセス権を失った場合：

1. すべてのファイルをスクラッチパッドに準備
2. インストールとレンダリングを行う単一のスクリプト finish-v2.sh を生成
3. ユーザーが手動でターミナルで実行
4. Claude Codeは、ユーザーが貼り付けた ffprobe 出力を読み取る

常に 最後に手動フォールバックを含めること。

10. 画像のライセンスについて（ダウンロードする場合）

• 推奨： Wikimedia Commons（CC0/CC-BY/CC-BY-SA）— 常にライセンスを確認
• 推奨： Apple/公式企業（フェアユース編集目的）
• 回避： 無作為なサイト / Pinterest / ストック
• credits.json を保存：{filename, source_url, author, license}
• ダウンロード前に LICENSE_CHECK.md を作成し、それぞれを監査
• 明確なライセンスがない場合、Three.jsで代替案を手続き的に生成

---

要約： このスキルは、あらゆる台本を、テーマ別3D、キネティックタイポグラフィ、創造的なHUD、PiP（オプション）、Freesoundによるプロフェッショナルなサウンドデザインを備えたTikTok風映画動画に変換します。文脈に沿った創造性は必須です — 台本の各フレーズが独自の視覚要素を生み出す必要があります。