xbear-motion-kurgu
トーキングヘッド動画を、2つの世界を行き来するエディトリアルモーション編集に変換します： ダークな A-roll（顔＋字幕） ↔ クリーム キャンバス（説明、証拠、数字）。編集はRemotionで行われます。
黄金律： どのシーンも、承認なしにビデオとしてレンダリングされません。最初にデザインページ（PNG）が表示されます。
0. ファイル（ルート: ~/Desktop/seckin_ayazlar/）
| 項目 | 場所 |
|---|---|
| このスキル＋インデックス | 06_skill/xbear-motion-kurgu/SKILL.md, REFERANS_INDEKSI.md |
| スタイル概要（寸法） | 05_stil_calismasi/STIL_OZETI.md（ルールが不明確な場合のみ読む） |
| アニメーションカード | 05_stil_calismasi/animasyonlar/<tür>/<id>/kart.md + in/peak/out.png |
| ブランド（すべてに優先） | 02_marka/marka_notu.md, fontlar/, logolar/ |
| Remotionプロジェクト | remotion-studio/ → コンポーネント src/xbear/ |
| 文字起こしツール | remotion-studio/scripts/transcribe.sh <video> <çıktı> tr → <ad>.words.json |
| プロジェクト出力 | 07_projeler/<proje>/（デザインページ、最終MP4、シーンリスト） |
| コンポーネントテスト | 05_stil_calismasi/bilesen_testleri/ |
| 効果音 | 03_sfx/<tür>/（ソース） → scripts/sfx_esitle.py → public/sfx/ + src/xbear/ses/kutuphane.ts。測定: 05_stil_calismasi/SES_ANALIZI.md |
競合時の優先順位：marka_notu.md > このファイル > STIL_OZETI.md。
1. スタイルルール
世界
- A-roll（約30%）：ダークスタジオ、顔、字幕。ほぼ常に字幕付き。
- キャンバス（約70%）：
#F5F2EF背景、薄いグリッド、柔らかい斜め窓光（<KremZemin>）。 - A-roll ↔ キャンバスの切り替えは常にハードカットです。スライド、ワイプ、クロスフェードは禁止です。
色（tema.ts → RENK）
| 役割 | HEX |
|---|---|
| キャンバス / グリッド | #F5F2EF / #ECE9E6 |
| カード | #FFFFFF |
| メインテキスト / セカンダリ | #111111 / #8A8A8A |
| アクセントブルー（UI / イタリックテキスト） | #2782F5 / #1E90E8 |
| マネーグリーン | #16A06B |
| 警告レッド（手描き、期限、ネガティブ） | #E35B63 |
| プロダクトグロー | #864EC6 → #3C296B |
| A-rollブラック / 字幕 | #030303 / #FFFFFF |
一文につきアクセントカラーは最大1つ： 青＝メインアイデア、緑＝お金、赤＝期限または損失。
タイポグラフィ（tema.ts → FONT, BOYUT; 1080×1920用）
- 文 / 字幕： ネオグロテスクサンセリフ（Instrument Sans 500）。キャンバスでは84px、A-roll字幕では64px。
- 強調フレーズ： 青イタリックセリフ（Instrument Serif Italic）、サンセリフサイズの1.3倍。文中に1フレーズ、2～4単語; 決して太字や下線なし。
- 数字： 太字イタリックグロテスク（Inter Black Italic）、表形式数字。セリフは絶対に使いません。お金の場合は緑色。
- ラベル： グレー、大文字間隔（
letter-spacing .16em）。 - 最大2行まで。テキストは中央揃え、または空白の三分割に揃えられ、全幅は使いません。トルコ語の文字は正しく書きます（ğ, ş, ı, İ）。
- ブランドフォントが届いた場合、
src/xbear/fontlar.tsのみ変更されます。
モーション（tema.ts → KARE, EASE）
| 要素 | 動作 | 持続時間 |
|---|---|---|
| 単語 | 不透明度0→1 + ぼかし8→0、その場で（行は移動しない） | 5フレーム、単語が発話された瞬間 |
| カード / オブジェクト出現 | 約60px上昇 + フェード + ぼかし10→0 + スケール.95→1、イーズアウト | 14フレーム |
| アイコン / バッジ | スケール.6→1、弱いオーバーシュート（スプリング） | 8フレーム |
| テキスト終了 | 40px上にスライド + ぼかし、イーズイン | 10フレーム |
| キャンバスセクション変更 | フォーカスロス | 9フレーム |
| カード横終了 | 水平方向モーションブラー | 8フレーム |
| カメラ | キャンバス上で常時ゆっくりドリフト; A-rollでは即時リフレーム（1.15～1.3倍） | |
| カウンター | イーズアウトカウント; お金は最終値で緑色に変わる | 20～90フレーム |
すべてのモーションは15フレーム以内に収まります。唯一許容されるオーバーシュートは弱いスプリングです。
リズム
- 平均約6～8秒ごとに新しいビジュアルアイデア（v01の中央値6.4秒）。
- シーン内では1～2秒ごとに何かが変わります：単語、カード、またはカウンターのティック。
- 1分間に約5回のハードカット。A-rollセクションの中央値は約8～9秒。
- フック（最初の3～5秒）：A-roll + 字幕 + マーク付きの重要な数字 + アイコン1つ。
文 → アニメーション
| 文のタイプ | 表示内容 |
|---|---|
| 日付 / 期限 | カレンダーアイコン + 赤い日付 |
| リスト（「X、Y、Z」） | 各項目が自身の単語にカード + 増加するカウンターピル |
| お金 / 収益 | 緑の太字イタリック数字、多くの場合カウントアップ |
| 結果 / 「人々が言ったこと」 | 証拠カード（約1秒ごと） |
| 価格計算 | 行ごとに構築、次に棒グラフ比較 |
| 隠された情報 | モザイク + 「後で明かされる」ピル |
| 製品 / ツール名 | 製品カードまたはアプリアイコン |
| 選択質問 | A-roll上の2つのボタン |
| 感情的な / 個人的な文 | A-roll + 字幕のみ |
| 行動喚起（CTA） | 「リンクをクリック」+ 下からの青いグロー + ボタンクリック |
禁止事項
- ネオン、グリッチ、RGBずれ、フィルムバーン、ライトリーク、絵文字、ステッカー
- テキストの影、輪郭線、グラデーション、大文字字幕、ボックス/プレート付き字幕
- 回転、3Dフリップ、ゴムのようなイージング
- 全画面カラー背景：背景はクリームキャンバスまたはダークA-rollのみ
- 2行を超えるテキスト、文中の複数の強調
- A-roll ↔ キャンバス間のスライドまたはクロスフェード
- セーフエリア外へのオーバーフロー：上部8%、下部15%、右側12%は空けておく。字幕は顔を覆わない。
効果音（測定: SES_ANALIZI.md）
| イベント | 効果音 | 注意 |
|---|---|---|
| A-roll ↔ キャンバスカット | whoosh | Sahne.dunyaが変わるとSahneDizisiが自動で配置（カットの約60%） |
| カード、数字、ピルの出現 | swish | KartGiris, UIKart, SayiSayaciが自動再生 |
| カードの横終了、フォーカスロス | whoosh | 次のカットのwhooshが0.5秒未満ならオフ（cikisSesi={false}） |
| フックのリフレーム、ペイオフ/説明、CTA | boom | 1分間に約1回。ZoomIn ses="boom" または <SesEfekti tur="boom"> |
| バッジ / 手描き / ボタン | pop / kalem / klik | |
| 隠し情報が明かされる前 | riser | ピークは説明の瞬間に合わせる |
| カウンター | — | ティックなし（tikSesiデフォルトオフ） |
| マネーカウンターが緑に変わる瞬間 | para（カチン） | SayiSayaci paraが自動再生（paraSesi={false}でオフ）。参考資料にはない、XBEARの好み |
- 効果音のピークはビジュアルイベントから2～3フレーム後に来ます（
TEPE_GECIKME_KARE）。コンポーネントはこれを自動調整します。 - SFXピークは会話の約10 dB下に留まります（
SEVIYE_DB: swish -17, whoosh -14, boom -12 dBFS）。全体調整には<SesAyari kaydirmaDb={-3}>を使用します。 - 禁止: whoosh連発、すべての単語にポップ、カウンターティック、同じファイルの連続再生。
- 生のEpidemicファイルは直接
03_sfx/<tür>/フォルダに配置します。sfx_esitle.pyがバリアントを分け（_v1, _v2…）、無音とテールをトリミングし、正規化します。
Seçkinチャンネルルール（02_marka/marka_notu.md）
- 罵り言葉はカットされます。無音の待機や台本を見て暗記する瞬間はカットされます。編集は撮影順に従います。
- 音楽はEpidemic Soundからのみ選択され、-15 dB（大きい場合は-20 dB）、イントロと無音部分の下でのみ使用されます。
- カラーコレクションは行いません。
2. ワークフロー
ステップ 1 — 計画
- 文字起こしを取得:
remotion-studio/scripts/transcribe.sh <ham.mp4> 07_projeler/<proje>/ tr。 - カットする場所をマーク: 無音、暗記、罵り言葉。
- シーンリストを表として書き、ユーザーに表示:
S01 | 00:00.0–00:04.8 | A-roll / キャンバス | 発話内容 | 表示内容（文のタイプ） | コンポーネント | 効果音。 - リズムチェック: 約6～8秒ごとに新しいアイデアが必要、連続3つのA-rollシーンは不可。
ステップ 2 — 参照選択
REFERANS_INDEKSI.mdのみを読みます。 各シーンについて「いつ」とキーワードを見て、2～3行を選択します。- その行の
kart.mdと必要に応じてpeak.pngのみを開きます。clip.mp4は開かず、フォルダ全体はロードしません。 - シーンリストに
ref v01-17のようなメモを追加します。
ステップ 3 — デザインページ
- プロジェクトフォルダを作成:
remotion-studio/src/projeler/<proje>/。sahneler.tsx→Sahne[]リスト（id, ad, sure, kareler, not, dunya, Bilesen）。- 各シーンの
kareler配列に、2～3のキーフレームを入力: 出現完了、ピーク、終了直前。 Kayit.tsxは2つのコンポジションを登録:<Proje>-Video（SahneDizisi）と<Proje>-Tasarim（TasarimSayfasi）。両方ともRoot.tsxに追加。- デザインコンポジションは**
<Composition>**である必要があります（<Still>ではありません）、{...tasarimSayfasiBoyutu(sahneler)}を使用。そうしないとフレームが0に圧縮されます。
03_sfxが変更された場合、最初に効果音を同期:python3 -I remotion-studio/scripts/sfx_esitle.py。スクリプトは合成プレースホルダーを使用するタイプをリストアップします; これをユーザーに伝えます。- 生ビデオを
remotion-studio/public/ham/<proje>/に配置し、<ARoll kaynak="ham/<proje>/x.mp4" baslangicSn={…} />で呼び出します。 - レンダリング:
npx remotion still <Proje>-Tasarim ../07_projeler/<proje>/tasarim_v1.png --frame=0 - PNGを自分で確認します。セーフエリア、オーバーフロー、2行制限、トルコ語の文字をチェックします。その後、ユーザーに表示します。
ステップ 4 — 承認（必須）
- ユーザーが明示的に承認するまで、
remotion renderは実行されません。単一シーンのテストレンダリングも行いません。 - 修正が要求された場合、デザインページの新しいバージョン（
tasarim_v2.png）を作成します。
ステップ 5 — レンダリング
npx remotion render <Proje>-Video ../07_projeler/<proje>/final_v1.mp4 --port=3199- 出力をffprobeで検証: 1080×1920, 30 fps, 期待通りの長さ, オーディオストリームあり。
ffmpeg -i final.mp4 -af volumedetect -f null -→ max_volume ≤ -1 dB であること（クリッピングなし）。- 最終ビデオとともにシーンリストを納品:
時間 | タイプ | 画面上のテキスト | トランジション | 参照。
ステップ 6 — 修正
- 要求されたシーンのみ変更します。最初にそのシーンのデザインページ（変更されたシーンのみ）を表示し、承認後、ビデオを再度レンダリングします。
- ファイルはバージョン番号で管理します（
final_v2.mp4）。古いバージョンは削除しません。
3. Remotionの構造とコンポーネント
remotion-studio/
public/fonts/ Instrument Sans/Serif, Inter (OFL) → brandフォントが来たら public/fonts/marka/
public/ornek/ aroll_yer_tutucu.mp4（テストのみ）
public/sfx/<tür>/ sfx_esitle.pyで正規化された効果音（手動で触らない）
public/ham/<proje>/ 生A-roll（プロジェクトごと）
src/Root.tsx fontlariYukle() + すべてのコンポジション
src/xbear/ ← 再利用可能なライブラリ、"./xbear"からインポート
tema.ts zamanlama.ts fontlar.ts TasarimSayfasi.tsx index.ts
bilesenler/*.tsx
ses/ sesler.ts（レベル/アライメントルール）、SesEfekti.tsx、kutuphane.ts（自動）
ornekler/ 各コンポーネントの使用例（XB-*コンポジション）
src/projeler/<proje>/ sahneler.tsx, Kayit.tsx, kelimeler.json
| コンポーネント | 用途 | 使用例 |
|---|---|---|
KremZemin | キャンバス背景 + ドリフト | <KremZemin>…</KremZemin> |
VurguMetni | キャンバス文、単語ごと; [ ] = 強調, \n = 改行 | <VurguMetni metin={"充電はたったの30分、\n[競合他社より高速]"} isaret={{ifade:"30分", tip:"altcizgi"}} cikisKaresi={108}/> |
ElCizimi | 赤い手描きの楕円/下線（単一の重要なフレーズ） | VurguMetni.isaret と一緒に、または <ElCizimi tip="elips" baslangic={20}/> |
SayiSayaci | 大きな数字のカウント; para → 緑色 | <SayiSayaci etiket="開始価格" bas={39999} son={42999} sonEk=" ₺" para baslangic={12}/> |
UIKart | 白い浮遊カード または varyant="urun" ヒーローカード; バッジ、ラベル、アイコン | <UIKart varyant="urun" baslik="Nova X1 Pro" altBaslik="レビュー · 2026" rozet="+ 新製品"/> |
Hap | ラベル、カウンター（+3）、期限、CTA | <Hap metin="箱の中身" sayi="+3"/> |
KartGiris | すべてのオブジェクトの共通エントリー/終了（yukari / yana） | <KartGiris baslangic={14} cikisKaresi={128} cikisTipi="yana">…</KartGiris> |
AltYaziBandi | A-roll字幕、words.jsonから、最大2行 | <AltYaziBandi kelimeler={sahneKelimeleri(words, 12.4, 18)} vurgular={["30","日"]}/> |
ZoomIn | atlama（即時リフレーム） · punch · itme · suruklenme | <ZoomIn mod="atlama" kare={66} olcek={1.25} odak={{x:.5,y:.3}} ses="boom">…</ZoomIn> |
ARoll | 生ビデオを9:16にクロップ、baslangicSnでカット | <ARoll kaynak="ham/p/x.mp4" baslangicSn={12.4}/> |
Gecis | kesme · bulanikYukari · odakKaybi · yanaKayma · karartma; コンテンツをラップ（背景は除く） | <KremZemin><Gecis tip="odakKaybi" sure={120} giris={false}>…</Gecis></KremZemin> |
SesEfekti / SesAyari | 単一SFX（タイプ＋フレーム; ピーク調整、ファイルローテーション）/ 全体オン/オフ、dBシフト | <SesEfekti tur="boom" kare={66}/> |
TasarimSayfasi / SahneDizisi | 承認PNG / 最終シーケンス＋カット効果音 | ステップ3参照 |
タイミングヘルパー（zamanlama.ts）: kare(sn), sahneKelimeleri(words, bas, son), kelimeKaresi(kelimeler, "otuz")。
アニメーションを単語にバインド: 開始フレームはwords.jsonから取得し、手動で推定しない。
コンポーネントはuseVideoConfig()からfpsのみを読み取り、寸法は1080×1920に固定されています。これにより、デザインページでも正しく表示されます。
シーンにはsureとcikisKaresiを明示的に指定します。
16:9 / ハイブリッド（Hibrit.tsx）: KoyuCamZemin, CamKart, TakipEtiketi（追跡付きドット＋線＋ピル）, BolumEtiketi, UygulamaKarosu（gorsel = 実際のロゴ）, TelefonCerceve, KilitKatmani, RotoKatmani。リストカード: projeler/duo/Parti2.tsx → ListeKarti + OzellikSatiri（var/yok/bilgi）。
未作成: TarayiciCerceve, Stepper, Mozaik。
インデックスに対応する参照: v01-10/14/47（電話）, v01-08/13/43（ブラウザ）, v01-26/55（アイコン）, v01-51（ステッパー）, v01-04/58（モザイク）, v01-46（ボタン）, v01-56（リスト）。
4. 環境とコマンド
- Mac（Apple M1 Pro）: Node 24, ffmpeg 9, whisper.cpp + large-v3-turbo。インストールとバージョンは
KURULUM.mdに、検証用にkurulum_dogrula.command。 - セッションのシェルがMacではなくLinux VMの場合:
remotion-studio/node_modulesはMac固有のため、VMでnpm iは実行しない。- レンダリングのためにプロジェクトをクラウドワークスペースにコピーし、同じバージョンで
npm iを実行（[email protected]）、Chromiumでレンダリング（--browser-executable=…/chrome-headless-shell）。結果をフォルダに書き戻す。 - WhisperはユーザーがMacで実行するか、
.commandスクリプトを準備する。 sfx_esitle.pyはVMでも動作（python3 + ffmpeg）。
…
[翻訳のため切り詰められました]