remotion-explainer-video

用途

该技能用于在 Remotion 中制作带旁白的解说视频（explainer video）：一段 30–90 秒的视频，用来解释产品、功能、想法或流程，包含语音旁白和烧录字幕。视频由旁白驱动时间轴，画面中的每个节拍（beat）都是一个 snapcn 场景。snapcn 场景通过 shadcn CLI 安装，作为你拥有的代码进入项目。

主要能力

以旁白驱动节奏：旁白决定视频长度，每个节拍的序列拉伸到对应句子，且不短于场景的自然长度。
烧录字幕：提供 word-captions（逐词翻页的烧录字幕，可传 captions，支持 preset 样式，aspect="9:16" 用于竖屏）和 karaoke-captions（逐词填充的单行字幕，用于强调单句引用）。字幕叠加在所有场景之上，对背后场景透明。
场景组件：每个节拍使用 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 词约等于一分钟。示例节拍结构：

Hook（问题，用观众的话说）：punch-lines、type-morph，144 / 94 帧
How it works（2–3 个步骤或状态）：status-cycle、word-flip、card-rail，198 / 180 / 108 帧
Show it（产品实际运行）：laptop-frame、phone-frame、screen-recording，240 / 240 / 139 帧
Proof（一个真实数字）：count-grid，47 帧
Close（名称）：wordmark-cut、block-wordmark，66 / 150 帧

2. 旁白与词级时间

录制或生成旁白，放到 public/voiceover.mp3。获取词级时间戳，格式为 { text, startMs, endMs }[]（@remotion/captions 格式），来源可以是 Whisper（@remotion/install-whisper-cpp）或你的 TTS 提供商。旁白决定长度。

3. 字幕

使用 word-captions 或 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 秒。
烧录字幕。
只用真实数字，绝不为证明节拍编造指标。
不得虚构组件名，只有目录列表中的名称可安装。
必须设置每个文本 prop，否则场景自带的示例文案会留在视频中。
字幕不得覆盖场景自身标题。

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

技能介绍

用途