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的 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或剧集特定的输出路径。 - 每集随剧集交付件一起导出的抖音封面图。
- 每集包含内置
#标签、大约 150 个汉字的抖音文案。
核心工作流程
- 阅读词汇主题并撰写简短的剧集概要。
- 在撰写课程正文之前设计前三秒钩子。选择一个
hookType、钩子文案、闪词、词根文本、语气、音效时刻,以及可选的单个动物反应。 - 创建或更新数据文件,特别是
voiceScript.ts和词汇数据如words.ts。 - 配置
episodeConfig.ts,包括hook、bgmId、bgmVolume、voiceVolume和sfxVolume。 - 从
bgmRegistry中选择合适的 BGM,配置默认的bgmVolume: 0.32,并计划混音检查。 - 仅在它们支持钩子、误解、词根揭示或总结节拍时,才从
animalIconRegistry中选择 2-4 个动物图标时刻。 - 根据数据构建 Remotion 场景。保持内容、时间、音频混音设置、图标时刻和视觉状态分离。
- 使用 DashScope CosyVoice 生成 TTS 配音。切勿硬编码 API 密钥。
- 使用
ffprobe时长生成generatedVoiceTimeline.ts。 - 根据
generatedVoiceTimeline驱动字幕、活动场景、活动关键词、钩子闪词、冲突文案和冲击变焦。 - 在关键节拍处渲染静态帧,特别是 0-3 秒内的帧以及真实 TTS 后任何拉伸的钩子节拍,然后检查是否存在空白帧、重叠和对比度不足。
- 为剧集生成抖音封面。每集必须附带封面图,没有例外。
- 生成大约 150 个汉字、带有内置
#标签的抖音文案,并与发布文件一起导出。 - 渲染最终 MP4 并验证钩子打断效果、音视频同步、BGM 闪避、BGM 音量、动物图标放置、最终淡出、封面可读性和文案质量。
按需加载的文件
- 视觉风格:
references/visual_rules.md - 前三秒钩子:
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:抖音打断系统,包含硬切、文字闪烁、冲突文案、回报、可选的本地音效,以及最多一个动物反应。它必须在 TTS 之后使用由generatedVoiceTimeline衍生的时间,以使拉伸的钩子旁白不会留下空白帧。src/timeline.ts:从generatedVoiceTimeline推导场景时间。src/components/BackgroundMusic.tsx:循环播放 BGM,在配音下闪避,并在结尾淡出。src/components/AnimatedAnimalIcon.tsx:为选定的情绪节拍提供简短的本地动物图标反应。src/CoverThumbnail.tsx:规范化的统一抖音封面模板。它应保持黑/黄外观,显示创作者品牌小猪盖被,并在适当时使用本地动物图标。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。 - 将生成的音频和时间线视为可替换的产物。
- 一旦生成了配音时间线,不要依赖硬编码的秒数标记。
- 每集必须随视频交付件一起导出抖音封面图。
- 每集必须随视频交付件一起导出抖音文案。
- 封面必须保持统一的品牌风格:黑色背景、黄色强调、创作者名称
小猪盖被,以及一个易读的基于词根的记忆角度。 - 文案应大约 150 个汉字,可读作一条抖音帖子正文,并包含类似
#英语学习的标签。 - 不要以普通标题页面开始剧集。前 0.5-1 秒必须用大字或硬视觉效果打断滚动。
- 在 TTS 之后,不要让钩子视觉效果在固定的 3 秒标记处结束。如果真实配音时间线拉伸了开场段落,则让匹配的闪词和冲突视觉效果持续显示在屏幕上,直到词根或模式揭示开始。
- 钩子轨道/气泡词闪必须由真实的
flash-words配音段控制节奏。不要为每个词使用固定的 8-10 帧插槽。将气泡显示时机分布在整个口语段中,使每个词在听到时出现,并且之前的词保持可见。 - 保持轨道旋转克制。046 风格的开场应让人感觉单词围绕一个词族聚集,而不是在屏幕上飞转。跨段的三分之一圈通常就足够了。
- 网格/结构场景必须基于实际单词数量使用动态对称布局。当剧集有 6 或 7 个单词时,不要硬编码 8 插槽布局;居中不完整行并验证没有单词丢失。
- 网格连接线应从词根/卡片边缘连接并保持在模块后面。不要画线穿过词文本或覆盖卡片内容。
- 如果 DashScope
instruction对系统语音失败,则在保留rate、voice、model和脚本结构的同时,不带instruction重试。 - 在 Remotion 预览或渲染期间,不要从远程 URL 加载 BGM。
- 在 Remotion 预览或渲染期间,不要从远程 URL 加载动物图标。
- 如果 BGM 许可不明确,将
license_check_required添加到剧集的notes.md中。 - 除非有记录的原因更改,否则使用当前的音频默认值:
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 应被视为每集的默认发布命令,因为它会同时导出最终视频和抖音封面图。
npm run copy 可用于只为当前剧集回填或刷新抖音文案和发布备注。
用于关键帧检查:
npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5