# Scroll brake moves

A long scroll decelerates to a precise stop on the latest item; a variant adds a reticle lock on the same frame.

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

## Params

_No params._

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

## Prompt

## When to use

Changelog/release-history/long-list sections: "we've always been shipping, but today's is the biggest"; use B when the stop point needs stronger impact

## Intention

The Linear changelog-video grammar: a full year of update logs races past as a long scroll at high speed (blurring into a color band), decelerating exponentially to a precise stop on the latest release, which lifts off the page, highlights, and dims everything else — the density says "we've always been shipping," the hard stop says "today's is the biggest." B is a combined variant: on the same frame as the hard stop, four L-shaped corner marks fly in from off-screen and clamp onto the stopped item — the "thud" of the stop and the "clack" of the lock resonate on the same frame (the critical rule of the combination: the corner marks' launch frame must equal the list's stop frame; any offset degrades it into two separate tricks placed side by side).

## Duration & energy

- Duration: A 4–5s / B 5s
- Energy: Opens high, settles mid (a speed-contrast type)

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

## 意图
Linear changelog 视频语法：一整年的更新日志作为长卷高速掠过
（糊成色带），指数减速精准急刹停在本次发布那条上，该条抬升离面
高亮、其余退暗——密度感讲"一直在发货"，急停讲"今天这条最大"。
B 是组合变异：急刹帧**同帧**四个 L 角标从画外飞入咬合锁定停点
条目——急刹的"哐"与咬合的"咔"叠在同一帧共振（组合命门：
角标起跳帧=列表首停帧，错开退化成两招并置）。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A changelog-scroll-brake | translateY 扫 ~2400px（out exp 指数减速 ~50f），blur 由帧间位移差分驱动（0–6px 自动清零）；停点行 scale 1.03 抬升+阴影+3px 描边，其余 opacity 退 0.38 | changelog 段落基本款 |
| B brake-reticle-lock | 滚动三段：sin-in 加速→cubic-out 猛减速冲过头 +30px→回弹落定；blur=v×0.12 封顶 24px；角标从 ±620/±320 画外 Easing.back(2.4) 飞入咬合，高亮 6f 内完成、标签 back(2.6) 弹出 | 停点需要更强打击感的高光段 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 减速曲线 | A 纯 out-exp；B 加"冲过头 30px 回弹" | 匀速滚读作跑马灯；B 的过头回弹是"哐"的来源 |
| blur 驱动 | 帧间位移差分 `|p(f)-p(f-1)|`×系数 | 手排模糊关键帧必然对不上速度；差分法帧确定（模式已沉为 assets/lib/helpers/motion.ts velocityAt） |
| 行高节奏 | 72/94/116 三档错落 | 等高行高速掠过时色带无节奏 |
| 停位 | 目标行停画面纵向正中 | 停偏读作事故 |
| B 共振帧 | 角标挂载起跳帧 = 列表首次停住帧（严格同帧） | 组合命门，错 2f 以上就散 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 timeline-travel 分工：本卡纵向列表急刹停"最新"，
  那卡横向时间轴旅行看"历史"——同片双用时先后错开且各 ≤1 次
- 高速段条目内容不用真实可读文本——反正糊成色带，占位灰块即可；
  停点条目必须出版级真内容（Q10）
- 停点后其余行退暗 0.38 是构图动作：别退到 0（上下文消失）
- 声音：高速段低频 riser 铺垫，急刹一声 impact；B 咬合帧
  再叠一声"咔"（与 impact 同帧不同声部）

## 参考实现
demos/data/scroll-brake-moves/
（BrakeReticleLock.tsx / ChangelogScrollBrake.tsx）

## Reference implementation (Remotion)

- demos/data/scroll-brake-moves/BrakeReticleLock.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/scroll-brake-moves/BrakeReticleLock.tsx
- demos/data/scroll-brake-moves/ChangelogScrollBrake.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/scroll-brake-moves/ChangelogScrollBrake.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/scroll-brake-moves/BrakeReticleLock.tsx, demos/data/scroll-brake-moves/ChangelogScrollBrake.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.