# Word relay filmstrip

A left column of black-and-white page cards steps forward while a serif big word on the right relays in place (a fixed noun + a cycling verb) — the column steps only when the word changes, aligned to the current page card's midpoint.

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

## Params

_No params._

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

## Prompt

## When to use

A "one subject × many capabilities" enumeration ("Computer researches/builds/codes…"); portfolio/case-study passages; a product multi-scenario tour

## Intention

The left side is evidence (filmstrip page screenshots), the right side is the argument (a big word): each verb swap steps the filmstrip forward one frame with new evidence — text and image footnote each other. The linchpin is **step motion**: the left column stays completely still otherwise, scrolling one step only on the word swap (scrolling = the mechanical act of changing evidence); continuous scrolling would degrade the left column into background decoration and lose the "click" of the swap. The second linchpin is **alignment**: the big word block's vertical center must align pixel-precisely with the current page card's midpoint — off by a hair and the whole layout's "editorial rigor" feel collapses.

## Duration & energy

- Duration: Each word holds ~1.5–2s × 3–4 words; whole passage 5–7s
- Energy: Medium-low (an editorial temperament, its rhythm carried by the "click" of the word swap)

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

## 意图
左边是证据（页面截图胶片），右边是论点（大词）：动词换一次，
胶片就步进一格给出新证据——文字与画面互为注脚。命门是**步进制**：
左列平时完全静止，只在切词瞬间滚动一格（滚动=换证据的机械动作），
持续滚动会让左列沦为背景装饰、切词失去"咔哒"感。第二命门是
**对齐**：大词块垂直中心必须与当前页面卡中点精确对齐（像素级），
歪了整个版式的"编辑部严谨感"就塌了。

## 动效核心
- 左列：等高页面卡纵向排列，黑白（深浅）强制相间以显滚动步进；
  切词窗口内 ease-in-out 滚动恰好一卡高，其余时间零位移
- 右侧：衬线体（Didot 类）两行——主体名词恒定，动词原位接力：
  旧词灰化淡出（先出），新词落位（后进），先出后进不许叠影
  （判例：v2 叠影"resebuilds"被抓）
- 对齐：词块总高的垂直中心 = 当前卡顶 + 卡高/2（实测 y=540@1080p，
  精确到个位像素）
- 滚动与切词同步：滚动起点=旧词开始灰化，滚动终点=新词落稳

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 页面卡 | 等高（530px@1080p）、黑白相间、约半屏宽 | 不等高/同色系读不出步进；卡太窄失去"证据"分量 |
| 词期 | ~45–60f/词 | <40f 读不完词+胶片看不清；词期不必均匀 |
| 滚动窗口 | ~12f ease-in-out，恰一卡高 | 持续滚动=命门违例；滚过头/不足读作机械故障 |
| 词接力 | 旧词 4–6f 灰化淡出 → 新词 6–8f 落位 | 同帧交叉必叠影；间隙 >10f 读作断片 |
| 垂直对齐 | 词块中心=当前卡中点（像素级） | 用户单点意见"文字高度和中间的页面中点要对齐"；差 >8px 可感 |
| 字体 | 衬线 Didot 类、动词字重比名词轻或同 | 无衬线会丢"编辑部"气质 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 text-column-converge 分工：那张是左右对峙合拢的揭晓戏；
  本卡是纵向证据流+原位接力，无合拢无揭晓
- 与 pill-slot-cycle 分工：那张是胶囊槽位轮换 UI 元素；
  本卡是版式级的图文对位系统
- 实战素材：页面卡应使用真实截图（demo 为灰条示意，残余差距
  已知）；截图亮度要人工分档保证相间可读

## 参考实现
demos/typography/word-relay-filmstrip/
（WordRelayFilmstrip.tsx）
原片出处：perplexity-promo.mp4 ≈76–90s

## Reference implementation (Remotion)

- demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/word-relay-filmstrip/WordRelayFilmstrip.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/typography/word-relay-filmstrip/WordRelayFilmstrip.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.