word-relay-filmstrip 配方卡实战解析：步进胶片 × 原位词接力，把“一个主体 × 多种能力“拍成编辑部式证据链（video-shotcraft）

• AI 技能
• 媒体生成
• 视频

本文以 references/shots/typography/word-relay-filmstrip.md 配方卡为核心，逐项拆解"左列证据胶片步进滚动 + 右侧衬线大词原位接力"这一版式级图文对位镜头：它的设计意图、两大命门、完整参数表，以及 demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx 的源码级实现。读完你将掌握如何用 Remotion 复刻这种"切词即换证"的编辑部气质镜头，并能直接套用到"Computer researches / builds / codes"式的产品能力枚举、作品集案例流与产品多场景巡礼段落。

卡片定位：它是一张讲什么的镜头卡

在 video-shotcraft 的 157 张配方卡体系中，word-relay-filmstrip属于 typography 类别（同时挂ui-entrance标签，见 gallery/api/library.json 中对应记录）。卡片的一句话定义是：

左列黑白相间等高页面卡步进滚动、右侧衬线大词原位接力（名词恒定 + 动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐。

它要解决的典型文案结构是"一个主体 × 多种能力"的枚举段：主体名词恒定（如 Computer），能力动词轮换（researches → builds → codes）。卡片 frontmatter 明确给出的适用场景有三类：

• 枚举段："一个主体 × 多种能力"，如 Computer researches / builds / codes；
• 作品集 / 案例流展示：多个案例以胶片形式纵向排列，逐一成为大词的证据；
• 产品多场景巡礼：同一个产品在不同场景下的能力巡礼。

时长预算：每词期约 1.5–2s × 3–4 词，全段 5–7s。能量定位：中低——"编辑部气质"，节奏不靠速度，而靠切词那一刻的"咔哒"感。原片出处：perplexity-promo.mp4 约 76–90s 处，demo 是依据该参考片逐帧量取后复刻的调校版本。

设计意图：文字与画面互为注脚

这张卡的核心叙事结构是图文对位：

• 左边是证据：一列纵向排列的页面截图胶片；
• 右边是论点：一个大号衬线词。

两者通过一个机械动作绑定：动词换一次，胶片就步进一格给出新证据——文字与画面互为注脚。观众先看到动词变化，视线随即被胶片滚动带向下一张"证据"，形成"论点提出 → 证据落定"的阅读节奏，而非单纯的文字轮换。

设计上存在两个"命门"（违反即整卡失效）：

1. 步进制：左列平时必须完全静止，只在切词瞬间滚动一格。滚动在这里承担的是"换证据"的机械动作语义；一旦变成持续滚动，左列就会沦为背景装饰，切词瞬间的"咔哒"感随之消失。卡片原文将其表述为"持续滚动会让左列沦为背景装饰、切词失去'咔哒'感"。
2. 对齐：大词块的垂直中心必须与当前页面卡的中点精确对齐（像素级）。这是"编辑部严谨感"的视觉根基——"歪了整个版式的'编辑部严谨感'就塌了"。

这两条命门不仅是设计原则，也直接决定了下方参数表中多个参数的调节方向。

动效核心拆解

左列：步进式滚动胶片

• 页面卡等高纵向排列，黑白（深浅）强制相间以凸显滚动步进——同色系或不等高都会让"步进一格"读不出来；
• 滚动只在切词窗口内发生，采用 ease-in-out 缓动，恰好滚动一卡高（卡高 + 间距），其余时间零位移。

demo 中六张卡片按DarkArticle → LightMedal → DarkMri → LightTable → DarkStats → LightPortfolio固定顺序排布，奇偶位置强制黑白交替（详见下文源码解析）。

右列：原位接力，先出后进

右侧是衬线体（Didot 类）两行排版：

• 第一行主体名词恒定（demo 中为 "Computer"）；
• 第二行动词原位接力：旧词灰化淡出（先出），新词落位（后进）。

接力有严格次序：先出后进，不许叠影。判例记录在案：v2 版本因叠影出现 "resebuilds"（新旧词同屏交叠的残影）被抓出返工。词与词之间不做位移，全部在原位通过透明度与颜色（黑→灰→透明）完成交接。

像素级对齐

词块总高的垂直中心= 当前卡顶 + 卡高/2。demo 在 1080p 下的实测值为y=540，精确到个位像素（卡顶 y=275 + 卡高 530/2）。用户对这张卡的单点反馈原文是"文字高度和中间的页面中点要对齐"，实测偏差 >8px 即可感知。

滚动与切词同步

滚动与切词的帧级绑定关系：

• 滚动起点= 旧词开始灰化（即切点前约 14 帧）；
• 滚动终点= 新词落稳。

也就是说，左列的滚动窗口与右列的词交接窗口完全同步——观众看到"旧词变灰"的瞬间，胶片开始滚动一格，新词落定时滚动恰好完成。

参数表：完整继承与调校手感

几个值得展开的调校细节：

• 词期不必均匀：demo 的切词帧为 14 / 62 / 108，即第 1 词驻留 48f、第 2 词驻留 46f——不是节拍器式的均匀停留，这样更接近"人读词"的自然呼吸；
• 滚动窗口的"恰一卡高"：demo 用STEP = CARD_H + GAP精确控制单次步进量，任何"滚过头/不足"都会被观众读作机械故障；
• 字体栈：demo 采用'"Didot", "Bodoni 72", "Playfair Display", Georgia, serif'，字号 116px、字重 400，动词与名词字重一致（"比名词轻或同"均可）；换成无衬线会直接丢掉编辑部气质。

源码实现深度解析：WordRelayFilmstrip.tsx

参考实现位于 demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx，当前为v3版本。文件头注释记录了版本沿革：v2 依据参考片截图（perplexity-promo01，7 张）重做布局，v3 完成批次 12 的单点微调——把右侧大词块的垂直中心从 top 462 修正到 402，以对齐当前页面卡的垂直中点 y=540。以下按模块拆解其实现原理。

确定性渲染：mulberry32 种子随机

demo 没有使用任何无参随机：所有卡片内容由mulberry32(seed)种子随机函数生成，卡片种子为(i + 1) * 733。这与 references/pipeline.md 阶段 5 的"确定性渲染铁律"一致——禁Date.now()/Math.random()，一切伪随机用固定种子，保证逐帧可复现、渲染间零抖动。

卡集合与黑白相间

关键常量：

const CARD_W = 940; // 卡宽，约半屏（1080p 全宽 1920） const CARD_H = 530; // 卡高 const GAP = 105; // 卡间距 const STEP = CARD_H + GAP; // 单次步进量

六张卡片严格奇偶交替：DarkArticle（深色文章页）、LightMedal（浅色奖牌/按钮页）、DarkMri（深色 MRI 界面）、LightTable（浅色表格页）、DarkStats（深色数据统计）、LightPortfolio（浅色作品集网格）。卡片内部全部用 CSS 块模拟真实页面元素（导航栏、搜索框、列表行、图表、卡片网格等），是灰阶/占位示意而非真实截图——这一点在"已知坑"部分有专门交代。

步进滚动：interpolate + easeInOutCubic

滚动实现的核心逻辑：对每个切词窗口[s, s + SW_DUR]用interpolate把帧映射到 0→1（两侧clamp截断），再套easeInOutCubic（p < 0.5 ? 4*p³ : 1-(-2p+2)³/2）得到本窗口的步进进度，累加后乘以STEP得到总位移：

• 窗口之外：进度被 clamp 在 0/1，位移完全静止——这正是"平时静止、只在切词窗口内滚一格"的实现机制；
• 窗口内：恰好滚动一个STEP（一卡高 + 间距），缓动对称平滑。

注意一个参数细节：卡片参数表的"滚动窗口 ~12f"是配方卡的典型值；demo 实际使用SW_DUR = 16帧（切词帧SWITCHES = [14, 62, 108]，即 14–30f / 62–78f / 108–124f 三个滚动窗口）。实战中 12–16f 区间都是合理起点，关键是"窗口外零位移 + 窗口内恰一卡高"两条硬约束。

卡片铺设采用三组循环复制（rep = -1, 0, 1）并按y = 275 + i*STEP + rep*total - scroll定位，total = CARDS.length * STEP，配合y > 1200 || y < -CARD_H - 120的裁剪，实现任意滚动相位下画面始终有卡、且滚动可无缝循环。

词生命周期：先出后进不叠影

右侧词行容器高 140px，动词逐个渲染。每个词的生命周期被拆成四段（见 WordRelayFilmstrip.tsx）：

1. 入场淡入（黑字）：新词在切点后 7 帧才开始淡入，interpolate(frame, [sIn+7, sIn+SW_DUR], [0,1])——刻意延后入场，避免与旧词叠影；
2. 常驻黑：保持纯黑rgb(25,25,25)附近；
3. 灰化：切点前 14 帧开始，interpolate(frame, [sOut-14, sOut-2], [0,1])，到切点前 2 帧已完全变灰——这是"旧词灰化"阶段，也是滚动启动的信号；
4. 淡出：切点起前半窗口内出完，interpolate(frame, [sOut, sOut+8], [1,0])。

透明度由平滑函数smooth(x) = x²(3-2x)对入场/出场分别平滑后相乘；灰化用smooth(grey)在#191919与#9d988e之间插值颜色（RGB 从 0x19 插到 0x9d/0x98/0x8e）。代码注释点明：参考片截图 4/6 捕捉到的正是"旧词已灰、新词未现"的中间态——这是原片真实的交接节奏，也是"先出后进"判例的来源。

对齐公式：top = 540 − 277/2 ≈ 402

v3 的对齐计算（源码 L291-L297）：

• 词块总高 ≈ Computer 行（116px × lineHeight 1.18 ≈ 137px）+ 词行容器 140px =277px；
• 当前页面卡中点 y = 卡顶 275 + 卡高 530/2 =540；
• 词块 top = 540 − 277/2 ≈402。

这就是"像素级对齐"的落地公式：把两行总高的中心钉在卡片中点，而不是某一行对齐卡片边缘。

与相邻卡片的边界

卡片文档专门划清了它与两张相邻卡片的分工，实战选卡时不要混淆：

• 与 text-column-converge 的分工（见 references/shots/typography/text-column-converge.md）：那张是左右两词对峙、最后一词才唯一一次合拢的揭晓戏（收尾揭晓型文字卡）；本卡是纵向证据流 + 原位接力——没有合拢、没有揭晓，只有"切词换证据"的机械步进。若段落没有"合拢揭晓"的收束诉求，就不该用 text-column-converge；
• 与 pill-slot-cycle 的分工（见 references/shots/typography/pill-slot-cycle.md）：那张是胶囊槽位里整词级老虎机式轮换，属于** UI 元素级轮换（句干钉死、槽内换 pill）；本卡是版式级**的图文对位系统——左列一整屏证据胶片 + 右侧版式级大词，两者视觉层级完全不同。pill-slot-cycle 适合"一句话卖点 + 多个动词短语"，而本卡适合"一列真实产品页面 + 主体能力枚举"。

已知坑与实战调校路径

卡片文档明确列出四类已知坑，直接决定实战产出质量：

1. 参数是调校起点，不是实战定稿：demo 全部在灰阶/占位素材上调校通过（6 张卡片均为 CSS 示意块），首次实战必须以真实素材回验——所有时值、字号、间距参数都可能需要按真实截图密度微调；
2. 与 text-column-converge / pill-slot-cycle 的分工（见上节）：选卡前先判断段落结构，避免三张卡在同一个片子中功能重叠；
3. 实战素材要求：
   • 页面卡应使用真实截图（demo 为灰条示意，与真实页面的残余差距已知）；
   • 截图亮度要人工分档，保证黑白（深浅）相间可读——真实页面亮度相近时，"相间"信息会消失，步进感也随之消失；
4. 对齐的验收口径：偏差 >8px 用户即可感知，静帧验收时必须逐像素核对词块中心与当前卡中点。

在八阶段流水线中落地

这张卡在制作流水线中的位置非常明确（见 references/pipeline.md）：

• 阶段 2（功能到镜头映射）：扫描references/shots/全部卡片 frontmatter，按"适用 / 能量 / 建议时长 / 限制 / 所需页面状态"为能力枚举类功能选择本卡；
• 阶段 5（逐镜头实现）：先读配方卡全文 → 按"参考实现"定位并读 demo TSX 全文 → 把 assets/lib/ 对应组件 copy 进项目。流水线强调"demo 代码是调校过的参数真相"——缓动、时值配比、摘罩时机、已知坑的规避写法都在里面，允许做适配性改动，但配方卡"已知坑/命门"标注的参数不得降档；
• 静帧验收：每镜头用npx remotion still src/index.ts <Comp> out/qa/<name>.png --frame=<N>抽 2 个验收帧号肉眼自检，重点核对切词瞬间（旧词灰化 + 滚动起点）与落稳瞬间（新词落位 + 滚动终点）两帧的同步与对齐；
• 交付接口：按 references/workbench.md 把文案/颜色/字号/位置做成带默认值的 props、节奏命门保持常量，交付前cd workbench && npm run parity证明拆解无损。

一句话总结这张卡的实战要点：左列平时纹丝不动、只在切词窗口内 ease-in-out 恰好滚一卡高，右侧旧词先灰化淡出、新词延后落位，词块总高的垂直中心与当前页面卡中点像素级对齐——满足这三条，你就复刻出了"Computer researches / builds / codes"式证据链镜头的全部精髓。

• AI 技能
• 媒体生成
• 视频