Douyin Remotion Video
當使用者希望將英語詞彙素材轉換成節奏明快的抖音式單詞學習短影片時，請使用此技能，特別是以下情況：
- 需要將詞根、前綴、後綴、詞族、易混淆詞對或詞彙列表製作成短影片。
- 英語學習的 Remotion 專案需要黑/黃高對比詞彙卡風格。
- 需要阿里雲百煉/DashScope CosyVoice 語音旁白來驅動字幕和時間軸。
- 需要審查現有 Remotion 場景的風格、節奏、字幕、語音或最終匯出結果。
請勿將此技能用於紙本說明、程式碼模組解釋、架構圖、一般知識影片或隨插即用的模組專案。這些屬於其他技能或專案。
此行已凍結：不新增詞根影集。 新的詞彙影集請使用其中一個模板技能（skills/vocab-dossier、skills/vocab-game-show、skills/vocab-whiteboard；使用 npm run plan 選擇，規則請見 skills/_shared/HOUSE_RULES.md）。此技能僅保留用於重新渲染現有的黑/黃詞根影集（001–059）。
輸入
典型的輸入項目：
- 詞彙內容：目標詞根/詞綴、單詞列表、釋義、音標、範例記憶角度，或英語學習影集的簡要想法。
- 影集簡報：主題、受眾、目標、平台、時長、前三秒掛鉤、關鍵字。
- 來自
public/bgm/、shared-assets/bgm/和src/data/bgmRegistry.ts的背景音樂素材與註冊項目。 - 來自
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或影集特定的輸出路徑。 - 每個影集都有一張抖音封面圖，隨影集成品一起匯出。
- 每個影集都有一段約 150 個中文字、並包含
#標籤的抖音標題。
核心工作流程
- 閱讀詞彙主題，撰寫簡短的影集簡報。
- 在撰寫課程主體之前，先設計前三秒掛鉤。選擇
hookType、掛鉤文案、閃現詞、詞根文字、語氣、音效時刻，以及可選的單一動物反應。 - 建立或更新資料檔案，特別是
voiceScript.ts和詞彙資料（例如words.ts）。 - 設定
episodeConfig.ts，包括hook、bgmId、bgmVolume、voiceVolume和sfxVolume。 - 從
bgmRegistry選擇合適的背景音樂，設定預設bgmVolume: 0.32，並規劃混音檢查。 - 僅在支援掛鉤、誤解澄清、詞根揭示或總結節拍時，從
animalIconRegistry選擇 2-4 個動物圖示時刻。 - 根據資料建立 Remotion 場景。將內容、時間、音訊混音設定、圖示時刻和視覺狀態分開管理。
- 使用 DashScope CosyVoice 生成 TTS 語音旁白。切勿將 API 金鑰硬編碼。
- 使用
ffprobe持續時間生成generatedVoiceTimeline.ts。 - 從
generatedVoiceTimeline驅動字幕、活動場景、活動關鍵字、Hook 閃現詞、衝突文案和縮放效果。 - 在關鍵節拍處渲染靜態幀，尤其是 0-3 秒內的幀以及實際 TTS 後任何拉伸的 Hook 節拍，然後檢查是否有空白幀、重疊和對比度不佳的問題。
- 為影集生成抖音封面。每個影集都必須附帶封面圖，沒有例外。
- 生成約 150 個中文字、包含
#標籤的抖音標題，並隨發布檔案一起匯出。 - 渲染最終 MP4，並驗證掛鉤打斷、影音同步、背景音樂閃避、背景音樂音量、動物圖示位置、最終淡出、封面可讀性和標題品質。
需按需載入的檔案
- 視覺風格：
references/visual_rules.md - 前三秒掛鉤：
references/hook_rules.md - 時間與節奏：
references/rhythm_rules.md - DashScope 語音旁白：
references/voice_rules.md - 背景音樂與音訊混音：
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/生成的本地背景音樂註冊表。src/data/animalIconRegistry.ts：從public/assets/icons/animals/生成的本地動物圖示註冊表。src/data/episodeConfig.ts：每個影集的hook、bgmId、bgmVolume、voiceVolume和sfxVolume。src/scenes/HookScene.tsx：抖音打斷系統，包含硬切、單詞閃現、衝突文案、回報、可選的本地音效，以及最多一個動物反應。它必須在 TTS 後使用generatedVoiceTimeline衍生的時間，這樣拉伸的 Hook 旁白才不會留下空白幀。src/timeline.ts：從generatedVoiceTimeline衍生場景時間。src/components/BackgroundMusic.tsx：循環播放背景音樂，在語音下閃避，並在結尾淡出。src/components/AnimatedAnimalIcon.tsx：針對選定的情緒節拍，短暫顯示本地動物圖示反應。src/CoverThumbnail.tsx：標準的統一抖音封面模板。應保持黑/黃外觀，顯示創作者品牌小猪盖被，並在適當時候使用本地動物圖示。scripts/generate-release-copy.ts：用於影集標題和發布說明的標準發布文案生成器。src/utils/audioMixing.ts：共用的背景音樂音量、閃避和淡出輔助函數。src/utils/motion.ts：共用的動畫輔助函數，例如slamIn、punchZoom、shake、flashOpacity。public/audio/main-voice.mp3：僅有 Remotion 應透過<Audio>播放的生成成品。public/bgm/：Remotion 使用的本地背景音樂；渲染期間請勿從網路載入背景音樂。public/assets/icons/animals/：Remotion 使用的本地動物圖示；渲染期間請勿從遠端 URL 載入圖示。
安全規則
- 切勿將 API 金鑰寫入原始碼檔案、模板、範例、日誌或文件中。
- 從環境變數讀取
DASHSCOPE_API_KEY。 - 將生成的音訊和時間軸視為可取代的成品。
- 一旦生成語音時間軸，就不要依賴硬編碼的秒數標記。
- 每個影集都必須與影片成品一起匯出抖音封面圖。
- 每個影集都必須與影片成品一起匯出抖音標題。
- 封面必須保持統一的品牌風格：黑色背景、黃色強調、創作者名稱
小猪盖被，以及可讀的基於詞根的記憶角度。 - 標題應約 150 個中文字，可作為單個抖音貼文主體閱讀，並包含
#英语学习風格的標籤。 - 不要以普通的標題頁開始影集。前 0.5-1 秒必須以大號文字或強烈的視覺衝擊打斷滾動。
- TTS 後，不要讓 Hook 視覺在固定的 3 秒標記處結束。如果實際語音時間軸拉伸了開場片段，請持續顯示匹配的閃現詞和衝突視覺，直到詞根或模式揭示開始。
- Hook 軌道/氣泡單詞閃現必須由實際的
flash-words語音片段節奏控制。不要為每個單詞使用固定的 8-10 幀時間槽。根據口語片段的長度分配氣泡揭示時機，使每個單詞在聽到時出現，先前的單詞保持可見。 - 保持軌道旋轉適度。046 風格的開場應讓人感覺單詞正被收集到一個詞族周圍，而不是在螢幕上飛快甩動。通常，在整個片段中旋轉四分之一圈就足夠了。
- 網格/結構場景必須根據實際單詞數量使用動態對稱佈局。當影集有 6 或 7 個單詞時，不要硬編碼 8 槽佈局；將不完整的行置中，並驗證沒有遺漏任何單詞。
- 網格連接線應從詞根/卡片邊緣開始，並保持在模組後面。不要將線條穿過單詞文字或卡片內容。
- 如果 DashScope
instruction對系統語音失敗，請在保留rate、voice、model和腳本結構的同時，重試不加instruction。 - 在 Remotion 預覽或渲染期間，請勿從遠端 URL 載入背景音樂。
- 在 Remotion 預覽或渲染期間，請勿從遠端 URL 載入動物圖示。
- 如果背景音樂授權不明確，請將
license_check_required添加到影集的notes.md。 - 除非有文件說明的理由需要更改，否則使用當前音訊預設值：
bgmVolume: 0.32、語音閃避係數0.65、背景音樂安全上限0.32。
實用指令
npm run voice
npm run preview -- --port=3000
npm run render
npx tsc --noEmit
npm run render 應視為每個影集的預設發布指令，因為它會同時匯出最終影片和抖音封面圖。
npm run copy 可用於僅為當前影集補充或重新整理抖音標題和發布說明。
用於關鍵影格檢查：
npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5