video-shotcraft 动效卡深度解析:doc-park-left-pill-deal——文档驻留与旁白节奏下的结论慢发牌

发布时间:2026/10/9 5:13:27
video-shotcraft 动效卡深度解析:doc-park-left-pill-deal——文档驻留与旁白节奏下的结论慢发牌 AI 技能媒体生成视频【免费下载链接】video-shotcraftAI 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 仓库中的动效参考卡doc-park-left-pill-deal展开完整拆解其文档不淡出、靠左驻留 右侧按旁白节奏慢速发牌结论药丸的镜头设计并结合仓库内的原生 Remotion 实现源码逐参数说明。读完你将掌握驻留park与自动滚动的写法、双曲线并行入场的手感控制、逐词加深字幕的四段编排以及换文案、改时长时必须同步调整的参数联动关系可直接复用到文档理解、推荐理由、审阅意见类产品的说明镜头中。摘要doc-park-left-pill-deal是 video-shotcraft 中用于旁白驱动的分析结论逐条给出段落的动效卡片来源文档不淡出而是向左滑出只露约 35% 宽并微缩到 0.92右侧按旁白节奏慢速发牌三张白底描边药丸outBack 弹入每张落定后其下方字幕逐词加深、下一张到来前整句淡出左侧文档全程做极缓慢自动滚动保持正在被读的语义。卡片时长约 5.8s174 帧 30fps能量等级为低——全片无峰值靠自动滚动维持画面活性。一、这张卡要解决的问题结论要有出处卡片元信息参考文档 的 frontmatter将其定位为适用场景旁白驱动的分析结论逐条给出段落文档理解、推荐理由、审阅意见类产品的核心说明镜头时长约 5.8s174f 30fps能量低——慢发牌节奏全片无峰值靠自动滚动维持活性。设计意图很直接结论要一条一条给观众才记得住但如果把来源文档淡出结论就变成空中楼阁——观众不知道这些话从哪来。这张卡的解法是让来源留在画面里文档靠左驻留只露一截还在缓慢滚动说明它正在被读右侧的每条结论都是从这份文档里长出来的。发牌节奏刻意放慢是为了给旁白留出说完一句的时间。二、动效核心拆解以下六个动效点构成了这张卡的全部行为均可从实现源码 DocParkLeftPillDeal.tsx 中找到一一对应的代码。2.1 驻留park不是淡出文档的滑出由seg(t, 0.06, 0.24, E.inOutCubic)驱动translateX(0→-55%) scale(1→0.92)。源码中park变量与 transform 的对应关系为源码 L130、L156const park seg(t, 0.06, 0.24, E.inOutCubic); // transform: translateX(${lerp(park, 0, -55)}%) scale(${lerp(park, 1, 0.92)})关键细节是transformOrigin: 0% 50%缩放以左边缘为锚点文档缩小时不会离开画框左侧最终只露出约 35% 宽度480 设计坐标系下约为 87px与右侧药丸left:214px的布局配套见下文已知坑。驻留窗必须在首张药丸起点 0.26 之前收住否则会出现文档还在滑、药丸已在发的浑浊观感。2.2 常驻自动滚动取模保证末帧稳定左侧文档在驻留后全程以极缓慢速度自动滚动源码为源码 L132const scrollY (-((t * 3) % 1) * 40).toFixed(2);内容高度比容器多 60pxheight: DH 60源码 L180全片走 3 个整数周期、每周期位移 40px。取模t*3 % 1保证t1时回到 0末帧画面稳定接下一镜时位置对得上——这正是已知坑中周期数必须是整数的原因。2.3 慢发牌间隔即旁白句长三张药丸的起点写死在T0 [0.26, 0.48, 0.70]源码 L125间隔 0.22约 38 帧 / 1.27s。这个间隔对应一句短旁白的长度而不是 UI 常规的 stagger——它是旁白驱动节奏的显式编码每张结论给旁白留足说完一句话的时间。2.4 每张药丸两条曲线并行先看见、再落定每张药丸的入场由两条独立曲线并行驱动源码 L201-L202const o seg(t, f, f 0.035, E.outQuad); // 透明度快约 6 帧 const b seg(t, f, f 0.062, E.outBack); // 位移缩放慢约 11 帧且带过冲o管透明度0.035 窗口 ≈ 6 帧让药丸先被看见b管translateY(14→0) scale(0.94→1)0.062 窗口 ≈ 11 帧outBack 的过冲带来发牌落桌的手感。两窗不等长是有意设计透明度比位移短读作先实后稳若两窗等长则退化成普通淡入。将 outBack 换成 outCubic 则变成平淡的浮上来。2.5 字幕四段编排画面永远只有一句每张药丸下方配一句逐词加深的字幕其四段时间窗在源码中这样计算源码 L204-L207const cs f 0.05; // 字幕起点药丸落定后约 3 帧 const ce k 2 ? T0[k 1] - 0.03 : 0.98; // 字幕终点下一张起点减 0.03末张 0.98 const showV seg(t, cs, cs 0.02); // show0.02 窗口快速出现 const innP seg(t, cs, cs (ce - cs) * 0.7); // inn逐词加深摊在可见时长的 70% const outP seg(t, ce - 0.05, ce, E.outQuad); // outce-0.05 → ce 淡出show用 0.02 的窗快速出现药丸落定后约 3 帧才起字幕避免字幕先于结论出现inn逐词加深摊在(ce-cs)*0.7上末 30% 是全实态的静置阅读时间ce是下一张的起点减 0.03末张固定为 0.98out在ce-0.05→ce淡出——每句字幕在下一张药丸入场前就已清场画面永远只有一句。2.6 药丸终态是静态列表三张药丸全部落位后一直留在画面上top 54 k*48对应源码常量PY54, PH34, PG14读作结论清单已成形把分析结论逐条给出的完成态固化在画面上。三、源码实现与底层原语3.1 时间轴与缓动原语本卡所有时间参数都建立在公共动效原语上定义于 demos/_fixtures/Motion.tsxseg(t, t0, t1, ease)L33-L34把t在[t0,t1]内归一化后过缓动函数越界钳位——所有动效的时间轴原语lerp(t, a, b)L30线性插值本卡中用于translateX、scale、translateY的数值换算缓动表EL7-L28本卡用到inOutCubic驻留、outQuad透明度、outBack落桌手感默认过冲系数s1.70158useT()L43-L47把当前帧归一化为t∈[0,1]frame / (durationInFrames - 1)末帧恰为 1与样片渲染逐帧一致rand(seed)L37-L40确定性伪随机同种子跨帧/跨渲染可复现——文档骨架条的宽度用它生成。DesignStageL54-L81提供 480×270 设计坐标系本卡注释说明按 480×270 设计坐标、440×240 定尺画布居中排版见 DocParkLeftPillDeal.tsx L5等比放大铺满合成分辨率因此参数表中所有数值都在该坐标系下标定。3.2 逐词加深字幕组件字幕由本系列统一的Caption组件实现DocParkLeftPillDeal.tsx L56-L105其语法为浅灰占位 → 逐词加深到黑 → 逐词淡回浅灰 → 整行归零入场逐词交错st 0.78 / n、窗宽win st * 1.5每个词按(innP - i*st) / win钳位得到加深进度q颜色通过mix(q, DIM, TXT)在浅灰#C9C9CE与正文黑#111111之间插值mix 定义 L22-L26出场逐词交错stw 0.55 / n整行透明度由outP控制1 - (outP - 0.7) / 0.3字距随加深进度收紧letterSpacing: (-0.03 * (1 - q))em加深越充分字距越紧凑强化被读的质感。三张药丸的文案与对应字幕均为占位数据L119-L123Quick Startleaf 图标/ Bundle Planbowl 图标/ Starter Kitwrap 图标配三句英文结论字幕。3.3 布局数字药丸定位写死为left: 214px, top: 54 k*48、宽 172px、高 34pxPX214, PY54, PH34, PG14L124是 480 宽画布下与驻留后文档露出约 87px配套的一组数字。四、参数表可调手感速查参数典型值调节手感发牌起点T0 [0.26, 0.48, 0.70]间隔 0.22≈38f间隔就是旁白句长压到 0.12 以下字幕的逐词加深来不及走完读作字幕闪一下就没了驻留窗0.06→0.24inOutCubic必须在首张药丸0.26之前收住重叠会出现文档还在滑、药丸已在发的浑浊驻留幅度translateX -55%scale 0.92露约 35%露太少25%文档变成装饰失去来源语义露太多右侧放不下 172px 宽的药丸药丸透明度窗0.035≈6foutQuad比位移窗短是有意的——先实后稳两窗等长会读作普通淡入药丸位移窗0.062≈11foutBacky 14→0、scale 0.94→1outBack 的过冲是发牌落桌的手感换 outCubic 会变成平淡的浮上来字幕延迟cs f 0.05≈9f药丸落定0.062之后才起字幕提前会出现字幕先于结论出现字幕加深行程(ce-cs)*0.7占该句可见时长的 70%末 30% 是全实态的静置阅读时间调到 1.0 则字幕刚读完就被淡出自动滚动t*3 % 1× 40px3 个整数周期3 周期在 5.8s 上约 0.7px/f是正在读的暗示级速度3px/f 会抢注意力变成滚动展示五、已知坑与调参注意点自动滚动的周期数必须是整数否则末帧文档停在半个周期上接下一镜时位置对不上改时长时这个3要重新选内容溢出量固定 60px位移写死 40px两者不能超末张字幕的ce 0.98意味着它在 0.93→0.98 淡出末帧只剩三张药丸没有字幕。若要末句留到底把末张的ce改成 1 并去掉out药丸位置是写死的 PX 组left:214px, top:54k*48、宽 172px。改文档驻留幅度必须同步改 PX否则两者重叠占位文案要重调行程字幕长度直接影响逐词加深读起来快慢——换真实文案后要按新句长重调inn行程源码中st 0.78 / n、stw 0.55 / n均与词数 n 挂钩药丸数写死为 3T0的长度加到 4 条时间就不够——末张起点会超过 0.9字幕根本走不完4 条以上应考虑缩短单句而不是硬塞字幕ce依赖T0[k1]改任一张的起点都会连带改变前一张字幕的可见时长。这是有意的联动字幕永远填满到下一张之前但调参时要意识到它不是独立参数。六、仓库内的配套与参考实现这张卡的完整链路在仓库中可逐层追溯参考文档references/shots/ui-entrance/doc-park-left-pill-deal.md本指南的主体来源含动效核心、参数表与已知坑原生 Remotion 实现demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx时长常量DOC_PARK_LEFT_PILL_DEAL_DURATION 174帧即 5800ms 30fps见 L9公共动效原语demos/_fixtures/Motion.tsxseg/lerp/E/useT/DesignStage图文同源卡片源文档gallery/source/doc-park-left-pill-deal.md与参考文档内容一致供展示层使用画廊索引gallery/api/library.json 中收录了该卡的 summary、适用场景、时长、能量等级及source指向供画廊页渲染与检索。如需在 30fps 项目中原样使用将DocParkLeftPillDeal组件挂入 Remotion 合成、设置durationInFrames: 174即可改文案、改时长时重点对照上文参数表与已知坑中的联动关系逐项复核。赞分享AI 技能媒体生成视频【免费下载链接】video-shotcraftAI 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点击查看免费下载相关推荐老游戏黑屏闪退三步用 DDrawCompat 让经典 DirectX 1-7 游戏在现代 Windows 满血复活老游戏黑屏闪退三步用 DDrawCompat 让经典 DirectX 1 7 游戏在现代 Windows 满血复活 DDrawCompat 是一个专为 WinAI 技能媒体生成视频video-shotcraft 镜头卡拆解hashtag-to-pill-materialize 的两次硬切一次滑动节奏骨架video shotcraft 镜头卡拆解hashtag to pill materialize 的两次硬切一次滑动节奏骨架 本篇基于 video shoAI 技能媒体生成视频video-shotcraft 镜头卡实战hashtag-to-pill-materialize 的两次硬切夹一次滑动节奏骨架与 Remotion 实现video shotcraft 镜头卡实战hashtag to pill materialize 的两次硬切夹一次滑动节奏骨架与 Remotion 实现AI 技能媒体生成视频上一篇如何直接与AMD Ryzen处理器对话探索SMU Debug Tool的硬件级控制能力下一篇零门槛智能路由Windows电脑秒变专业级WiFi热点的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询