reels-motion

reels-motion は何をしますか？

「Terminal Pop」スタイルの縦型リール（1080×1920, 30 fps, 約40～50秒）を生成します。暗い背景にグリッド、単一のアクセントカラー、単語ごとに大きなテキスト（キーワードは色付きボックス内）、アクションを行うピクセルマスコット、01 / 04 形式のカウンター、最後にキーワードのCTAを表示します。

このスキルに関連するファイル（このフォルダからの相対パス）：

• references/motion_system.md：パレット、タイポグラフィ、動き、トランジション、コンポジション、リズム。デザイン前に必ずお読みください。
• template/：完全に動作するRemotionプロジェクト（「Cartuchos」リール、スキルとは何かを説明するもの）。ベースとして使用し、ゼロから始めないでください。
• template/README.md：プロジェクト構造、コマンド、設定。

フロー

1. リクエストの理解

不足している情報のみを質問します：テーマ、対象視聴者、アカウントの@、CTAのキーワード、コメントした人への特典、ナレーションの有無（とElevenLabsの音声）、おおよその尺。

2. 台本とストーリーボード（アニメーション化の前に表示し、OKを待つ）

• 構成： フック（≤ 2 秒）→ HUD付き4セクション 01–04 → CTA（約4秒）。
• フック： テキスト3打、最後の打でキーワードをボックスとマスコットのアクションで表示。
• ナレーションのフレーズ： ≤ 14語、読み上げ専用（画面テキストの読み上げではない）。画面テキストはフレーズあたり≤ 6語。
• マスコット： 各セクションには概念を説明するアクションが必要（接続、選択、スキャンなど）、装飾ではありません。
• CTA： 「キーワードとコメントしてね、Xを送ります」、キーワードをアクセントボックスで表示。

3. プロジェクトの作成

cp -r <このスキルへのパス>/template <ユーザーのフォルダ>/<リール名>
cd <ユーザーのフォルダ>/<リール名>
npm install

ユーザーに短いパスを依頼してください。Windowsでは、長いパス（約200文字超）があると、Remotionがレンダリングに使用するChromeが起動しなくなります。

4. テーマへの適応

• src/config/texts.ts： すべての画面テキストと BRAND.handle。 [キーワード] = アクセントボックス。
• src/config/voiceover.ts： シーンごとの台本、blocks（各フレーズ1つ）に分割。
• src/config/theme.ts： アクセントカラーと位置。
• src/scenes/S2…S5： これらは「Cartuchos」の例です。別のテーマの場合は、components/（Headline, Appear, Bit, Cartridge, Terminal, Pill, CommentBar, Transitions, Sfx）と lib/anim.ts を再利用して各セクションのアクションを書き換えてください。パターンを維持：各フェーズは cue('scene', n, fallback) で始まります。これは音声のフレーズnの開始位置を示します。
• Bit： src/components/Bit.tsx の行列 MAP（16×16）がその形状を定義します。アカウントに別のマスコットがある場合は変更してください。

5. 効果音

npm run sfx で public/sfx/ 内の .wav を合成します。アニメーションと同じ定数を使用して、<Sfx name="…" at={frame} /> で配置します。音量とオン/オフは src/config/audio.ts で設定します。

6. ナレーション（以下のいずれかを選択）

• 独自のAPIキー： .env に ELEVENLABS_API_KEY、VOICE.voiceId に音声IDを設定し、npm run voiceover を実行。シーンごとにMP3を生成し、src/config/voiceover.generated.ts に各フレーズの正確な開始位置を書き込みます。
• ClaudeのElevenLabsコネクタ： 各シーンをその blocks のテキストを連結したもので生成し、MP3を public/voiceover/<リール名>/ にダウンロードします。コネクタはタイムスタンプを提供しないため、以下の手順を踏みます：
  1. 各MP3をWAVにデコードします（npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav）。
  2. Nodeで10msウィンドウのエネルギーを測定し、80ms以上のポーズを検出します。
  3. 各フレーズを、その予想位置（文字数に比例）に最も近いポーズに割り当てます。
  4. 手動で voiceover.generated.ts に duration（末尾の無音を除いた発話終了時間）と blockStarts を記述します。
• ナレーションなし： VOICE_TIMINGS = {} のままにすると、各シーンは各 cue の fallback を使用します。

7. リズム

各シーンの長さは、そのフレーズの長さ＋次の音声までの0.2～0.4秒の余裕に基づきます：SCENES.x ≈ (発話終了 + 0.3 秒) × 30。フックは ≤ 2秒。CTAは音声終了後に約1.5秒の読み取り時間を残します。音声は決して途切れません。各MP3はそのシーンとともに開始し、その末尾の無音は次のシーンで聞こえる場合があります。アニメーションが詰まった場合は、簡略化してください。速度を上げないでください。

8. 納品前の確認

1. npx tsc --noEmit。
2. キーフレーム（フック、各セクション、CTA）をレンダリングし、確認：テキストの分割、重なり、セーフゾーン（上部120px、下部340px、側面64px）、@が一行に収まっていること。
3. ミキシング： 2つのWAVトラックを別々にレンダリングし（--codec=wav）、1つは sfxEnabled = false、もう1つは voiceEnabled = false に設定し、0.1秒ごとに音量を比較します。音声中は効果音の音量が10dB以上低くなければなりません。そうでない場合は、audio.ts でその効果音のゲインを下げてください。Remotionのffmpegに volumedetect はありません。WAVにデコードしてNodeで測定してください。
4. 最終レンダリング：npx remotion render ReelCartuchos out/<リール名>.mp4。

9. サムネイルと公開

• サムネイル： npm run thumbnail（コンポジション Miniatura、フレーム29）。内容は4:5の切り抜き（285～1635）に収まる必要があります。
• テキスト： TikTok向けの説明文（短め、CTA、3～5個のハッシュタグ）、Instagram向けの説明文（価値ある手順、CTA、最大5個のハッシュタグ）、代替テキスト、キーワード用の自動DMメッセージを提供します。

既知のエラー

• Windows、Failed to launch the browser process … ENOENT： パスが長すぎます。短いフォルダを使用するか、--browser-executable=<短いパス>/chrome-headless-shell.exe を指定してください。
• フレーム0のスチルでタイトルが表示されない： エントリーは不透明度0で始まります。サムネイルはフレーム29でレンダリングしてください。
• generate-*.ts： Node 22.18+（ネイティブTypeScript）が必要です。