MrIago/whiteboard-explainer-video

白板讲解视频

一个白板，随着旁白的讲述逐步绘制。观众离开时，脑中留下完整的地图。

这个风格成功的关键（不可省略）：

• 所有内容都在旁白讲到的那一刻绘制出来。没有任何东西是事先准备好的。
• 只有一个画板：镜头移动，已经讲解过的部分保留在原位。
• 最终拉远镜头展示整个画板，成为视频的总结。只有预先规划好地图布局，这个效果才能实现。
• 如果涉及实际应用或真实内容，在绘制窗口内嵌入屏幕录制，以此证明绘制的描述。

SD 指代本技能所在的文件夹。命令：node "$SD/scripts/..."。

开始之前

1. node "$SD/scripts/config.mjs"。如果没有密钥，请向用户索取一个（以下二选一），保存时不要在聊天中重复值：
   • OpenRouter（openrouter.ai/keys），支持语音和转录：node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=...
   • ElevenLabs（elevenlabs.io/app/settings/api-keys）：node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
2. 需要 Node 20+ 和 ffmpeg。如果缺少，说明如何在用户系统上安装。
3. 在开始构建之前，先确认：主题、面向谁、时长、语言，以及视频需要讲清楚什么。一旦需求明确，直接进行，无需再问。

制作顺序

#	步骤	输出
1	node "$SD/scripts/new-project.mjs" <pasta>	Remotion 项目
2	简短分段的脚本，每段一个主题，没有固定编号	script/script.md
3	超过1分钟的视频：提供3个样本（narrate.mjs <pasta> --samples "第一句"），用户选择。保存在 script/voice.json。短测试使用默认值	语音
4	node "$SD/scripts/narrate.mjs" <pasta>	public/audio/、src/data/narration.json
5	将各段串联至 src/sections.ts	时间线
6	世界地图：每段一个区域，按视频部分分组	常量 R_*
7	一次一个区域：绘制、锚定到词汇、在静帧中确认	src/scenes/*.tsx
8	镜头和关闭	src/Video.tsx
9	npx remotion studio src/index.ts 供用户观看，如果用户想审核	ok
10	渲染片段、检查、渲染完整版、检查、响度调整	out/video.mp4

src/scenes/Example.tsx 只是一个模板：删除它，为你的主题绘制画板。每个视频都有自己的绘制内容。

在第6步之前阅读 references/method.md。如果视频包含屏幕录制，也请阅读 references/screens.md。

脚本

**s01**
该段的口头文本，一个段落。

• 应该是口语化的句子，而非书面文字。简单的标点：破折号和省略号会造成奇怪的停顿。
• 当发音重要时，数字写全称。
• 每个段落都应该对应一个可绘制的内容。如果不能绘制，请重写。
• 为了让视频更持久，不要包含日期，所有数字需要注明来源。

检查：你不要观看，所以请阅读帧

npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <pasta> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <pasta>/out/video.mp4 24    # 检查：查找重复部分和重叠
node "$SD/scripts/qa.mjs" scan  <pasta>/out/video.mp4       # 静止秒数、黑帧、闪烁帧
node "$SD/scripts/qa.mjs" loud  <pasta>/out/video.mp4       # 目标 -14 到 -16 LUFS，峰值最高 -1 dBTP

scan 测量人眼感觉：如果静止部分超过5%，视频看起来就像幻灯片。即使在测试中，也要在交付前纠正，通过每句话添加更多片段和细节的镜头切换；仅靠镜头的呼吸运动也算作静止。

打开图片。不要在没有看到检查结果和测量音频的情况下就说效果很好。

只使用 useCurrentFrame 效果：CSS transition 和 animation 在渲染中无效。