video-shotcraft 的 AI 流式响应动效卡：用 Remotion 把「结论先到、证据随后、任务完成」拍成可读镜头-平芜编程栈

AI 技能
媒体生成
视频

【免费下载链接】video-shotcraft

AI video skill for Claude Code & Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template

项目地址：https://gitcode.com/gh_mirrors/vi/video-shotcraft

点击查看免费下载

导读

本文讲解 video-shotcraft 仓库中ai-stream-response这张 AI 交互动效卡（Shot Recipe Card）的设计意图、动效节奏参数、声音设计与已知坑位，并结合参考实现 StreamResponse.tsx 与其背后的 motion.ts 工具库，逐帧还原「摘要先落 → 证据行逐条汇入 → 统一收束成完成态」的三段式叙事。读完本文，你将掌握：如何用真实产品截图做 backplate 并让动态内容精确重叠回真实槽位、如何用 cue 表编排逐行入场节奏、如何用「状态图标晚到 2–4f」构建主次拖拽层级，以及如何为这段 4–5s 镜头配置一套不机枪化的 SFX 音轨。

一、这张卡解决什么问题：把「AI 正在工作」拍成可读的因果链

ai-stream-response卡位于 gallery/source/ai-stream-response.md，其适用场景是AI 助手 / agent / search / copilot 的结果生成镜头。原卡用一句话概括了核心叙事：

AI 响应面板先落一句可读摘要，再让带状态图标的证据行逐条汇入，最后统一收束成完成态。

它的意图是把「AI 正在工作」拍成一条可读的因果链，而不是日志刷屏：观众先看懂答案摘要，再看到证据/子任务逐条补齐，最后由完成态确认这轮工作结束。这种「结论先到、证据随后、任务完成」的三段式，天然适合产品宣传片中展示 AI 能力的结果生成过程——先让用户读到结论，避免把 4–5 秒的时间浪费在逐字符打字上。

这张卡的时长定位是约 4–5s（120–150f，含 ≥15f 完成态静止），能量等级为「中高」：信息持续增加，但阅读优先于速度炫技。

二、动效核心：五条可复用的设计原则

原卡给出的动效核心可以拆解为五条原则，每条都与源码实现一一对应：

用真实截图做 backplate，动态区精确重叠：使用目标产品真实响应面板截图作为底图（backplate）；截图中的动态区域在动画开始前隐藏，按 layout 坐标把动态内容重叠回真实槽位（对应质检标准 Q1、Q9）。Q1 要求「复刻既有页面必须真实截图」，Q9 要求「飞入动画的终点必须是页面布局里的真实槽位，元素不悬浮在页面上方」。
摘要句先落定，给足阅读窗口：面板进入后，摘要句先以短 wipe/淡入落定，落定后至少 12f 才起首条证据。
证据行逐行汇入，间隔逐渐收紧：6–8 条证据行自下方 14–24px + 轻微 blur 逐行汇入；间隔逐渐收紧但保留可数节拍（对应质检标准 R2：速度感来自加速度，收尾留停顿）。
状态图标晚到，构建主次拖拽层级：行体先停，状态图标晚 2–4f 由 pending 转 running/done，形成「行文本为主、图标为回执」的拖拽层级。这一模式已经沉淀为 assets/lib/helpers/motion.ts 中的lagged工具函数。
末条完成只做一次面板级脉冲：末条完成后只做一次面板级完成脉冲，随后全画面静止 ≥15f；不逐行 glint（对应 Q4：高光/扫光特效宁缺毋滥，不群发）。

2.1 拖拽层级背后的工具：motion.ts 的 lagged

原卡明确标注「模式已沉为 assets/lib/helpers/motion.ts lagged」。查看 motion.ts 可以看到它的实现思想：

/** * Follow-through without stateful simulation: a trailing layer is just the * primary state sampled at `frame − delayFrames`. Build drag hierarchies by * giving each attachment a larger delay and a smaller amplitude (shadow 2f, * ghost 4f, …). Never accumulate state across rendered frames — every layer * stays a pure function of the frame number. */ export const lagged = <T>( stateAt: (f: number) => T, frame: number, delayFrames: number, ): T => stateAt(frame - delayFrames);

lagged的核心是「无状态模拟的跟随效果」：跟随层不过是主状态在frame − delayFrames处的采样。它的约束条件是渲染全程保持纯函数（every layer stays a pure function of the frame number），这正契合 Remotion 的确定性渲染模型——同一帧永远渲染出相同画面，绝不跨帧累积状态。配套的单测见 assets/lib/helpers/tests/helpers.test.ts，其中验证了lagged(stateAt, 20, 4)应返回第 16 帧的状态、延迟为 0 时返回当前帧，且泛型类型透传不变。

在ai-stream-response的实现中，这种「采样滞后」直接体现在状态图标比行体晚 3f 的 cue 编排上（见下文源码解读），不需要显式调用lagged，但其「主层先行、回执层滞后」的语义与lagged完全同构。

三、参数表：把节奏写成可调节的数字

原卡提供了一张完整参数表，这是这张卡最可执行的部分，逐项继承并补充源码证据如下：

参数	典型值	调节手感
摘要	cue 18，10–14f reveal；摘要落定后 hold ≥12f，首行 cue ≥42	摘要与首行粘连会失去「结论先到」的叙事；正常速度必须能先读到一句完整结论
行节拍	`cue[i]=42+[0,11,21,30,38,45,51,56][i]`，每行 10–14f	间隔 11→5f 逐渐收紧，表达工作加速；不要密到所有行同时糊成一团（R2）
行入场	y 18px→0，blur 6px→0，opacity 0→1，bezier(0.2,0.75,0.25,1)	位移须过正常速度肉眼阈值；大幅横飞会像通知列表，不像证据归档
状态图标	比行体 cue 晚 3f；pending 环 → running 缺口环 → done 实心勾，6–8f	图标是状态回执，不抢行文本；同帧切换全部图标会读作假 loading
完成收束	末图标 done 后 6f，面板边框/摘要底色 opacity 0.25→0.55→0.25 共 10f	只做面板级一次，不逐行发光（Q4）；完成脉冲后留 ≥15f 真静止（R1）
相机	信息密集默认正视，zoom 1.04→1.0 微退；暗场斜拍仅作情绪变体	Linear 参考片的斜拍不是通用命令；文字读不清时立即回正视（Q6）

几个关键参数的解读：

行节拍数组是整张卡的时间骨架。42+[0,11,21,30,38,45,51,56]意味着首行 cue=42，随后间隔依次为 11、10、9、8、7、6、5f，从「慢而清楚」逐渐收紧到「快而仍可数」。值得注意的是：参考实现 StreamResponse.tsx 实际只用了 7 行，ROW_CUES = [42, 53, 63, 72, 80, 87, 93]，正好对应42+[0,11,21,30,38,45,51]的前 7 项——文档参数表给出 8 项是留出 6–8 行的余量，实现按 7 行演示。
行入场曲线是Easing.bezier(0.2, 0.75, 0.25, 1)，先快后缓的缓出曲线；位移 y 18px→0 与 blur 6px→0 同步衰减，opacity 0→1与之绑定，保证行「带着轻微上移和虚化入位」，而不是横飞进来。
相机默认正视（信息密集镜头必须正视，对应 Q6：机位服务可读性），zoom 1.04→1.0 微退拉开全貌；斜拍仅作为情绪变体使用。

3.1 源码实现与参数表的对应：StreamResponse.tsx 逐段解读

参考实现位于 demos/interaction/ai-stream-response/StreamResponse.tsx，渲染入口是StreamResponse组件。它与参数表的对应关系非常直接：

摘要 reveal（对应参数表「摘要」行）：

const summary = interpolate(frame, [18, 30], [0, 1], {...clamp, easing: ease});

cue 18、12f reveal与文档的「cue 18，10–14f reveal」完全一致；摘要区域还叠加了一个clipPath: inset(0 ${100 * (1 - summary)}% 0 0)的短 wipe 效果——这正是文档所说的「短 wipe/淡入」。

证据行与状态图标（对应「行节拍」「行入场」「状态图标」三行）：

const EvidenceRow: React.FC<{cue: number; title: string; meta: string; index: number}> = ({cue, title, meta, index}) => { const frame = useCurrentFrame(); const body = interpolate(frame, [cue, cue + 12], [0, 1], {...clamp, easing: ease}); const status = interpolate(frame, [cue + 3, cue + 11], [0, 1], {...clamp, easing: ease}); ... opacity: body, transform: `translateY(${18 * (1 - body)}px)`, filter: `blur(${6 * (1 - body)}px)`,

行体在[cue, cue+12]完成 12f 的入场（body），translateY(18px)、blur(6px)与文档的「y 18px→0，blur 6px→0」一致；
状态图标在[cue+3, cue+11]独立推进（status），比行体晚 3f，对应「比行体 cue 晚 3f」；8f 完成状态切换，对应「6–8f」的上限。

状态图标的三态语义由CheckIcon组件实现（StreamResponse.tsx）：

const ringOpacity = interpolate(progress, [0, 0.45, 0.75], [0.36, 1, 0], clamp); const checkOpacity = interpolate(progress, [0.62, 1], [0, 1], clamp); const checkScale = interpolate(progress, [0.62, 1], [0.72, 1], {...clamp, easing: ease});

progress ∈ [0, 0.45)：缺口环旋转但透明度从 0.36 升到 1——pending → running的「缺口环转动」；
progress ∈ [0.45, 0.75)：环透明度回落到 0——缺口环退场；
progress ∈ [0.62, 1]：实心绿色勾从 scale 0.72 弹入——done 实心勾。

这个三态切换由单个 0→1 的status值驱动，完美对应文档的「pending 环 → running 缺口环 → done 实心勾」。

完成收束（对应「完成收束」行）：

const pulse = interpolate(frame, [110, 115, 120], [0.25, 0.55, 0.25], clamp); const complete = interpolate(frame, [110, 120], [0, 1], {...clamp, easing: ease});

第 110–120f 之间，面板边框透明度0.25→0.55→0.25完成一次面板级脉冲（10f，与文档一致），同时底部出现「Analysis complete · 7 checks finished」完成条；
参考实现总时长约 150f，完成脉冲后仍留有约 30f 静止，满足「完成脉冲后留 ≥15f 真静止」（R1：关键信息落定后必须呼吸）。

相机（对应「相机」行）：

const camera = interpolate(frame, [0, 100], [1.04, 1], {...clamp, easing: ease});

缩放从 1.04 微退到 1.0，与文档「zoom 1.04→1.0 微退」一致，且 camera 作用在包含 backplate 的AbsoluteFill外层容器上（StreamResponse.tsx）。

backplate 的处理：StreamResponse.tsx 将agent-stream.jpg（真实产品响应面板截图，位于 demos/interaction/ai-stream-response/agent-stream.jpg）铺满背景，并施加brightness(.58) saturate(.76) blur(1px)的暗化与柔化，再叠一层径向渐变压暗四周——这正是文档「用目标产品真实响应面板截图做 backplate；动态区截图前隐藏，按 layout 坐标重叠回真实槽位」的实现：动态面板容器（left: 344, top: 72, width: 1232, height: 936）的坐标就是按截图布局中的真实槽位对齐的。

数据虚构：行内容全部使用虚构数据（Indexed the workspace / 128 files、Mapped the authentication flow / 12 modules等），遵循 Q1 的数据风险口径——客户、内部、密钥等信息必须先虚构、脱敏或冻结。

四、声音设计：让音轨跟着叙事走，不逐行机枪化

原卡的声音设计强调「避免逐行机枪感」，完整配置如下：

摘要落定配一发transition-soft；前 3–4 行用短pop轻声递减 0.32→0.20，后半加速密集段合并成一条低音量whoosh-fast，避免逐行机枪感；最终完成态用click-camera的轻量版本（约 vol 0.3）。声音在画面锁定后钉帧。

这些 SFX 在仓库中真实存在：

transition-soft.mp3 —— 1.27s，柔转场，用于品牌落定、场景切入（references/sound-design.md 的取舍表中记录了它在模板片中的使用）；
whoosh-fast.mp3 —— 1.76s，快速运镜、批量元素飞走；
click-camera.mp3 —— 0.35s，点击确认/快门感，模板片中给到全片最高 SFX 响度 0.6（见 references/sound-design.md）；本卡刻意只用其「轻量版本」约 vol 0.3，因为完成态不是点击交互而是状态回执。

这条音轨的逻辑是把声音也当成节奏编排：摘要落定是叙事起点（一发 transition-soft），中间加速段不再逐行配音而是合并成一条低音量 whoosh（S2 防机枪三招之一，见 references/shots/ui-entrance/deck-deal-flyin.md 与 references/aesthetic-rules.md），最后的 click-camera 轻量版收束完成态。

五、已知坑：这张卡最容易翻车的地方

原卡列出了四条已知坑，是实战中反复踩过的教训：

逐字符流式打字会把视线困在字符层：宣传片时长里优先按「语义块」揭示摘要，而不是逐字符打字；真正需要展示输入操作时，应另用type-and-filter卡（见 demos/interaction/type-and-filter/TypeAndFilter.tsx 及其文档 gallery/source/type-and-filter.md）。
行体和状态图标若同帧落定，会像静态列表整体切换：必须保留 2–4f 拖拽层级（这也是上一节讲的lagged模式）。
行终点必须是截图里真实列表槽位：不能把动态行悬浮在面板上方（Q9）；动态内容也必须用虚构数据。
此卡借鉴 Linear Agent 发布片 t≈13–17s（进化轮 #3 breakdown #6），非用户判例：参数未经本库实战项目验证，首次使用必须按 P1 在正常速度下看片——不以逐帧 diff 代替体感。P1 要求交付前必须自己渲染截帧逐一检查，不把首检交给用户。

最后一条尤为重要：这张卡的参数是「从参考片拆解出来的起点值」，而不是「验证过的终点值」，任何实际使用都要先渲染、在正常速度下通读、再调参。

六、参考实现与进一步探索

原卡给出的参考实现路径为demos/interaction/ai-stream-response/（StreamResponse.tsx），即上文逐步解读的 StreamResponse.tsx。围绕这张卡还可以继续阅读：

卡片文档原始定义：gallery/source/ai-stream-response.md，以及同内容的 shot 参考版本 references/shots/interaction/ai-stream-response.md；
拖拽层级工具与单测：assets/lib/helpers/motion.ts 与 assets/lib/helpers/tests/helpers.test.ts；
质检标准全集（Q1/Q4/Q6/Q9/R1/R2/P1 的定义出处）：references/aesthetic-rules.md；
SFX 取舍表与响度分层：references/sound-design.md；
整个仓库的 shot 卡片体系总览：参考 demos/README.md 与 references/workbench.md。

小结

ai-stream-response是 video-shotcraft 仓库中「AI 交互镜头」的样板卡：它把 AI 结果生成拍成「摘要 → 证据 → 完成」三段因果链，用 cue 表精确编排逐行节奏，用状态图标 3f 滞后构建主次拖拽层级，用一次面板级脉冲而非逐行高光完成收束，最后用「摘要 transition-soft、密集段 whoosh、完成态 click-camera 轻量版」的音轨收尾。参数表与 StreamResponse.tsx 的逐帧对应，让这张卡既可以直接复刻演示，也可以作为调参起点，在新项目中使用时按 P1 先渲染看片即可。

AI 技能
媒体生成
视频

【免费下载链接】video-shotcraft

AI video skill for Claude Code & Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template

项目地址：https://gitcode.com/gh_mirrors/vi/video-shotcraft

点击查看免费下载