企业官网建设流程全解析

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

导读

本文深度解析 video-shotcraft 镜头卡库中doc-park-left-pill-deal（文档靠左驻留 + 结论慢发牌）的设计意图、动效核心与原生 Remotion 实现。这张卡解决的是一个非常具体的镜头问题：如何在不丢"来源感"的前提下，把旁白驱动的分析结论逐条呈现给观众。读完本文，你将掌握"park 驻留动画 + 自动滚动 + 旁白节奏发牌 + 逐词加深字幕"四段式动效的完整参数体系，以及如何在 30fps / 480×270 设计坐标下复刻并调校这张卡。

一、这张卡解决什么问题：结论要有来源

旁白驱动的"分析结论逐条给出"段落，是文档理解、推荐理由、审阅意见类产品的核心说明镜头。这类镜头最常见的翻车方式是把来源文档直接淡出——观众记住了结论，却不知道这些结论从哪来，画面读作"空中楼阁"。

doc-park-left-pill-deal的核心解法只有一句话：让来源留在画面里。具体拆解为四个并行的叙事动作：

1. 文档靠左驻留（park）——不是淡出，而是向左滑出只露约 35% 宽，并微缩到 0.92，说明"这份文档还在场"；
2. 文档全程做极缓慢的自动滚动——暗示"正在被读"，维持画面活性；
3. 右侧按旁白节奏慢速发牌三张白底描边药丸（outBack 弹入），每条结论都是"从这份文档里长出来的"；
4. 每张药丸落定后，其下方字幕逐词加深，下一张到来前整句淡出——画面永远只有一句结论。

发牌节奏刻意放慢（间隔约 0.22s 归一化时间），是为旁白留出说完一句的时间，而不是 UI 常规的 stagger 快节奏。整卡时长约 5.8s（174f @30fps），能量评级为"低"——慢发牌节奏、全片无峰值，靠自动滚动维持活性。

二、动效核心：四段编排的时间轴拆解

原卡将动效核心拆为六个要点，以下逐一展开，并结合 DocParkLeftPillDeal.tsx 源码印证。

1. 驻留（park）不是淡出

驻留窗用seg(t, 0.06, 0.24, E.inOutCubic)驱动translateX(0→-55%)与scale(1→0.92)，关键细节是transform-origin: 0% 50%——缩放以左边缘为锚，文档缩小时不会离开画框左侧，最终只露约 35% 宽。

源码中的实现（第 130 行 与 第 155-156 行）：

const park = seg(t, 0.06, 0.24, E.inOutCubic); // ... transformOrigin: '0% 50%', transform: `translateX(${lerp(park, 0, -55)}%) scale(${lerp(park, 1, 0.92)})`,

seg与lerp都来自本系列 demo 的共享公共件 Motion.tsx：seg把归一化进度t在[t0, t1]窗口内归一化后过缓动函数、越界钳位（第 33-34 行），lerp做线性插值（第 30 行）。整条时间轴全部由useT()的归一化t∈[0,1]驱动（第 43-47 行），末帧恰为 1，保证逐帧确定性渲染。

2. 常驻自动滚动：取模保证末帧归零

自动滚动的表达式为translateY(-(t*3 % 1) * 40)：内容高度比容器多 60px，全片走 3 个整数周期、每个周期位移 40px。取模（% 1）保证 t=1 时回到 0，末帧画面稳定，接下一镜时位置对得上。

源码（第 132 行）：

const scrollY = (-((t * 3) % 1) * 40).toFixed(2);

滚动层容器高度为DH + 60（第 180 行），正是文档里"内容溢出量固定 60px"的来源。

3. 慢发牌：发牌间隔 = 旁白句长

三张药丸起点写死在T0 = [0.26, 0.48, 0.70]（第 125 行）——间隔 0.22 归一化时间（约 38f / 1.27s），这是一句短旁白的长度，不是 UI 常规的 stagger。源码中f = T0[k]（第 200 行）直接作为本张药丸两条入场曲线的起点。

4. 每张药丸两条曲线并行：先看见、再落定

每张药丸的入场拆成两条并行曲线，分工明确（第 201-202 行）：

const o = seg(t, f, f + 0.035, E.outQuad); // 透明度：快，约 6f const b = seg(t, f, f + 0.062, E.outBack); // 位移+缩放：慢，约 11f 且带过冲

• o管透明度，窗口 0.035（≈6f，outQuad）——先实后稳；
• b管translateY(14→0) scale(0.94→1)，窗口 0.062（≈11f，outBack）——outBack的过冲是"发牌落桌"的手感（Motion.tsx 第 20 行 定义的outBack带1.70158默认回弹系数）。

两窗刻意不等长：透明度先到位、位移后落定，比单曲线更有"接住"的手感。若两窗等长，会读作普通淡入。

5. 字幕四段编排：永远只有一句

字幕的时间编排围绕药丸落定时刻展开（第 204-207 行）：

const cs = f + 0.05, ce = k < 2 ? T0[k + 1] - 0.03 : 0.98; const showV = seg(t, cs, cs + 0.02); // show：0.02 窗快速出现 const innP = seg(t, cs, cs + (ce - cs) * 0.7); // inn：逐词加深，占可见时长 70% const outP = seg(t, ce - 0.05, ce, E.outQuad); // out：ce-0.05→ce 淡出

• 起点cs = f + 0.05（药丸落定后约 3 帧，落定窗是 0.062）；
• show用 0.02 的窗快速出现；
• inn逐词加深摊在(ce-cs)*0.7上，末 30% 是全实态的静置阅读时间；
• ce是下一张的起点减 0.03（末张ce = 0.98），out在ce-0.05→ce淡出。

每句字幕都在下一张药丸入场前清场，画面永远只有一句。逐词加深的具体渲染由 Caption 组件（第 56-105 行） 完成：入场时每个词按st = 0.78 / n交错、win = st * 1.5窗从浅灰#C9C9CE加深到正文黑#111，出场时按stw = 0.55 / n交错淡回浅灰，同时整行透明度归零。

6. 药丸终态是静态列表：结论清单已成形

三张药丸落位后一直留在画面上（位置写死top = 54 + k*48，第 124 行 定义PY = 54, PH = 34, PG = 14），终帧读作"结论清单已成形"——药丸是静态列表而不是逐个消失，强化"结论已给出"的完成态语义。

三、参数表：调节手感速查

原卡提供完整的参数表，是调校这张卡的核心工具，完整继承如下：

参数之间的联动关系

这张卡的参数不是互相独立的。最典型的联动是：字幕的ce依赖T0[k+1]（前文源码 第 204 行），改任一张药丸的起点都会连带改变前一张字幕的可见时长。这是有意的设计——字幕永远填满到下一张之前——但调参时必须意识到：ce不是独立参数，动T0会同时影响两条链。

四、已知坑：复用这张卡前必读

原卡记录了六个实战中踩过的坑，完整继承如下：

1. 自动滚动的周期数必须是整数。否则末帧文档停在半个周期上，接下一镜时位置对不上；改时长时这个3要重新选。同时注意约束：内容溢出量固定 60px、位移写死 40px，两者不能超。
2. 末张字幕的ce = 0.98意味着它在 0.93→0.98 淡出，末帧只剩三张药丸没有字幕。若想让末句留到底，把末张的ce改成 >1 并去掉 out 段。
3. 药丸位置写死为left:214px, top:54+k*48、宽 172px，是 480 宽画布下与驻留后文档（露出约 87px）配套的一组数字。改文档驻留幅度必须同步改 PX，否则两者重叠。
4. 三条药丸文案（Quick Start / Bundle Plan / Starter Kit）与三句字幕都是占位。字幕长度直接影响"逐词加深"读起来快慢——换真实文案后要按新句长重调inn行程（Caption的逐词交错st = 0.78 / n依赖词数n）。
5. 药丸数写死为 3（T0的长度）。加到 4 条时间就不够：末张起点会超过 0.9，字幕根本走不完；4 条以上应考虑缩短单句而不是硬塞。
6. 字幕的ce依赖T0[k+1]——这是有意的联动（字幕永远填满到下一张之前），但调参时要意识到不是独立参数。

五、源码实现细节：从卡到可运行组件的完整链路

1. 画布与坐标系

组件使用本系列统一的设计坐标容器<DesignStage>（默认 480×270，等比放大到合成分辨率），卡片参数表的所有数值都在此坐标系下标定，改合成分辨率不需要动参数。本卡内部额外做了一层440×240 定尺画布居中排版（第 146 行），文档窗格、药丸、字幕都以这层定尺画布为排版基准。

关于DesignStage的两种光栅管线（scale合成期放大 vszoom布局期放大），见 Motion.tsx 第 49-81 行 的注释——文字密集的小字号场景两种管线字形形状有可感差异。本卡字幕字号 11px，属于小字号场景，若对齐原样片建议按需选raster="zoom"。

2. 视觉素材全部是程序化生成的

这张卡不依赖任何外部纹理：文档窗格是白底描边卡片 + 程序化骨架条（3 栏 × 7 行，行宽由确定性伪随机rand决定，第 107-117 行）；药丸图标是三个纯 SVG 线性占位图标（leaf / bowl / wrap，第 29-52 行）。rand是 Motion.tsx 第 37-40 行 定义的确定性伪随机，同种子跨帧/跨渲染可复现，满足 Remotion 逐帧确定性渲染要求。

3. 时长常量与注册方式

组件导出DOC_PARK_LEFT_PILL_DEAL_DURATION = 174（5800ms @30fps，第 9 行），可直接用于 Composition 注册。按 demos/README.md 的标准用法：把DocParkLeftPillDeal.tsx与共享依赖_fixtures/Motion.tsx一起 copy 进 Remotion 项目（30fps），改 import 路径后注册即可：

import { DocParkLeftPillDeal, DOC_PARK_LEFT_PILL_DEAL_DURATION } from './doc-park-left-pill-deal/DocParkLeftPillDeal'; // ... <Composition id="DocParkLeftPillDeal" component={DocParkLeftPillDeal} durationInFrames={DOC_PARK_LEFT_PILL_DEAL_DURATION} fps={30} width={1920} height={1080} />

注意：DesignStage的width来自useVideoConfig()，注册为 1920×1080 时 480×270 设计坐标会被等比放大 4 倍，参数数值不变。

4. 卡片的元数据与索引

这张卡在库内的元数据定义于 gallery/source/doc-park-left-pill-deal.md（frontmatter 含适用场景、时长、能量评级），并被收录进 gallery/api/library.json 的卡片索引与 gallery/llms.txt 的 LLM 可读目录中。完整的镜卡规范、参数表与坑位说明同时存在于 references/shots/ui-entrance/doc-park-left-pill-deal.md（references 侧是写作时的原始卡稿，gallery/source 侧是发布后的卡片）。

六、调校方法论：三条实操建议

1. 改旁白文案时，先量句长再动T0。间隔 0.22 本身就是一句短旁白的时间锚点；文案变长/变短都要成比例调整间隔，而不是只改药丸文案。
2. 改时长时重新选滚动周期数。t*3 % 1里的3是 5.8s 下的定值；时长变化后要重新计算整数周期，且受"溢出 60px、位移 40px"的双重约束。
3. 用"两窗不等长"的节奏感做同类镜头。这张卡证明：透明度快窗 + 位移慢窗（outBack）的组合，比单曲线更能传达"发牌落桌"的手感；这个模式可以迁移到其他"结论逐条给出"的旁白镜头中。

从源码结构看，这张卡是 motion-lab 孵化轮沉淀下来的 Motion 系 demo（2026-08 并入的 48 张卡之一）——共享依赖Motion.tsx中的E缓动表、seg、lerp、确定性rand、useT、DesignStage六件套即为这批卡的公共基础，本卡是其中"旁白节奏 + 来源驻留"语义的代表实现。

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