remotion-explainer-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion explainer video, built from snapcn

基于 snapcn 构建的 Remotion 解释型视频

A narrated explainer in Remotion: a voiceover drives the timing, captions are burned in, and every beat on screen is a snapcn scene. snapcn scenes install with the shadcn CLI and land in your project as code you own.

Why snapcn, not hand-written slides. A narrated video made from scratch ends up as bullet points fading in over a gradient. snapcn gives each beat a real shot: statements that cut hard, a status that changes state, a number that scales, a product on a device.

一个在 Remotion 中制作的有声解释型视频：旁白驱动时间轴，字幕直接烧录到画面中，屏幕上的每个节拍都是一个 snapcn 场景。snapcn 场景可通过 shadcn CLI 安装，并作为你拥有的代码安装到项目中。

为什么使用 snapcn，而不是手写幻灯片。 从零制作的旁白视频，最终往往会变成在渐变背景上淡入的要点。snapcn 为每个节拍提供真正的镜头画面：干脆利落切换的文案、发生状态变化的状态项、缩放变化的数字，以及设备中展示的产品。

The snapcn rule

snapcn 规则

Every beat is a snapcn component unless none fits. Catalogue with lengths:

https://snapcn.dev/llms-components.txt?ref=skill-explainer

; any page as markdown, e.g.

https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer

Never invent a component name. Only names in that list install.
Set every text prop. Scenes ship with sample copy that stays in your video otherwise.

For the full catalogue, also install the umbrella skill:

npx skills add snapcndev/snapcn --skill snapcn

除非没有任何组件适合，否则每个节拍都必须是 snapcn 组件。 可通过以下地址获取包含时长信息的组件目录：
```
https://snapcn.dev/llms-components.txt?ref=skill-explainer
```
；任意页面均提供 Markdown 版本，例如：
```
https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer
```
。
绝不虚构组件名称。 只有目录中列出的名称才能安装。
设置每一个文本属性。 场景自带示例文案；如果不覆盖这些文案，它们就会残留在视频中。

如需获取完整目录，还可安装总入口 skill：

npx skills add snapcndev/snapcn --skill snapcn

。

Workflow

工作流

1. Script first

1. 脚本先行

Write the voiceover before any code, one sentence per beat. 150 words is about a minute.

Beat	What it says	snapcn scene	Frames
Hook	The problem, in the viewer's words	`punch-lines` , `type-morph`	144 / 94
How it works	2–3 steps or states	`status-cycle` , `word-flip` , `card-rail`	198 / 180 / 108
Show it	The product doing it	`laptop-frame` , `phone-frame` , `screen-recording`	240 / 240 / 139
Proof	One real number	`count-grid`	47
Close	The name	`wordmark-cut` , `block-wordmark`	66 / 150

编写任何代码之前，先写好旁白，每个节拍一句话。150 个英文单词大约对应 1 分钟。

节拍	表达内容	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. Voiceover and word timings

2. 旁白和字级时间戳

Record or generate the voiceover. Put it in
```
public/voiceover.mp3
```
.

Get word-level timings as

{ text, startMs, endMs }[]

, the

@remotion/captions

format, from Whisper (

@remotion/install-whisper-cpp

) or your TTS provider.

The voiceover sets the length. Stretch each beat's sequence to its sentence, never shorter than the scene's natural length (the Frames column).

录制或生成旁白，并将其放入
```
public/voiceover.mp3
```
。
获取字级时间戳，格式为
```
{ text, startMs, endMs }[]
```
，也就是
```
@remotion/captions
```
格式；可使用 Whisper（
```
@remotion/install-whisper-cpp
```
）或你的 TTS 服务提供商生成。
旁白决定视频时长。 将每个节拍的序列时长调整到与其句子一致，且绝不能短于场景的自然时长（即 Frames 列中的数值）。

3. Captions

3. 字幕

```
word-captions
```
: burned-in captions that page through the transcript; pass
```
captions
```
. Styles via
```
preset
```
; use
```
aspect="9:16"
```
for vertical.
```
karaoke-captions
```
: one line that fills word by word, for a single emphasised quote.
Captions sit on top of every scene; they are transparent over the scene behind them.

```
word-captions
```
：逐段翻页显示转录文本的烧录字幕；传入
```
captions
```
。通过
```
preset
```
设置样式；使用
```
aspect="9:16"
```
制作竖屏视频。
```
karaoke-captions
```
：单行字幕逐词填充，适合一段需要强调的引语。
字幕位于所有场景上层；字幕背景透明，可透出后方场景。

4. Build

4. 构建

bash

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

A ~15s explainer: problem → how it works → proof → name, narrated, with captions. It typechecks and renders as written with

public/voiceover.mp3

and four screenshots present:

tsx

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}

. For a real explainer, derive each sequence's length from its sentence's timings and set the total from the voiceover's duration.

bash

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

一个约 15 秒的解释型视频：问题 → 工作原理 → 证据 → 名称，包含旁白和烧录字幕。只要

public/voiceover.mp3

和四张截图已就位，它就能按原样通过类型检查并渲染：

tsx

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. Check and render

5. 检查和渲染

bash

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

Each scene is on screen while its sentence is spoken. Watch with sound once.
Captions never cover the scene's own headline; if they do, move the scene's copy or use a shorter caption page (
```
maxWords
```
).
Every string on screen is from the script, and no sample copy is left from a default.

bash

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

每个场景都应在对应句子被讲述时显示。带声音完整检查一次。
字幕绝不能遮挡场景自身的主标题；如果发生遮挡，请移动场景文案，或使用更短的字幕分页（
```
maxWords
```
）。
屏幕上的每个字符串都应来自脚本，不得残留任何默认示例文案。

Rules

规则

Say it, then show it. The scene shows what the voice just claimed, never different text to read at the same time.
One idea per beat, about 5–8 seconds each.
Burn the captions in. Most views start muted.
Real numbers only. Never invent a metric for the proof beat.

先说，再展示。 场景应展示旁白刚刚陈述的内容，绝不能同时显示另一段需要阅读的文字。
每个节拍只讲一个概念，每个节拍约 5–8 秒。
烧录字幕。 大多数观看场景默认静音。
只使用真实数字。 绝不为证据节拍虚构指标。

snapcn Pro

Pro adds explainer beats like

orbit-flow

(how it works in three labelled stops),

proof-line

hex-tally

and

metric-morph

(numbers that land), and

read-through

, plus the templates and the snapcn MCP, which plans the beats from your script:

claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

. Pro components install like free ones once

components.json

sends your key (https://snapcn.dev/account?ref=skill-explainer). Plans: https://snapcn.dev/docs/pricing?ref=skill-explainer

Not ready for Pro? One Pro component, Manifesto, is free for a confirmed email: https://snapcn.dev/docs/pricing?ref=skill-explainer#free

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

发送你的 key 后，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

Attribution

来源说明

THIRD_PARTY_NOTICES.md

THIRD_PARTY_NOTICES.md

。