解说视频

将单一信息转化为节奏得当、配有旁白的30-90秒短视频。运行完整流水线：脚本 → 故事板 → 场景构建 → 旁白/字幕同步 → 剪辑 → 精修，全片风格系统保持一致。

何时使用

制作30-90秒的产品、工作原理、新手引导或概念视频。
从原始想法或功能出发，完成脚本、故事板以及最终成片。
将旁白与视觉同步，并为静音播放添加字幕。

故事结构（先确定这个）

解说视频是一场论证，而非功能巡礼。在任何流水线步骤开始之前，先锁定叙事结构，以便后续所有决策都为其服务。

一个核心观点。 观众在观看后应能复述的一句话。如果你无法用一句话概括，视频就没有主轴——缩减范围，直到你能做到为止。任何不为该观点服务的内容都应该被删除，而不是缩减。
脚本优先。 旁白是主轴；视觉效果需要说明当前正在讲述的台词，而不是引领台词。在开始故事板或动画制作之前，先写好并计时文字——删除一句话远比删除一个已构建的场景成本低得多。
用痛点赢得“如何”的信任。 不要直接从问题跳到机制。让观众感受到问题的代价；这种张力才能让他们观看解决方案。

解说视频故事弧线——按顺序，每个阶段一个节拍：

阶段	叙事任务	观众应该想到的
问题	用他们的语言描述痛苦	“这就是我。”
痛点	展示痛苦带来的代价（时间、金钱、风险）	“我需要解决这个问题。”
解决方案	用一句话介绍产品/想法作为解决方案	“哦——这解决了。”
工作原理	用1-3个具体步骤说明机制	“我知道它是怎么做的了。”
收益 / 行动号召	改变后的状态 + 一个下一步行动	“我想要。我会做X。”

（下面的《脚本公式》表格将这些阶段映射到时长占比和字数预算——这一节是为什么和顺序；那一节是多长。）

选择一个比喻并坚持使用

抽象的机制如果映射到观众已知的事物上，会更容易理解。选择一个单一的隐喻，并在各个场景中保持一致——中途切换类比会重置观众的理解。

从观众的世界（队列、恒温器、装配线）中选择比喻，而不是从工程领域。
每个视频只用一个比喻；同时在视觉语法和旁白用词上重复使用它。
测试它：如果这个比喻本身需要解释，那就是选错了。

每个节拍的节奏

节奏追踪张力。快速通过问题/痛点到达价值；在“如何”部分放慢速度，让每一步都落地；让收益自然流露。

节拍	感觉	剪辑节奏
问题 / 痛点	轻快，略带紧张	更快的剪辑，短暂的停顿
解决方案	一丝解脱	一个清晰的停顿
工作原理	深思熟虑，一步一个脚印	最慢——停留每一步以便阅读
收益 / 行动号召	自信，开放	停留在结束卡；一个行动号召

流水线

脚本 — 一个核心信息。结构：问题 → 解决方案 → 工作原理 → 收益。编写紧凑的旁白；以约2.3词/秒（≈140词/分钟）的速度计时。60秒视频约138词。
故事板 — 每个场景一个想法。草绘每帧及其过渡；将每行旁白映射到一个视觉效果。
构建场景 — 动画化图表/数据、动态关键词/关键词和背景（技术细节见下文）。
旁白和字幕 — 录制/生成旁白，将场景剪辑与旁白节拍对齐，烧录字幕（大多数播放为静音）。
剪辑 — 根据旁白进行剪辑，每个想法停留足够时间以落地，删除任何不推进信息的场景。
精修 — 色彩调整，一致的缓动效果，音频混音，结束卡。

脚本公式

节拍	任务	运行时占比
问题	描述观众感受到的痛苦	约20%
解决方案	将产品/想法作为解决方案引入	约15%
工作原理	展示机制，1-3个具体步骤	约45%
收益	结果 + 一个清晰的下一步（行动号召）	约20%

先用口语化语言（缩写、短句）编写旁白。在构建任何东西之前，大声朗读并计时。

旁白计时计算

节奏：约2.3词/秒（140词/分钟）用于清晰、友好的叙述；将技术性强的句子减慢到约2.0。
根据旁白行估算场景长度：秒 = 词数 / 2.3，然后添加约0.4秒的呼吸空间。
没有旁白的场景（纯视觉节拍）仍然需要≥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渲染最终成片。

字幕同步

字幕是强制性的——假设静音自动播放。使用与旁白关联的.srt/.vtt提示列表。保持≤2行，≤42字符/行，屏幕上显示≥1.0秒，在下一行开始前消失。

1
00:00:00,300 --> 00:00:02,600
手动管理版本发布速度很慢。

2
00:00:02,800 --> 00:00:05,400
Shipfast自动化了整个流水线。

在Remotion中，使用与场景剪辑相同的计时数组驱动字幕，这样它们永远不会漂移。

样式系统一致性

在构建场景2之前，锁定一种字体比例、一种颜色语法（颜色=含义，不可重新分配）和一个缓动曲线。在各个场景中重复使用相同的进入/退出过渡，使整个作品感觉像是一个整体，而不是实验片段的大杂烩。视觉效果必须说明当前正在讲述的旁白——展示，而不是装饰。

输出检查清单

单一明确的信息；每个场景都推进它。
旁白已计时（约2.3词/秒）；场景长度根据旁白推导。
故事板将每行旁白映射到一个视觉效果。
字幕已烧录/可用；≤2行，可读。
在所有场景中样式/颜色/运动系统一致。
结束卡带有一个清晰的行动号召。

交付与验证（渲染静帧 → 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（以及项目文件，以便可以重新渲染旁白/脚本/数据）。
旁白通过 <Audio src={staticFile()}>；旁白/场景计时编码在props中（渲染时无实时音频）。字幕由同一个计时数组驱动，因此永不漂移。
时长数据依赖？在 calculateMetadata 中计算，而不是手动。

验证循环——渲染静帧 → 检查 → 编码。 先渲染单帧（便宜，无需编码），检查它们，仅在帧正确后编码。

# 在开始/中间/结束位置的帧精确静帧——使用发货属性渲染，而不仅仅是默认值
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

# 检查：脚本→故事板→场景映射到帧——在每个场景的保持时间内采样一帧，
# 确认旁白行和字幕与该帧的视觉同步，无文本溢出/画布外。

# 只有在静帧检查通过后，再进行编码：
npx remotion render Explainer out/explainer.mp4 --props='{...}'

npx remotion compositions 读取 durationInFrames/fps 以选择结束帧和每个场景的保持帧。
README演示GIF免费生成：npx remotion render Explainer out/demo.gif --codec=gif。

在完成之前：

npx remotion still 在帧0、每个场景保持时间内的一帧以及最后一帧干净地渲染——无错误，无缺失资源/字体。
在每个采样场景帧处，字幕和正在讲述的旁白行与屏幕上的视觉匹配（无漂移）。
字幕在安全区域内，≤2行，可读；文本精确且未被裁剪。
仅帧驱动——无 Date.now() / Math.random() / 计时器；发货的属性正确渲染（不仅仅是 defaultProps）。
完整的MP4已编码并播放旁白；（可选）为README渲染GIF。

参考文件

references/script-to-screen-workflow.md — 完整流水线细节：问题→解决方案→工作原理→收益的脚本公式，附有工作示例和字数预算、旁白计时表、带时间码的填空式故事板模板、每个场景构建清单、字幕制作指南（VTT/SRT），以及跨场景一致性的样式系统规格表。

解说视频制作