# Odometer digit roll

Full-screen digits spin like slot-machine reels, locking in one by one left to right with an overshoot, then pulse once locked.

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

## Params

_No params._

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

## Prompt

## When to use

Full-screen reveal of a single hero metric ("10x"/"99.98%"-tier); division of labor with impact-feedback style B (damage-number pop): that's an element-level side dish, this is a full-screen main course

## Intention

The library already has "slam" (score-slam) and "pop" (damage-number) for hero-number entrances, both displacement-based. This card is **mechanical**: the digits aren't flown in, they're "computed" — each digit is a 0–9 reel spinning fast, decelerating left to right, overshooting half a slot, and clicking into lock, the standard grammar of Vercel Ship/Stripe Sessions metric sections. The rolling carries built-in suspense (what will it land on?), and the per-digit lock carries built-in rhythm (clack, clack, clack, clack) — more anticipation than just showing the final value. Difference from VerticalTicker (backlog candidate): this has a final value and settles digit by digit, it isn't an infinite scroll wall.

## Duration & energy

- Duration: Roll + per-digit lock ~63f + pulse 8f + hold ≥45f, about 5s
- Energy: Medium-high

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

## 意图
王牌数字的登场库内有"砸"（score-slam）和"弹"（damage-number），
都是位移系。本卡是**机械系**：数字不是飞进来的，是"算出来的"——
每位一条 0–9 滚轮高速转动，从左到右逐位减速、过冲半格、咔哒锁定，
Vercel Ship/Stripe Sessions 指标段的标准语法。滚动过程自带悬念
（它会停在几？），逐位锁定自带节奏（哒、哒、哒、哒），比直接显示
终值多一整拍的期待感。与 VerticalTicker（backlog 待选）的区别：
有终值、逐位停稳，不是无限滚动墙。

## 动效核心
- 每位一个 overflow:hidden 数位盒 + 0–9×2 纵列 strip，
  `translateY = −(pos % 10) × 行高`，posAt(f, i) 纯帧函数
- 位 i 于 20+i×7f 开始 16f Easing.out(cubic) 减速至目标 +0.5 行
  **过冲半格**，再 6f 弹回整数锁定——锁定帧即各位的"哒"
- 滚动期每位叠 2 个错帧残影副本（translateY ±行高×0.5，
  opacity 0.25/0.12），按相邻帧速度门控，停稳自动摘——纵向拖影
  与 smear-multiples 同理（可数残影不是模糊）
- 全体锁定帧：整体 ink→#000→ink 加深脉冲 8f + 1.035 微缩放 +
  下方标签条淡入——"合计确认"的句号
- 小数点与 % 等非数字位全程驻场不滚

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 字号/字体 | 190px fw800 + fontVariantNumeric: tabular-nums | 非等宽数字每滚一格整行抖动（同 scramble 等宽判例） |
| 错峰 | 20+i×7f 起停，从左到右 | 从右往左停读作倒着算；同时停失去"哒哒哒" |
| 过冲 | +0.5 行再 6f 弹回 | 无过冲读作滑到即停，机械感减半 |
| 残影 | 2 副本 0.25/0.12，速度门控 | 3+ 副本高速下糊成一条（行高小于卡片场景） |
| 终值脉冲 | 加深 + 1.035 缩放 8f | 只加深不缩放在 190px 黑字上不可感（实渲加码） |
| 收尾 | 脉冲归零后真静止 ≥45f | R1 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 数位 ≤6（含小数点前后）——每多一位多 7f 错峰，8 位滚完 >2.5s
  观众等不起；大数换缩写（12.4M 不是 12,400,000）
- 与 impact-feedback B（伤害数字）同片可共存但分工要清：全屏主菜
  一次（本卡），卡片配菜多次（B 式）——两处都全屏就是两次主菜
- 滚动的数字必须是**真值的各位**——终值 99.98 就滚 9/9/9/8，
  中途乱数会被暂停党抓到"假滚动"
- 声音强依赖候选位：逐位锁定"哒"×N + 终值确认一声低音
  （sound-design §4.5），无声版成立但少一半爽感

## 参考实现
demos/data/odometer-digit-roll/
（OdometerDigitRoll.tsx）

## Reference implementation (Remotion)

- demos/data/odometer-digit-roll/OdometerDigitRoll.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/odometer-digit-roll/OdometerDigitRoll.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/odometer-digit-roll/OdometerDigitRoll.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.