# Chart Live Moves

Three ways to bring a chart alive — oscilloscope-stream real-time waveform with sudden spikes, unit-dot-swarm-regroup dot swarms migrating into a number, and axis-rescale-shock a new value blowing past the axis and forcing a rescale.

- Category: data · Tags: shotcraft, remotion, data
- Spec: 1920×1080 @ 30 fps · 5.38s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/chart-live-moves.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/chart-live-moves/template.html
- Repo: https://github.com/Vincentwei1021/video-shotcraft
- Credits: video-shotcraft (Vincent Wei) — https://github.com/Vincentwei1021/video-shotcraft
- Page: https://gimgs.net/motion/chart-live-moves.html

## Params

_No params._

Default params (base64url for `?p=`): `e30`

## Prompt

## When to use

Data-narrative segments; telling "real-time," "every number is a person," and "growth that outgrows the chart," respectively.

## Intention

A chart isn't an illustration, it's a plot. All three share a tested precondition: it must be a real chart context — real axis labels, real data, real copy; grayscale placeholder bars can't carry a data narrative's expressiveness. A, oscilloscope-stream: the write point stays pinned to the right edge, bobbing up and down; old data flows off to the left; midway a sudden spike (2.2× amplitude, the reading jumps and turns the accent color) — "real-time" doesn't need to be said, because things are happening. B, unit-dot-swarm-regroup: 320 dots (each ≈ 40 customers) scatter → cluster into three groups (floating real labels: Free/Pro/Enterprise) → line up into bars (real axis labels) → converge into a dot-matrix big number "12,847" — the same batch of dots, so viewers can follow one dot all the way to where it belongs. C, axis-rescale-shock: the line climbs normally, then the new value punches through the chart's top edge, bursting 220px out of the card (a thick accent-colored line pierces into the title area), holds half a beat, then the y-axis "whooshes" through a rescale (old ticks fly out / new ticks slide in / gridlines densify / the old line compresses into a flat baseline), the new value drops back in and a real-value label pops — using "the axis can't hold it" to perform growth.

## Duration & energy

- Duration: Each 4–6s.
- Energy: Medium-high (the data is the plot).

## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)

## 意图
图表不是插图是剧情。三式共同前提（实测判例）：**必须真图表语境**
——真轴标/真数据/真文案，灰阶占位条测不出数据叙事的表达力。
A 示波流线：曲线写入点钉在右端上下起伏，旧数据左流出画，中途一次
突发尖峰（振幅 2.2×、读数跳大变强调色）——"实时"不用说出口，还有事件；
B 点阵重组：320 个点（每点≈40 customers）散布→聚三簇（浮 Free/Pro/
Enterprise 真标签）→列队成柱（真轴标）→聚成点阵大数字 "12,847"——
同一批点，观众能跟着某一颗看它归队；
C 轴爆表：折线正常爬升，新值顶破图表上沿冲出卡片 220px（强调色粗线
插进标题区），停半拍，y 轴"哗"地重标（旧刻度飞出/新刻度滑入/网格
加密/旧线压扁成地平线），新值落回+弹真值标签——用"坐标轴装不下"演增长。

## 三式选型
| 式 | 核心动作 | 适用 |
|----|----------|------|
| A oscilloscope-stream | 采样窗平移 8px/f + 余弦包络尖峰 + 刹停真静止 | 监控/实时类产品："活着"的系统 |
| B unit-dot-swarm-regroup | 三幕 spring 错峰迁徙（stiffness 150、错峰 8f），终幕点阵拼数字 | 用户量/构成叙事："每个点是一个人" |
| C axis-rescale-shock | 冲出框 220px + 重标三联动（刻度换/网格密/旧线压扁）+ 震 8px | 增长曲线高光："off the charts" 字面化 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 真语境 | 真标题/真轴标/真单位/真读数 | **入库前提**：灰阶版三条全数被裁，换真语境后全过 |
| 主角色 | 强调色（模板片为琥珀）标事件/主角（尖峰读数、Pro 簇、爆表段） | 全灰读不出"哪里是重点" |
| A 流速 | 8px/f | 5.5 已可感，8 更明确；波形纯函数禁随机 |
| B 点数/点径 | 320 / 9px | 点太少拼不出数字，太小看不见个体 |
| C 冲出幅度 | 卡顶外 220px | 80px 版不够"爆"；真的插进标题区才是事故感 |
| 收尾 | 三式都要 ≥36f 真静止 | 数据图表尾漂读作还没播完 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 三式是三种独立手法不是套餐——同片用两式以上时各 ≤1 次且错开段落
- A 的尖峰事件、C 的重标只能发生一次；重复即廉价
- B 终幕数字位图字形要预先手算（点数=位点数用满才整齐）
- 与 dataviz-landscape-open（抽象数据地景开场）分工：那是开场氛围，
  这三式是段落内的具体数据论证
- 声音：A 尖峰一声警示 tick；B 每幕迁徙一声 whoosh；C 冲出框
  一声 riser、重标一声"哗啦"

## 参考实现
demos/data/chart-live-moves/
（AxisRescaleShockV2.tsx / OscilloscopeStreamV2.tsx / UnitDotSwarmRegroupV2.tsx）

## Reference implementation (Remotion)

- demos/data/chart-live-moves/AxisRescaleShockV2.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/chart-live-moves/AxisRescaleShockV2.tsx
- demos/data/chart-live-moves/OscilloscopeStreamV2.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/chart-live-moves/OscilloscopeStreamV2.tsx
- demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx

The component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.


## Flow

1. **Read the recipe**
   Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points.
2. **Get the code** — tool: git
   `git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install`
3. **Register + render** — tool: remotion
   `npx remotion render <CompositionId> out.mp4   # component: demos/data/chart-live-moves/AxisRescaleShockV2.tsx, demos/data/chart-live-moves/OscilloscopeStreamV2.tsx, demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx`
4. **Or re-implement**
   Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing.

## Render

Clone https://github.com/Vincentwei1021/video-shotcraft (npm install). The component lives under demos/{category}/{name}/ and imports shared fixtures from demos/_fixtures and helpers from assets/lib. Copy it (with those imports) into a Remotion project, register a <Composition> with the template's width/height/fps/duration in Root.tsx, then `npx remotion render <CompositionId> out.mp4`. SKILL.md in the repo documents the full Claude Code / Codex workflow. The prompt below is the shot recipe (timing, easing, parameter table, pitfalls) — enough to re-implement the shot in HTML/WAAPI or another engine if you prefer.

## Contract

React/Remotion composition (TSX) from the open-source video-shotcraft library (Apache-2.0). It is not a browser-playable template: clone the repo, register the component in a Remotion project and render with `npx remotion render`. The recipe (prompt) describes timing, easing and parameters so you can also re-implement the shot in any engine.