explainer-video

讲解视频

将一条消息变成一段节奏明快、配有旁白的 30–90 秒短视频。运行完整流程：脚本 → 分镜 → 场景制作 → 旁白/字幕同步 → 剪辑 → 润色，并始终保持统一的风格体系。

适用场景

• 制作 30–90 秒的产品介绍、工作原理、引导或概念视频。
• 将原始想法或功能转化为脚本、分镜和成片。
• 让旁白与画面同步，并添加字幕，以便静音播放。

故事结构（先确定）

讲解视频是在阐述观点，而不是逐一介绍功能。在开始任何流程步骤之前，先确定叙事内容，让后续每个选择都服务于它。

• 一个核心想法。 用一句话概括观众看完后应该能复述的内容。如果无法用一句话说清，视频就没有主线——缩小范围，直到能说清为止。凡是不服务于这个想法的内容，都要删掉，而不是缩短。
• 脚本优先。 旁白是主线；画面用于呈现正在讲述的内容，而不是引领叙事。先写好旁白并确定时长，再制作分镜或动画——删掉一句话远比重做一个已完成的场景便宜。
• 先让观众感受到利害，再讲“如何实现”。 不要从问题直接跳到机制。先让观众切身感受到问题的代价；正是这种紧张感，让他们愿意继续看解决方案。

讲解视频的故事弧线——每个阶段对应一个节拍，按顺序展开：

阶段	叙事目的	观众应该怎么想
问题	用观众自己的话说出痛点	“这说的就是我。”
利害	展示痛点造成的代价（时间、金钱、风险）	“我得解决这个问题。”
解决方案	用一句话介绍产品/想法，说明它如何解决问题	“哦——这就能解决问题。”
工作原理	用 1–3 个具体步骤说明机制	“我明白它是怎么做到的了。”
成效 / CTA	展现问题解决后的状态 + 一个下一步行动	“我想要这个。我会去做 X。”

（下方的 Script formula 表格会将这些阶段映射到时长占比和字数预算——本节讲的是为什么以及顺序；该表格讲的是需要多长时间。）

选一个类比，并贯穿始终

将抽象机制映射到观众熟悉的事物上，就更容易理解。选定一个比喻，并在各个场景中保持一致——在视频中途切换类比，会让观众重新理解一遍。

• 从观众熟悉的世界中选择一个比喻（排队、恒温器、流水线），而不是工程领域中的事物。
• 每个视频只用一个比喻；视觉表达和旁白措辞都要沿用它。
• 做个测试：如果这个类比还需要单独解释，那它就不合适。

每个节拍的节奏

节奏应随紧张感变化。快速推进“问题/利害”部分，尽早展现价值；在“工作原理”部分放慢速度，让每个步骤都清晰呈现；在成效部分留出舒展的空间。

节拍	感受	剪辑节奏
问题 / 利害	明快，略带紧张感	快速切换，短暂停留
解决方案	稍作放松	清晰呈现一个画面
工作原理	从容，一步一步讲解	最慢——每个步骤都停留足够时间，方便阅读
成效 / CTA	自信、开阔	结尾卡片停留片刻；只放一个 CTA

流程

1. 脚本 — 一个核心信息。结构：问题 → 解决方案 → 工作原理 → 成效。撰写简洁的旁白（VO）；按每秒约 2.3 个词（约 140 词/分钟）估算时长。60 秒视频约 138 个词。
2. 分镜 — 每个场景只表达一个想法。绘制每帧草图及其转场；将每句旁白对应到一个画面。
3. 制作场景 — 为图表/数据制作动画，设计动态文字/关键词和背景（下文内嵌了相关技巧）。
4. 旁白与字幕 — 录制/生成旁白，让场景切换与旁白节拍同步，并嵌入字幕（大多数播放是在静音状态下进行的）。
5. 剪辑 — 配合旁白剪辑，让每个想法停留足够长的时间，以便观众理解；删除任何不能推进核心信息的场景。
6. 润色 — 调整色彩、统一缓动效果、混音、制作结尾卡片。

脚本公式

节拍	作用	时长占比
问题	点出观众感受到的痛点	~20%
解决方案	将产品／想法作为解决办法引入	~15%
原理	展示其运作机制，用 1–3 个具体步骤说明	~45%
收获	呈现结果 + 明确的下一步行动（CTA）	~20%

先用口语写 VO（使用缩写、短句）。大声读出来并计时，然后再开始制作。

VO 时长计算

• 语速：清晰、友好的旁白约为 2.3 词／秒（140 wpm）；技术性较强的句子放慢至约 2.0。
• 根据 VO 句子估算场景时长：seconds = words / 2.3，然后加上约 0.4 秒的呼吸停顿。
• 没有 VO 的场景（纯视觉节拍）也需要至少 1.0 秒才能让观众看清。

场景制作技巧（内嵌）

图表／数据展示（逐步呈现：节点 → 边 → 标签）：

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

动态关键词（在重读音节处弹出文字）：

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

数字递增统计：

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

使用 Remotion（数据驱动、确定性）或 After Effects 渲染组装完成的作品。

字幕同步

字幕是必需的——请假设视频会静音自动播放。使用与 VO 对应的 .srt／.vtt 字幕列表。每条字幕不超过 2 行，每行不超过 42 个字符，屏幕显示时间至少为 1.0 秒，并在下一行开始前消失。

1
00:00:00,300 --> 00:00:02,600
Managing releases by hand is slow.

2
00:00:02,800 --> 00:00:05,400
Shipfast automates the whole pipeline.

在 Remotion 中，字幕应使用与场景切换相同的时序数组驱动，确保不会错位。

风格系统一致性

在制作场景 2 之前，确定一套字体大小比例、一套色彩规则（颜色代表含义，绝不改变其含义）和一条缓动曲线。在所有场景中重复使用相同的进入／退出转场，让作品浑然一体，而不是一组实验性片段。视觉内容必须说明当前正在讲述的 VO 句子——要展示，不要装饰。

输出检查清单

• 传达的信息清晰唯一；每个场景都推动信息表达。
• VO 已计时（约 2.3 词／秒）；场景时长根据 VO 推算。
• 分镜脚本将每句 VO 对应到一个视觉画面。
• 字幕已烧录／可用；不超过 2 行且清晰易读。
• 所有场景的字体、颜色和动效系统保持一致。
• 片尾卡包含一个明确的 CTA。

交付与验证（渲染静帧 → MP4）

随附的辅助脚本（scripts/）：使用 scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png 将静帧拼成图集，然后使用 scripts/probe-mp4.sh out.mp4 [WxH] [fps] 验证编码结果。参见 scripts/README.md。

组装完成的说明视频是一个 Remotion 合成——帧具有确定性，因此无需搜索测试工具，即可无头渲染任意指定帧。当交付内容是包含已合成旁白和烧录字幕的 MP4／GIF 时，使用此方案；如果只有一个网页场景，则交付独立 HTML。

输出要求：

• 提供一个已注册合成的 Remotion 项目（<Composition> + zod schema + defaultProps），所有动效均由帧驱动（不使用计时器／Date.now()／Math.random()）。
• 交付物 = 渲染后的 out/*.mp4（以及项目，以便重新渲染 VO／脚本／数据）。
• 通过 <Audio src={staticFile()}> 添加旁白；将 VO／场景时序写入 props（渲染时不播放实时音频）。字幕使用同一时序数组驱动，确保不会错位。
• 时长是否取决于数据？在 calculateMetadata 中计算，不要手动设置。

验证循环——渲染静帧 → 检查 → 编码。 先渲染单帧（成本低，无需编码），检查确认无误后再编码。

# Frame-exact stills at start / mid / end — render with the SHIPPED props, not just defaults
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# Inspect: script→storyboard→scene maps onto frames — sample a frame inside EACH scene's hold,
# confirm narration line and caption are synced to the visual at that frame, no text overflow / off-canvas.

# Only after the stills check out, encode:
npx remotion render Explainer out/explainer.mp4 --props='{...}'

• npx remotion compositions 会读取 durationInFrames／fps，以确定结束帧和每个场景的停留帧。
• 免费制作 README 演示 GIF：npx remotion render Explainer out/demo.gif --codec=gif。

完成前：

1. npx remotion still 在第 0 帧、每个场景停留区间内的一帧以及最后一帧均能干净地完成渲染——没有错误，也没有缺失资源／字体。
2. 在抽查的每个场景帧中，字幕和正在讲述的 VO 句子都与屏幕上的视觉内容相符（没有错位）。
3. 字幕位于安全区域内，不超过 2 行且清晰易读；文字准确无误且没有被截断。
4. 仅使用帧驱动——不使用 Date.now()／Math.random()／计时器；实际交付的 props 能正确渲染（而不只是 defaultProps）。
5. 完整 MP4 已编码且带有旁白并可播放；（可选）为 README 渲染 GIF。

参考文件

• references/script-to-screen-workflow.md — 完整的工作流详情：问题→解决方案→方法→收益脚本公式及附带的示例和字数预算、配音时间表、包含时间码的分镜脚本填空模板、逐场景构建检查清单、字幕编写指南（VTT/SRT），以及用于确保场景间一致性的风格系统规范表。