masskx/douyin-remotion-video

Douyin Remotion Video

ユーザーが英語の語彙教材を、Douyin スタイルのインパクトのある単語学習ショート動画に変換したい場合、特に以下のケースでこのスキルを使用します。

• 語根、接頭辞、接尾辞、単語ファミリー、紛らわしい単語のペア、語彙リストをショート動画にする必要がある場合。
• 英語学習用の Remotion プロジェクトで、黒/黄色の高コントラスト語彙カードスタイルが必要な場合。
• Alibaba Bailian/DashScope CosyVoice のナレーションで字幕とタイミングを制御する必要がある場合。
• 既存の Remotion シーンについて、スタイル、リズム、字幕、音声、最終エクスポートのレビューが必要な場合。

このスキルを、論文の説明、コードモジュールの解説、アーキテクチャ図、一般的な知識動画、プラグアンドプレイモジュールプロジェクトには使用しないでください。これらは別のスキルまたはプロジェクトに属します。

この行は固定されています: 新しい語根エピソードは作成しません。 新しい語彙エピソードは、テンプレートスキルのいずれか（skills/vocab-dossier、skills/vocab-game-show、skills/vocab-whiteboard; npm run plan で選択、ルールは skills/_shared/HOUSE_RULES.md にあり）を使用します。このスキルは、既存の黒/黄スタイルの語根エピソード（001–059）を再レンダリングするためだけに残されています。

入力

典型的な入力:

• 語彙コンテンツ: 対象の語根/接辞、単語リスト、意味、発音記号、記憶のヒント、または英語学習エピソードの簡単なアイデア。
• エピソード概要: トピック、対象者、目標、プラットフォーム、再生時間、最初の3秒のフック、キーワード。
• public/bgm/、shared-assets/bgm/、src/data/bgmRegistry.ts からの BGM アセットとレジストリエントリ。
• public/assets/icons/animals/、shared-assets/icons/animals/、src/data/animalIconRegistry.ts からのローカルアニマルアイコンアセット。
• データファイル: src/data/words.ts、src/data/voiceScript.ts、src/data/episodeConfig.ts、オプションで src/data/subtitles.ts。
• React + TypeScript を使用した既存の Remotion プロジェクト。
• 英語語彙のビジュアルスタイルの参考動画またはスクリーンショット（オプション）。

出力

期待される出力:

• 実行可能な英語語彙 Remotion エピソード。
• データ駆動型の語彙ファイル。
• public/audio/segments/ 内の TTS セグメント。
• public/audio/main-voice.mp3 にマージされたボイスオーバー。
• src/data/generatedVoiceTimeline.ts に生成された音声駆動のタイムライン。
• 最終 MP4 (通常は out/root-word-template.mp4 またはエピソード固有の出力パス)。
• 各エピソードの Douyin カバー画像（エピソードの成果物とともにエクスポート）。
• 各エピソードの Douyin キャプション（約150字の中国語、内蔵の # タグ付き）。

コアワークフロー

1. 語彙トピックを読み、短いエピソード概要を書きます。
2. レッスン本文を書く前に、最初の3秒のフックをデザインします。hookType、フックコピー、フラッシュワード、ルートテキスト、トーン、SFX のタイミング、オプションで単一のアニマルリアクションを選択します。
3. データファイル、特に voiceScript.ts や words.ts などの語彙データを作成または更新します。
4. episodeConfig.ts を設定します。hook、bgmId、bgmVolume、voiceVolume、sfxVolume を含みます。
5. bgmRegistry から適切な BGM を選択し、デフォルトの bgmVolume: 0.32 を設定し、ミックスチェックを計画します。
6. animalIconRegistry から、フック、誤解、語根の公開、サマリーのビートをサポートする場合にのみ、2～4個のアニマルアイコンモーメントを選択します。
7. データから Remotion シーンを構築します。コンテンツ、タイミング、オーディオミックス設定、アイコンモーメント、ビジュアル状態を分離します。
8. DashScope CosyVoice で TTS ボイスオーバーを生成します。API キーをハードコードしないでください。
9. ffprobe の再生時間を使用して generatedVoiceTimeline.ts を生成します。
10. generatedVoiceTimeline から字幕、アクティブシーン、アクティブキーワード、フックフラッシュワード、コンフリクトコピー、パンチズームを駆動します。
11. キービートで静止フレームをレンダリングします。特に 0～3 秒のフレームと、実際の TTS 後に引き伸ばされたフックビートをチェックし、空白フレーム、オーバーラップ、コントラスト不良がないか確認します。
12. エピソードの Douyin カバーを生成します。すべてのエピソードにカバー画像を同梱する必要があります。例外はありません。
13. 約150字の中国語と内蔵の # タグを含む Douyin キャプションを生成し、リリースファイルとともにエクスポートします。
14. 最終 MP4 をレンダリングし、フックの割り込み、音声/動画の同期、BGM ダッキング、BGM ボリューム、アニマルアイコンの配置、最終フェードアウト、カバーの可読性、キャプションの品質を確認します。

必要に応じてロードするファイル

• ビジュアルスタイル: references/visual_rules.md
• 最初の3秒のフック: references/hook_rules.md
• タイミングとペーシング: references/rhythm_rules.md
• DashScope ボイスオーバー: references/voice_rules.md
• BGM とオーディオミックス: references/audio_rules.md
• アニマルアイコンの使用法: references/icon_rules.md
• 字幕のデザインと同期: references/subtitle_rules.md
• エクスポート QA チェックリスト: references/quality_rules.md
• エンドツーエンドの手順: workflow.md
• 現在の例: examples/ject_episode_example.md

推奨プロジェクトパターン

以下のファイルはデータ駆動型に保ちます:

• src/data/voiceScript.ts: 語彙エピソードの正規のナレーションと字幕のソース。
• src/data/generatedVoiceTimeline.ts: 実際のオーディオ再生時間から生成。
• src/data/bgmRegistry.ts: public/bgm/ から生成されたローカル BGM レジストリ。
• src/data/animalIconRegistry.ts: public/assets/icons/animals/ から生成されたローカルアニマルアイコンレジストリ。
• src/data/episodeConfig.ts: エピソードごとの hook、bgmId、bgmVolume、voiceVolume、sfxVolume。
• src/scenes/HookScene.tsx: Douyin の割り込みシステム。ハードカット、単語フラッシュ、コンフリクトコピー、ペイオフ、オプションのローカル SFX、最大1つのアニマルリアクションを含みます。TTS 後に generatedVoiceTimeline から派生したタイミングを使用する必要があります。これにより、引き伸ばされたフックナレーションが空白フレームを残さないようにします。
• src/timeline.ts: generatedVoiceTimeline からシーンタイミングを導出します。
• src/components/BackgroundMusic.tsx: BGM をループし、音声下でダッキングし、最後にフェードアウトします。
• src/components/AnimatedAnimalIcon.tsx: 選択された感情的なビートに対する短いローカルアニマルアイコンリアクション。
• src/CoverThumbnail.tsx: 正規の統一 Douyin カバーテンプレート。黒/黄のルックを維持し、クリエイターブランド 小猪盖被 を表示し、適切な場合にローカルアニマルアイコンを使用する必要があります。
• scripts/generate-release-copy.ts: エピソードのキャプションと公開ノートを生成する正規のリリースコピージェネレーター。
• src/utils/audioMixing.ts: 共有の BGM ボリューム、ダッキング、フェードヘルパー。
• src/utils/motion.ts: slamIn、punchZoom、shake、flashOpacity などの共有モーションヘルパー。
• public/audio/main-voice.mp3: Remotion が <Audio> で再生する唯一の生成アーティファクト。
• public/bgm/: Remotion が使用するローカル BGM。レンダリング中にネットワークから BGM をロードしないでください。
• public/assets/icons/animals/: Remotion が使用するローカルアニマルアイコン。レンダリング中にリモート URL からアイコンをロードしないでください。

安全ルール

• API キーをソースファイル、テンプレート、例、ログ、ドキュメントに決して書き込まないでください。
• 環境変数の DASHSCOPE_API_KEY を使用してください。
• 生成されたオーディオとタイムラインは交換可能なアーティファクトとして扱ってください。
• 生成された音声タイムラインが存在する場合は、ハードコードされた秒数マークに依存しないでください。
• すべてのエピソードは、動画成果物とともに Douyin カバー画像をエクスポートする必要があります。
• すべてのエピソードは、動画成果物とともに Douyin キャプションをエクスポートする必要があります。
• カバーは統一されたブランドスタイルを維持する必要があります: 黒背景、黄色の強調、クリエイター名 小猪盖被、読みやすい語根ベースの記憶のヒント。
• キャプションは約150字の中国語で、単一の Douyin 投稿本文として読みやすく、#英语学习 スタイルのタグを含める必要があります。
• 通常のタイトルページでエピソードを開始しないでください。最初の 0.5～1 秒は、大きなテキストまたはハードな視覚的ヒットでスクロールを中断する必要があります。
• TTS 後、フックのビジュアルを固定の 3 秒マークで終了させないでください。実際の音声タイムラインがオープニングセグメントを引き伸ばす場合、語根またはパターンの公開が始まるまで、フラッシュワードとコンフリクトのビジュアルを画面に表示し続けてください。
• フックのオービット/バブルワードフラッシュは、実際の flash-words 音声セグメントによってペース配分されなければなりません。すべての単語に固定の 8～10 フレームスロットを使用しないでください。話されているセグメント全体にバブル公開のタイミングを分散させ、各単語が聞こえたときに表示され、以前の単語は表示されたままにします。
• オービットの回転は控えめに保ちます。046 スタイルのオープニングは、単語が画面内で振り回されているように感じられるのではなく、1 つのファミリーの周りに集められているように感じられるべきです。通常、セグメント全体で 4 分の 1 回転で十分です。
• グリッド/構造シーンは、実際の単語数に基づいた動的な対称レイアウトを使用する必要があります。エピソードに 6 つまたは 7 つの単語がある場合に 8 スロットのレイアウトをハードコードしないでください。不完全な行は中央に配置し、単語が欠けていないことを確認してください。
• グリッドのコネクターラインは、語根/カードの端から接続し、モジュールの後ろに残す必要があります。単語テキストやカードコンテンツを通して線を描かないでください。
• DashScope instruction がシステムボイスで失敗した場合、rate、voice、model、スクリプト構造を維持しながら、instruction なしで再試行してください。
• Remotion のプレビューまたはレンダリング中に、リモート URL から BGM をロードしないでください。
• Remotion のプレビューまたはレンダリング中に、リモート URL からアニマルアイコンをロードしないでください。
• BGM のライセンスが不明な場合は、エピソードの notes.md に license_check_required を追加してください。
• 変更する文書化された理由がない限り、現在のオーディオデフォルトを使用してください: bgmVolume: 0.32、音声ダッキング係数 0.65、BGM 安全上限 0.32。

便利なコマンド

npm run voice
npm run preview -- --port=3000
npm run render
npx tsc --noEmit

npm run render は、すべてのエピソードのデフォルトのリリースコマンドとして扱う必要があります。これは、最終動画と Douyin カバー画像の両方をエクスポートするためです。 npm run copy を使用して、アクティブなエピソードの Douyin キャプションと公開ノートのみをバックフィルまたはリフレッシュできます。

キーフレームチェック用:

npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5