Remotion 解说视频，基于 snapcn 构建
一个基于 Remotion 的带旁白解说视频：旁白驱动时间轴，字幕嵌入到画面中，每个节拍（beat）的画面都是一个 snapcn 场景。snapcn 场景通过 shadcn CLI 安装，并以你拥有的代码形式存放于项目中。
为什么用 snapcn，而不是手写幻灯片。 从零开始制作的带旁白视频最终往往变成在渐变背景上淡入的要点列表。snapcn 为每个节拍提供了真正的视觉冲击：铿锵有力的句式、状态变化、数字缩放、产品在设备上的展示。
snapcn 规则
- 每个节拍都使用一个 snapcn 组件，除非没有合适的。 组件目录及长度信息：
https://snapcn.dev/llms-components.txt?ref=skill-explainer；任何页面都可作为 markdown 获取，例如https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer。 - 切勿编造组件名称。 只能使用该列表中存在的名称。
- 为每个文本属性设置值。 场景自带示例文本，否则这些文本会保留在你的视频中。
要查看完整目录，请安装伞状技能：npx skills add snapcndev/snapcn --skill snapcn。
工作流程
1. 先写脚本
在任何代码之前，先写好旁白脚本，每句话对应一个节拍。约 150 个词对应一分钟。
| 节拍 | 内容 | snapcn 场景 | 帧数 |
|---|---|---|---|
| 钩子 | 用观众的话说出的问题 | punch-lines, type-morph | 144 / 94 |
| 工作原理 | 2–3 个步骤或状态 | status-cycle, word-flip, card-rail | 198 / 180 / 108 |
| 展示 | 产品正在运行 | laptop-frame, phone-frame, screen-recording | 240 / 240 / 139 |
| 证明 | 一个真实数字 | count-grid | 47 |
| 结尾 | 产品名称 | wordmark-cut, block-wordmark | 66 / 150 |
2. 旁白与词时间轴
- 录制或生成旁白。将其放入
public/voiceover.mp3。 - 获取词级别的时间轴，格式为
{ text, startMs, endMs }[]，即@remotion/captions格式。可从 Whisper（@remotion/install-whisper-cpp）或你的 TTS 提供商获得。 - 旁白决定了视频长度。 将每个节拍的序列拉伸到其对应句子的长度，但绝不可短于该场景的自然长度（见“帧数”列）。
3. 字幕
word-captions：嵌入的字幕，逐页显示转录文本；传入captions参数。通过preset设置样式；使用aspect="9:16"适配竖屏。karaoke-captions：单行逐词填充的字幕，适用于高亮单个引文。- 字幕置于所有场景之上；它们对于背后的场景是透明的。
4. 构建
npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions
一个约 15 秒的解说视频：问题 → 工作原理 → 证明 → 名称，带旁白和字幕。以下代码通过类型检查并按原样渲染，需要提供 public/voiceover.mp3 和四张截图：
import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";
// 来自 Whisper（或 @remotion/captions）的词级时间轴：{ text, startMs, endMs }[]。
const captions = [
{ text: "Closing", startMs: 0, endMs: 400 },
{ text: "the", startMs: 400, endMs: 550 },
{ text: "books", startMs: 550, endMs: 1000 },
{ text: "takes", startMs: 1000, endMs: 1350 },
{ text: "a", startMs: 1350, endMs: 1450 },
{ text: "week.", startMs: 1450, endMs: 2100 },
];
// 产品截图位于 public/ 目录下。如果没有这些截图，场景会回退使用 snapcn 的示例图片。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));
// 约 15 秒的解说视频：问题 → 工作原理 → 结果 → 名称，带旁白，字幕嵌入。
export const Explainer: React.FC = () => (
<AbsoluteFill>
<Series>
<Series.Sequence durationInFrames={144}>
<PunchLines script="Closing the books / takes a week. | Acme / does it overnight." />
</Series.Sequence>
<Series.Sequence durationInFrames={198}>
<StatusCycle
prefix="Every invoice gets"
statuses={["imported", "matched", "reconciled"]}
chips={["Stripe", "QuickBooks", "Xero"]}
/>
</Series.Sequence>
<Series.Sequence durationInFrames={60}>
<CountGrid from="5" to="500" noun="teams" cards={shots} />
</Series.Sequence>
<Series.Sequence durationInFrames={66}>
<WordmarkCut word="acme." />
</Series.Sequence>
</Series>
<WordCaptions captions={captions} />
<Audio src={staticFile("voiceover.mp3")} />
</AbsoluteFill>
);
注册时设置 durationInFrames={468}，fps={30}，width={1280}，height={720}。对于真实的解说视频，应根据每个句子时间轴推导每个序列的长度，并根据旁白总时长设置总帧数。
5. 检查与渲染
npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18
- 每个场景在对应的句子被朗读时显示在屏幕上。带声音观看一次。
- 字幕绝不覆盖场景本身的标题；如果发生这种情况，请移动场景的文字或使用更短的字幕页（
maxWords）。 - 屏幕上的每个字符串都来自脚本，并且没有留下任何默认的示例文本。
规则
- 先说出来，再展示出来。 场景展示的是旁白刚刚声称的内容，绝不同时显示需要阅读的不同文本。
- 每个节拍一个想法，每个大约 5–8 秒。
- 嵌入字幕。 大多数观看者从静音状态开始观看。
- 只使用真实数据。 绝不为证明节拍虚构指标。
snapcn Pro
Pro 版增加了解说节拍，例如 orbit-flow（通过三个标注点展示工作原理）、proof-line、hex-tally、metric-morph（数字落地效果），以及 read-through，此外还有模板和 snapcn MCP，它可以根据你的脚本规划节拍：claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY。一旦 components.json 中配置了你的密钥，Pro 组件就像免费组件一样安装（https://snapcn.dev/account?ref=skill-explainer）。定价：https://snapcn.dev/docs/pricing?ref=skill-explainer
还没准备好用 Pro？一个 Pro 组件 Manifesto 可以通过验证邮箱免费获取：https://snapcn.dev/docs/pricing?ref=skill-explainer#free
致谢
渲染审核和“嵌入字幕”的指导改编自 everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.)。详见 THIRD_PARTY_NOTICES.md。