# Remotion Candlestick

在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene...

- Repository: https://github.com/vibe-motion/skills (1498 stars)
- Category: Media
- License: see repository
- Last updated: 2026-10-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add vibe-motion/skills --skill remotion-candlestick -g -a claude-code -y`
Codex: `npx skills add vibe-motion/skills --skill remotion-candlestick -g -a codex -y`
Cursor: `npx skills add vibe-motion/skills --skill remotion-candlestick -g -a cursor -y`
Gemini CLI: `npx skills add vibe-motion/skills --skill remotion-candlestick -g -a gemini-cli -y`

## Description

在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene / plugin）、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词：K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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`：

```js
// 核心：调用 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, 默认参数

```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, 动画逻辑

必须实现三个核心函数：

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

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

The rest: https://github.com/vibe-motion/skills/blob/HEAD/remotion-candlestick/SKILL.md