# Timeline travel pan

Timeline travel — the camera accelerates along a horizontal ruler axis past version tick marks, a card springs upright and pauses briefly at each tick, and an abrupt stop pushes in on the final tick.

- Category: data · Tags: shotcraft, remotion, data, camera
- Spec: 1920×1080 @ 30 fps · 5.38s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/timeline-travel.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/timeline-travel/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/timeline-travel.html

## Params

_No params._

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

## Prompt

## When to use

Changelog/milestone/company-history passages (another way to shoot "we've always been shipping"); complements scroll-brake-moves: that card is a vertical-list hard-brake, this card is a horizontal time journey

## Intention

Shoot the product's version history as a journey along a timeline (the Hurt Locker title-sequence precedent): the camera eases in → sprints → hard-brakes in three speed phases moving horizontally, v1.0/v2.0/v3.0 ticks passing in sequence, and each passed tick springs a matching card upright — history flashing by outside the window, hard-stopping at "today" and pushing in. The speed itself says "development is fast," the hard-stop says "now matters most."

## Duration & energy

- Duration: 4–5s
- Energy: Medium-high (an accelerate-then-hard-brake pacing shot)

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

## 意图
把产品的版本史拍成一次沿时间轴的旅行（《反恐王国》片头判例）：
镜头缓起→冲刺→急刹三段变速横移，v1.0/v2.0/v3.0 刻度依次掠过，
每过一格对应卡片从刻度线上 spring 弹立——历史在窗外闪过，
急停在"今天"并推近。速度本身讲"发展快"，急停讲"现在最重要"。

## 动作阶段
| 阶段 | 帧段参考 | 内容 |
|------|------|------|
| 1 静置 | f0–12 | 空轴 + 首刻度定住 |
| 2 加速掠过 | ~f12–100 | 世界层 translateX 分段缓动：缓起→冲刺→末 12% 急刹 |
| 3 弹卡 | 掠过中 | 相机扫过刻度前 6f 卡片起弹（spring damping ~11 明显过冲），底边为轴 scaleY 立起 |
| 4 急停推近 | 急停帧起 10f | scale 1→1.28 推近末刻度（out cubic），接静止 ≥30f |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 变速曲线 | 输入断点 [0,0.15,0.88,1]→输出 [0,0.055,0.9,1] | 中段不够快就没有"旅行感"；全程匀速即廉价 PPT |
| 弹立时机 | 相机到达刻度前 6f 起弹，由 camXAt 反查 | 到了才弹观众已经错过；早太多读作预告 |
| 刻度密度 | 主刻度 3–5 个 + 次刻度小点若干 | 次刻度点是速度感的参照物，删掉就感觉不到快 |
| 急停推近 | 1→1.28 / 10f | 不推近急停就只是"停了"，推近才是"到了" |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 中段冲刺快到卡片糊时可叠 CameraMotionBlur（只包快速段，轮 #8 判例）
- 急停后静止预算前置：demo 首版静止只有 25f 不达标，急停帧前移才够
  ——排时间线时先给末段留 ≥30f 再倒推行程
- 每张弹立卡片是信息位：实战放真实版本亮点截图/一句话，
  掠过速度要保证至少末两张能读（Q6 同源）
- 声音：每次弹立一声轻打点，急停一声 impact（S2 同源）

## 参考实现
demos/data/timeline-travel/
（TimelineTravel.tsx）

## Reference implementation (Remotion)

- demos/data/timeline-travel/TimelineTravel.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/timeline-travel/TimelineTravel.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/timeline-travel/TimelineTravel.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.