需要把数据集做成动画图表/数据视频（bar chart…

当用户要把 CSV/JSON 数据集转成动画图表、bar chart race、数字计数器或一套模板批量渲染多个视频时，用帧驱动、数值缓动、排名插值和先静帧校验再编码的流程。

适用场景

解决思路

1. 核心原则：每一帧的所有显示值都必须由当前帧计算，不能来自 wall-clock 时间或库内部动画循环；显示值必须是 frame 的纯函数。
2. 在 Remotion 中关闭第三方图表动画（Chart.js 设 `animation: false`，D3 不要 `.transition()`），只让 `useCurrentFrame()` 当时钟；D3 只用于 scales/shapes（`scaleLinear`、`scaleBand`、`line()`），不用于 timers。
3. 把数据→像素拆成两层并保持分离：值比例尺（`scaleLinear`/`scaleBand`：数据单位→px 高度/x 位置）和帧插值器（`interpolate`/`spring`：frame→缓动进度 0→1）。
4. 显示值单独处理：用 `round` + `Intl.NumberFormat` 把进度转成人类可读数字；示例 `barHeight = yScale(interpolate(frame, [0,45], [0, datum.value], { extrapolateRight: "clamp" }))`。
5. 对数值变化做缓动：count-up/条形增长用 `easeOutCubic`，排名变化用 `spring`，让超越有重量；不要对观众正在读的数值做线性插值，除非是稳定时间轴（时钟、年份计数器）。
6. 计数器/数字 ticker：先插值底层数字，再在渲染时格式化；必须先 `round` 再 `Intl.NumberFormat`，避免 `1287.4013`；用 CSS `font-variant-numeric: tabular-nums; line-height: 1;` 固定数字框避免抖动/裁切；货币/百分比用 `Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })` 等选项。
7. Bar chart race 排名过渡：对稀疏数据行之间插值关键帧，并按插值后的值每帧重新排名；y 位置来自插值排名，使超车是滑动而非跳跃。
8. 实现排名过渡：`t = frame / fps`，`i = Math.min(Math.floor(t), rows.length - 2)`，`f = easeInOut(t - i)`，对每项计算 `v = rows[i][it] + (rows[i+1][it] - rows[i][it]) * f`，按 `v` 降序排序，`y = rank * (barH + gap)`。
9. 渲染排名条：为每个 item 使用稳定 key（React 跨重排跟踪），基于每帧值动画 `y` 和 `width`，显示移动的年份/日期标签；完整可运行组件见 `references/bar-chart-race.md`。
10. 数据节奏：按数据事件分配时间，不要只按秒数做效果。Intro/首帧 hold 1–1.5s；race 每数据行 0.3–0.6s；高亮时刻额外 +0.5–1s 慢放；最终状态 hold 2–3s。
11. 渐进展示：一个 series 再下一个 series，不要一次性展示所有数据；观众一次只能追踪一个运动物体。
12. 标注：始终渲染每个 bar/point 的可见数值标签（随值动画）、时间指示器（年/日期）、轴单位一次；只在关键时刻（交叉、峰值）添加 callout，标注拐点后淡出。
13. Template × data 批量输出：把数据集做成输入 prop，绝不硬编码为常量；同一 composition 通过不同 CSV/JSON 渲染不同视频。
14. 批量渲染命令：`for f in data/*.json; do name=$(basename "$f" .json); npx remotion render Race "out/$name.mp4" --props="$f"; done`。
15. 主题统一：把颜色/字体/布局放在单一 theme object，保证 50 个视频品牌一致，只改变数字；CSV→props 解析、校验和完整批处理脚本见 `references/data-pipeline.md`。
16. 输出检查清单：每个动画值是 `useCurrentFrame()` 的纯函数，无库 timers；数字经过 round 和 `Intl.NumberFormat`，数字用 `tabular-nums`；race bars 有稳定 key，排名变化通过插值排名滑动；轴/单位标注一次，值标签随值动画；intro hold、每行可读节奏、最终 hold ≥2s；数据集是输入 prop，一套模板渲染文件夹内每个 CSV。
17. 交付与验证：使用 packaged helper `scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png` 拼接静帧，用 `scripts/probe-mp4.sh out.mp4 [WxH] [fps]` 校验编码；Remotion 帧确定，可 headless 渲染任意精确帧；交付物是携带精确数字的 MP4，必须做静帧检查——一像素布局 bug 可容忍，错误数字不可。
18. Output contract：Remotion 项目注册 chart（`<Composition>` + zod `schema` + `defaultProps`）；所有运动 frame-driven（无 timers/`Date.now()`/`Math.random()`，无 Chart.js/D3 `.transition()` 时钟）；交付物 = 渲染出的 `out/*.mp4` 加项目，以便用户用新数据集重渲染；数据相关时长（N 行 × frames/row）在 `calculateMetadata` 计算，不要手算。
19. 验证循环：先渲染静帧（便宜，不编码视频），再检查，最后编码。命令：`npx remotion still Race out/f-start.png --frame=0 --props='{"data":[...]}'`；`npx remotion still Race out/f-mid.png --frame=90 --props='{"data":[...]}'`；`npx remotion still Race out/f-end.png --frame=149 --props='{"data":[...]}'`（最后一帧 = durationInFrames - 1）。
20. 检查每个 PNG：保真度（轴标签、值标签、年/日期、排名、单位全部精确；round + tabular-nums 生效，无 `1287.4013`）和伪影（bar 溢出、标签出画布、safe-area 被裁、字体缺失、错误数据绑定/错误列映射）。
21. 静帧通过后再编码：`npx remotion render Race out/race.mp4 --props='{"data":[...]}'`。
22. 用 `npx remotion compositions` 读取每个 chart 的 `durationInFrames`/`fps` 并选择结束帧。
23. 数据驱动/批处理：在批量渲染全部 N 个文件前，先用静帧验证一个代表性数据集；高度比例尺或列映射 bug 早发现一次，好过在 50 个 MP4 里发现。
24. 免费 README 演示 GIF：`npx remotion render Race out/demo.gif --codec=gif`。
25. 完成前逐项确认：`npx remotion still` 在 frame 0、mid、last 干净渲染，无错误、无缺字体/资源；每个数字精确（rounded、`Intl.NumberFormat`、`tabular-nums`）且每帧在 safe area 内；仅 frame-driven，无 `Date.now()`/`Math.random()`/库 timers（CI 中保持确定性）；shipped dataset props 正确渲染（不只是 `defaultProps`）——映射正确列、正确比例尺；完整 MP4 已编码可播放，可选为 README 渲染 GIF。
26. 可参考 `references/bar-chart-race.md` 获取完整可运行 Remotion bar-chart-race 组件（稀疏行关键帧插值、逐帧排名、滑动 y、动画值标签、D3-scale 轴，及 vanilla canvas 变体）。
27. 可参考 `references/data-pipeline.md` 获取 CSV/JSON→typed props 解析与校验、theme object 模式、动画计数器/折线显现配方，以及 N 视频的 template×data 批处理渲染脚本。

适用边界 · 注意事项

• 只需要静态图表、交互式网页图表或手工剪辑，不需要代码驱动视频/帧精确输出时，不必使用本技能。
• 无法使用 Remotion/Node/npx 或必须依赖浏览器运行时动画时钟（CSS transition、GSAP/D3 timer）的场景，本技能的确定性渲染与批量输出流程不适用。
• 数据已经是逐帧密集且无需跨行插值、也不需要稳定批量输出时，bar chart race 的稀疏行插值与模板批量渲染步骤可跳过。