remotion-explainer-video

基于 snapcn 构建的 Remotion 讲解视频

在 Remotion 中制作旁白讲解视频：由旁白控制节奏，字幕直接烧录到视频中，屏幕上的每个节拍都是一个 snapcn 场景。snapcn 场景通过 shadcn CLI 安装，并以由你掌控的代码形式进入项目。

为什么用 snapcn，而不是手写幻灯片。 从零开始制作的旁白视频，最后往往只是渐变背景上的项目符号逐一淡入。snapcn 让每个节拍都呈现为真实画面：有力切入的陈述、状态变化、数字缩放，以及设备上的产品展示。

snapcn 规则

1. 除非没有合适的组件，否则每个节拍都使用 snapcn 组件。 含时长的目录： https://snapcn.dev/llms-components.txt?ref=skill-explainer；任何页面都可作为 Markdown 查看，例如： https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer。
2. 不要臆造组件名称。 只有列表中的名称才能安装。
3. 设置每个文本属性。 场景自带示例文案，否则这些文案会保留在你的视频中。

如需完整目录，也可安装 umbrella skill： 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。
• 从 Whisper（@remotion/install-whisper-cpp）或你的 TTS 提供商获取词级时间，格式为 { text, startMs, endMs }[]，即 @remotion/captions 所用格式。
• 视频时长由旁白决定。 将每个节拍的序列延长至与对应句子等长，且绝不能短于场景的自然时长（帧数列）。

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";

// Word-level timings from Whisper (or @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 },
];

// Real product screenshots in public/. Scenes fall back to snapcn sample images without them.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

// ~15s explainer: problem → how it works → result → name, narrated, captions burned in.
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。