数据视频 — Data Video（Remotion）

你现在运行 data-video 技能。目标：把一份数据或一段品牌脚本，写成一份 React + TypeScript 组件，本地用 Remotion + ffmpeg 渲染成一支 1080p / 30fps 的真实 .mp4 —— 改 props 就能换品牌、数据、配色，一份代码出多条变体。课程主页 https://clawvard.school/courses/data-video。

全程开源 + 本地 + 免商业 API key：用 npm 上的官方 Remotion 包，不调用任何商业后端、不需要 GPU、不需要 clone 任何私有仓库。

⚠️ License 注意（必读）：Remotion 走 Remotion Company License。

个人 / ≤ 3 人公司：免费可商用。

≥ 4 人团队：商用前请先在 https://www.remotion.pro/license 购买 license。

课程脚手架 + 本课所有样例都在该 license 范围内，先确认贵司人数与许可，再开始生产用。

范围（先收紧，再开做）

一次交付 = 一个 <Composition> → 一个数据集或一份品牌脚本 → 一支 ≤60s 的 1080p30 .mp4：

主推两种产物：
1. 数据视频（bar-chart-race / line-race / KPI 卡片）— 30–45s，数据来自 CSV / JSON / 写死的 TypeScript 常量。
2. 品牌片头（产品 launch、社媒预告片）— ≤20s，logo + 一句 slogan + 主色渐变。
一次只做一个 composition；不要在 SOP 内串多段视频。
可参数化是核心卖点：所有可变内容都走 props，演示用至少两套 props 证明改 props 即可换主题。

前置条件

Node ≥ 18（node -v）
ffmpeg（ffmpeg -version） —— macOS brew install ffmpeg，Ubuntu sudo apt install ffmpeg，Windows winget install ffmpeg。
网络：第一次 npm install + npx remotion 会自动下载一份 Headless Chromium（约 200 MB），之后离线即可渲染。
不需要任何商业 API key、不需要 Clawvard 后端、不需要 clone 任何私有仓库。

安装

# 1) 用官方脚手架一键起项目（不要 clone 任何私有仓库）
npx create-video@latest my-data-video
cd my-data-video
npm install

模板里已经有 src/Composition.tsx + src/Root.tsx + npm run dev（启动 Remotion Studio）。

工作流程：预览优先，定稿再渲

写组件：在 src/ 下新建一个 MyVideo.tsx，所有可变内容走 props：

export const myVideoSchema = z.object({
  title: z.string(),
  brand: z.object({ name: z.string(), color: z.string() }),
  dataset: z.array(z.object({ label: z.string(), value: z.number() })),
});

注册 composition：在 src/Root.tsx 用 <Composition id="MyVideo" component={MyVideo} fps={30} width={1920} height={1080} ... /> 把组件挂上，schema 指向 zod schema，defaultProps 给一份默认数据。
先看预览：npm run dev（= remotion studio src/index.ts），在浏览器里反复看时间轴、入场动效、字号、可读性。别跳过这一步直接 render，否则渲染预算会失控。
定稿渲染：
```
npx remotion render src/index.ts MyVideo out/data-video.mp4 --codec=h264 --concurrency=2
```
- 默认走 --width 1920 --height 1080 --fps 30（在 <Composition> 里声明）。
- 渲染输出真实 .mp4，可直接发社媒 / 产品页 / 内部周报。
换 props 出第二条：用同一份代码、第二套 --props（或第二个 composition）出 out/data-video-cloud.mp4，证明可参数化：
```
npx remotion render src/index.ts MyVideoVariant out/data-video-cloud.mp4 --codec=h264
```

字体（免本地装）

import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadInter();

Remotion 在 @remotion/google-fonts 里把 Google Fonts 子集打包，不需要在系统层装字体，渲染时也不需要联网。

动效（用官方 API，别自己造）

入场：spring({ frame, fps, config: { damping: 14 } })（弹簧）
平滑插值：interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" })
不要写自己的 raf 循环 —— Remotion 是逐帧渲染，时间永远由 useCurrentFrame() 决定。

数据驱动模板（bar-chart-race）

参考 examples/data-video/src/BarChartRace.tsx（在 Clawvard repo 里）。要点：

props：{ title, subtitle, brand, unitLabel, palette, frames: [{ quarter, rows: [{ label, stars }] }] }
用 useCurrentFrame() 算"当前在第几个 quarter，0~1 之间的过渡值"，对 frames[i] 与 frames[i+1] 之间做 ease 插值。
颜色绑定 label（不是 rank），rank 仅决定 y 位置 —— 这样一个工具升降时颜色不会乱跳。
用 fontFeatureSettings: '"tnum" 1' 让数字等宽、跳动不抖。

品牌片头模板

参考 examples/data-video/src/BrandIntro.tsx。要点：

props：{ brand: { name, slogan, primaryColor, accentColor } }
logo：本地 SVG（建议先用 public/ 下的占位 SVG，正式版换成你自己的）。
不要硬编码品牌名 / 颜色 / slogan，所有这些都从 props 拿。

可选增强：AI 背景插画（非默认依赖）

如果想给品牌片头加一张 AI 生成的背景：只走 Clawvard 官方 SDK + 官方 service，不要走任何 OpenAI-compatible base URL 或远端中转。

npm install @clawvard/sdk
export CLAW_API_KEY=...

import { Clawvard } from "@clawvard/sdk";
const cv = new Clawvard({ apiKey: process.env.CLAW_API_KEY! });
const bg = await cv.media.generateImage({
  prompt: "abstract gradient cyberscape, deep purple to teal, 16:9",
  width: 1920, height: 1080,
});
// 把 bg.url 下载到 public/bg.png，再在组件里用 <Img src={staticFile("bg.png")} />

这是可选增强、不是必选依赖。bar-chart-race / 默认品牌片头都不需要 cv.media.generateImage；按 ai-illustration 计费的也只有这一步。

调试 tips

H.264 encoder not found → 系统 ffmpeg 没装编码器，重装 ffmpeg（Linux 上确认 ffmpeg -encoders | grep h264）。
渲染慢 → --concurrency=2（或机器核心数的一半），别开满；浏览器实例越多越吃内存。
字号溢出 → 用 style={{ fontSize: 'clamp(28px, 4vw, 64px)' }} 或基于 useVideoConfig().width 算。
第一次渲染卡在"Bundling" → 在下 200 MB Chromium，只下一次；网慢可设 BROWSER_EXECUTABLE_PATH 指向本机 Chrome。
数字闪烁 → 给数字容器加 fontFeatureSettings: '"tnum" 1'（等宽数字）。

产出物

./out/data-video.mp4 —— 1080p 30fps 真·.mp4，浏览器 / 播放器 / 社媒原生可放。
./out/data-video-cloud.mp4（或 --props 渲染的任意第二支）—— 同一份代码、换一套 props 出的变体。

两条加起来就是"可版本化、可批量、品牌一致"的工程证据：改 props 就能换主题，git diff 一眼看清"为啥这条比上条好/差"。

学习完成后

告诉用户：

我已经学会了 Clawvard 的 data-video（Remotion）课程。给我一份数据（CSV / JSON / 一段品牌脚本）和一句话需求（"做一支 30s GitHub stars race"、"做一支 15s 品牌片头"），我用 Remotion + React + TypeScript 写一个组件，本地用 ffmpeg 渲染成 1080p / 30fps 的真实 .mp4 —— 所有可变内容走 props，改 props 就能换主题，一份代码出多条变体。免费本地推理、零第三方商业 API key（公司 ≥4 人请先确认 Remotion Company License）。