Remotion 蜡烛图 (Candlestick) 动画制作流程

本 skill 记录了在 vibe-motion-app 这个 Remotion 项目中创建 S&P 500 K 线图的完整制作过程。

前置条件

• Remotion 4.0.438 项目，已配置 React 19 + TailwindCSS v4
• 插件架构：motion/ 定义场景，remotion/ 处理 Remotion 合成管线
• pnpm 作为包管理器

步骤 1：获取金融数据

Yahoo Finance 提供免费的历史 OHLC 数据（无需 API Key）。

创建 scripts/fetch-sp500-data.mjs：

// 核心：调用 Yahoo Finance Chart API
const url = `https://query1.finance.yahoo.com/v8/finance/chart/%5EGSPC?period1=${PERIOD1}&period2=${PERIOD2}&interval=1wk`;
const resp = await fetch(url);
const json = await resp.json();
const result = json.chart?.result?.[0];
const ts = result.timestamp;
const quote = result.indicators.quote[0];
// 提取 { t: timestamp, o: open, h: high, l: low, c: close }

保存到 public/data/sp500-weekly.json，供 Remotion 通过 staticFile() 加载。

参数说明：

• %5EGSPC = S&P 500 的 Yahoo 符号（^GSPC URL 编码）
• interval=1wk = 周线；可选 1d, 1mo
• period1 / period2 = Unix 时间戳，覆盖约 40 年（1984-2026）

步骤 2：创建插件文件结构

每个 Remotion 插件需要 4 个核心文件 + 渲染预设：

motion/插件名/
  config.js                 → 默认参数
  timeline.js               → 场景上下文 + 逐帧动画计算
  Scene.jsx                 → React 组件（Canvas 绘制）
  plugin.js                 → 插件注册对象
  render-presets/
    default.json            → 渲染预设

2a. config.js, 默认参数

export const DEFAULT_LAYOUT_PARAMS = Object.freeze({
  videoWidth: 1920,    // 16:9 横屏
  videoHeight: 1080,
});

export const DEFAULT_ANIMATION_PARAMS = Object.freeze({
  durationSeconds: 28,  // 动画总时长
  title: "S&P 500",
  subtitle: "过去40年 · 周线K线图",
});

export const DEFAULT_MOTION_PROPS = Object.freeze({
  ...DEFAULT_LAYOUT_PARAMS,
  ...DEFAULT_ANIMATION_PARAMS,
});

2b. timeline.js, 动画逻辑

必须实现三个核心函数：

// 1. 场景上下文：验证 + 强制类型转换所有参数
export const resolveXxxSceneContext = (pluginParams) => { ... }

// 2. 时长计算：durationSeconds * fps
export const getXxxDurationInFrames = ({ fps, sceneContext }) => { ... }