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点击查看免费下载bezier-source-converge-merge是 video-shotcraft 仓库 ui-entrance 镜头卡集合 中的一张代表性动效卡左侧四个来源节点各由一条细贝塞尔曲线连向右侧同一汇聚点曲线错峰 draw-on节点沿真实曲线滑向汇聚点并三段式加速缩小被吸进去强调色数据包全程沿路径滑行吞并完成后曲线反向擦除只留圆形徽标与逐词加深字幕。本文以该镜头卡文档为主体结合 BezierSourceConvergeMerge.tsx 参考实现 的源码级证据完整拆解其路径几何、时间轴编排、参数表与已知坑帮助你把它直接复用到多源整合 / 统一接入 / 数据汇聚类产品的宣传镜头中或作为模板改出属于自己的汇聚动效。镜头卡定位与适用场景这张卡在仓库里归属ui-entranceUI 入场类别gallery/api/library.json 中收录为 157 张镜头卡之一并配有gallery/media/bezier-source-converge-merge.mp4的 214 个 motion 预览之一。它的官方定位是适用多源整合 / 统一接入 / 数据汇聚的核心机制镜头集成、聚合、单一入口类产品的说明段落。时长约 5.6s168f 30fps导出常量即BEZIER_SOURCE_CONVERGE_MERGE_DURATION 168。能量中长镜慢速推进靠数据包滑行维持活性吞并瞬间是唯一小高点。也就是说当你的产品页面要说我们把四个来源统一了、所有渠道接入同一个入口时与其放一句抽象文案不如用这张卡把过程演出来——这正是该镜头卡的设计哲学。动效意图把抽象话变成可看的物理过程镜头卡文档在意图一节把这段动效拆成三段叙事每段有明确的起止观众不需要旁白就能读出因果先建立通路四条独立曲线的 draw-on 是连上了——四个来源分别与汇聚点产生连接关系再让来源走进同一个点节点沿自己的曲线滑向汇聚点、缩小到 0是被吞并——来源真的被吸收进去了最后擦掉通路只留徽标曲线从左端反向擦除、只剩汇聚徽标与字幕读作现在只有一个。这一意图在源码里也有对应的三段式收束注释见 BezierSourceConvergeMerge.tsx 顶部注释曲线先由左向右 draw-on节点沿自己的曲线滑向汇聚点并三段式加速缩小像被吸进去强调色数据包小圆持续沿路径滑行吞并完成后曲线从左端反向擦除只留圆形徽标 逐词加深字幕。动效核心拆解路径几何一条直线段 一段三次贝塞尔每条路径的d属性固定为M -22,y L 74,y C 186,y 214,120 332,120起点在画框外x -22依赖 SVGoverflow: visible才能露出画框外的一截x 74处是来源节点的驻留位draw-on 完成后、滑动开始前节点停的位置之后一段三次贝塞尔曲线弯向汇聚点(332, 120)四条路径只差起始y36 / 92 / 148 / 204间距 56所以它们的曲率天然不同汇入角度也不同。源码中 SRCS 常量 以中性灰阶分层定义四路S1#111111、S2#4A4A50、S3#7A7A82、S4#A3A3AA灰度仅用于区分来源不参与语义。draw-on用 stroke-dasharray / dashoffset 模拟接通曲线绘制采用 SVG 虚线技巧stroke-dasharray len stroke-dashoffset len * (1 - draw) draw seg(t, 0.04 i * 0.045, 0.04 i * 0.045 0.17, E.outQuad)len是路径全长直线段定长 96 曲线段弧长源码中由mkPathGeom预计算draw从 0 走到 1 时dashoffset从len归零虚线视觉上表现为由左向右刷出0.045的错峰让四条线像被依次接通而不是一起亮约 7 帧间隔缓动用E.outQuad见 demos/_fixtures/Motion.tsx 的缓动表起笔快、收笔慢符合连线的手感。节点定位沿真实曲线走而不是两点间插值这是整张卡最值得借鉴的技术点。节点位置不是起点到汇聚点的直线插值而是沿真实贝塞尔曲线移动先在prime 阶段以 40 步线性扫描求出路径上x ≈ 74节点驻留位对应的路径比例f0运行时frac f0 (1 - f0) * conv其中conv seg(t, 0.34, 0.74, E.inOutCubic)是汇聚主进度用getPointAtLength(len * frac)反查路径上的实际坐标。值得注意的是文档中该定位依赖 SVG 的getTotalLength/getPointAtLength而参考实现做了进一步加固——为避免 Remotion 首帧渲染时 SVG 尚未挂载布局拿不到长度文档已知坑第一条源码在 mkPathGeom 里用纯数学替代了 DOM API把三次贝塞尔段离散成 1600 段折线建累积弧长表误差远低于 0.01px再用二分反查弧长 → 参数 u。这是纯模块级预计算无 DOM 依赖完全满足 Remotion 逐帧确定性渲染的要求也就彻底规避了首帧错位跳变。三段式缩小44 → 15 → 0被吸进去的加速感节点尺寸不是线性缩小而是分两段tt 0.75 时size lerp(tt / 0.75, 44, 15) // 前 75% 行程缓慢瘦身 tt ≥ 0.75 时size lerp((tt - 0.75) / 0.25, 15, 0) // 后 25% 行程掉光后段的尺寸变化率是前段的 4 倍多这就是被吸进去的加速感。配套细节字号跟着size * 0.26同步缩下限 4px标签不会脱离节点节点 opacity 在conv 0.92后才开始淡出(1 - tt) / 0.08而conv在t 0.74就到 1所以节点是尺寸缩到 0 时消失而不是淡出消失——这是有意的被吸进去不该淡出。数据包整数周期 相位偏移 中段最亮强调色小圆7px、#3B82F6描边 淡色填充沿路径持续滑行给长镜慢速推进提供活性pkCycle (seg(t, 0.1, 0.74, E.linear) * 2) % 1走两个整数周期——必须是整数周期否则末帧包停在半路各路加i * 0.13相位偏移错开四路的包避免它们排成一行同时汇入透明度用1 - |cycle - 0.5| * 0.6让包在路径中段最亮、两端淡——避免看到包在起点凭空出现数据包整体由pkOn seg(t, 0.1, 0.16) * (1 - seg(t, 0.7, 0.76))控制启停。擦除dashoffset 取负从起点方向反向退走吞并完成后erase seg(t, 0.78, 0.9, E.outQuad)把 dashoffset 推成负值-erase * lenoff erase 0 ? -erase * len : len * (1 - draw)由于 dashoffset 为负虚线从起点方向退走方向与 draw-on 相反读作通路收回。同时路径 opacity 在(erase - 0.85) / 0.15区间内淡出保证擦除收尾干净。徽标与字幕吞并时刻的接收脉冲汇聚点(332, 120)处是白底圆形徽标内含四角星占位标记BADGE_SIZE 34入场seg(t, 0.16, 0.26, E.outCubic)淡入并从 scale 0.7 放到 1吞并瞬间t 0.7 → 0.78用E.outBack顶起 12%再在 0.78 → 0.86 用E.outQuad减回——这是一次接收到了的脉冲量级 12% 是刻意控制的25% 会抢过汇聚本身的注意力末尾字幕 Four sources unified 在t 0.84后淡入且采用逐词加深语法CAP_WORDS.split( )每个词按capInn进度从浅灰#C9C9CE插值到黑#111111字距随加深收紧整行透明度随capShow淡入。参数表完整继承 源码印证镜头卡文档给出的参数表是全卡调参的核心逐行都能在源码中找到对应实现参数典型值调节手感来源数4 条y36/92/148/204间距 564 条是曲率差异明显又不打结的甜点6 条中间几条的贝塞尔几乎重合汇入角读不出区别draw-on起点0.04i*0.045窗 0.17outQuad0.045 的错峰约 7f归零会读作四条线一起刷出失去逐路接通的语义汇聚窗0.34→0.74inOutCubic占全片 40%是主段落inOut 的缓起是启动、缓收是到位换 linear 立刻变成匀速传送带三段缩小44→15px前 75%→ 0后 25%拐点 0.75 越靠后吸入越突然把它挪到 0.5 会变成一路缩小吞并的那一下就没了数据包周期2 个整数周期0.1→0.74 线性必须是整数周期否则末帧包停在半路周期加密到 4 会读作数据流很急也更容易和节点重叠包相位偏移i*0.13错开四路的包避免它们排成一行同时汇入0 会看到四个包整齐并进像一次发车擦除0.78→0.9dashoffset 取负12f 完成擦除必须在节点全部消失conv0.74 结束、节点 0.92 前淡完之后否则线先没了节点悬在空中徽标脉冲outBack 12%0.7→0.78→ 回落0.78→0.8612% 是接收到了的量级25% 会抢过汇聚本身的注意力补充两条源码级的关联事实seg/lerp/E缓动表 /useT都来自 demos/_fixtures/Motion.tsx其中useT()把当前帧映射到全片归一化进度t ∈ [0,1]末帧恰为 1与样片渲染逐帧一致——所以上表的0.04 / 0.34 / 0.74等时间点全部是归一化比例换帧率或换分辨率时数值不需要改动。已知坑与规避方案镜头卡文档的已知坑一节全部值得落地前仔细阅读这里逐条保留并补充源码证据getTotalLength/getPointAtLength必须在 SVG 已挂到文档且完成布局之后才有效。文档记载 motion-lab 原实现用ready标志在首帧prime()里做移植到 Remotion 时首帧渲染可能拿不到长度fallback 写了|| 380稳妥做法是在useEffect/layout 后再算或预先算好常量表否则首帧会出现一次错位跳变。参考实现正是采用了预先算好常量表路线1600 段折线弧长表 二分反查模块级预计算、无 DOM 依赖彻底规避了该问题。f0精度只有 1/40f0是 40 步线性扫描找出的x 首次 ≥74的比例源码第 79–83 行初始值f0 0.2逐步上探。曲线形状改动大时节点驻留位会偏离 74看起来没停在该停的地方——改路径后要提高扫描步数或直接标定。节点是缩到 0 消失而非淡出节点 opacity 在conv 0.92后才开始淡出而 conv 在 t0.74 就到 1所以节点是尺寸缩到 0 时消失。这是有意的被吸进去不该淡出但如果把三段式拐点改晚会看到节点在有尺寸时突然消失。节点是中性灰阶占位圆落地要换真实来源 logo强调色只留给数据包与徽标不要给节点上色否则汇聚点的视觉主体被夺走。坐标是绑定的一组汇聚点(332,120)与 SVG 视口440×240、overflow: visible绑定。改画布比例要整套重标路径起点-22依赖overflow: visible才能露出画框外的一截。此外外层用DesignStage的 480×270 设计坐标等比放大见 demos/README.md卡片参数表数值都在该坐标系下标定改合成分辨率不需要动参数。字幕是占位文案Four sources unified 出现在 0.84 之后。如果要配旁白这句的出现点应对齐旁白落词而非动画节点。参考实现与复用方式参考实现位于 demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx属于 2026-08 并入的 48 张 Motion 系 demo手法研究自公开发布的产品宣传片全部从零重写、去品牌化、占位化来源溯源见 references/shots/ATTRIBUTION.md。复用步骤与这批卡的通用约定一致详见 demos/README.md把BezierSourceConvergeMerge.tsxcopy 进你的 Remotion 项目同时带上 demos/_fixtures/Motion.tsxE 缓动表 / seg / lerp / rand / useT / DesignStage并修正 import 路径以 30fps / 1920×1080 注册 Composition直接用导出的时长常量import { BezierSourceConvergeMerge, BEZIER_SOURCE_CONVERGE_MERGE_DURATION } from ./bezier-source-converge-merge/BezierSourceConvergeMerge; Composition idBezierSourceConvergeMerge component{BezierSourceConvergeMerge} durationInFrames{BEZIER_SOURCE_CONVERGE_MERGE_DURATION} // 168 fps{30} width{1920} height{1080} /落地产物时把S1–S4占位圆换成真实来源 logo把徽标四角星换成产品标识字幕换成真实文案并对齐旁白落词其余时间轴与参数可直接沿用。小结bezier-source-converge-merge的价值在于它把多源整合这一抽象语义完整翻译成了一组可调参的物理过程draw-on 建立通路、沿真实曲线滑入、三段式加速缩小、整数周期数据包维持活性、反向擦除收束成单一徽标。其核心技法——用stroke-dasharray/dashoffset实现双向绘制、用弧长表 二分反查替代 DOM 依赖的getPointAtLength、用两段缓动拼出吸入加速感——都不依赖特定业务可以在 video-shotcraft 的其他镜头卡与你的 Remotion 工程中自由复用。赞分享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 动效卡拆解用贝塞尔曲线贝塞尔汇流实现多源统一的产品镜头video shotcraft 动效卡拆解用贝塞尔曲线贝塞尔汇流实现多源统一的产品镜头 本文以 video shotcraft 仓库中的动效卡 bezieAI 技能媒体生成视频video-shotcraft 镜头卡深度解析AvatarBracketCarousel 对焦框头像轮换动效的实现与调参指南video shotcraft 镜头卡深度解析AvatarBracketCarousel 对焦框头像轮换动效的实现与调参指南 本篇技术指南以 video shAI 技能媒体生成视频video-shotcraft 里程表数字滚动动效卡odometer-digit-roll 的实现原理与调校实战video shotcraft 里程表数字滚动动效卡odometer digit roll 的实现原理与调校实战 在 video shotcraft 这个 RAI 技能媒体生成视频上一篇MCP-Security-ChecklistAI插件安全终极指南 - 10个关键防护要点下一篇FreqAI 数据管道拆解一条K线如何变成模型输入创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
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点击查看免费下载bezier-source-converge-merge是 video-shotcraft 仓库 ui-entrance 镜头卡集合 中的一张代表性动效卡左侧四个来源节点各由一条细贝塞尔曲线连向右侧同一汇聚点曲线错峰 draw-on节点沿真实曲线滑向汇聚点并三段式加速缩小被吸进去强调色数据包全程沿路径滑行吞并完成后曲线反向擦除只留圆形徽标与逐词加深字幕。本文以该镜头卡文档为主体结合 BezierSourceConvergeMerge.tsx 参考实现 的源码级证据完整拆解其路径几何、时间轴编排、参数表与已知坑帮助你把它直接复用到多源整合 / 统一接入 / 数据汇聚类产品的宣传镜头中或作为模板改出属于自己的汇聚动效。镜头卡定位与适用场景这张卡在仓库里归属ui-entranceUI 入场类别gallery/api/library.json 中收录为 157 张镜头卡之一并配有gallery/media/bezier-source-converge-merge.mp4的 214 个 motion 预览之一。它的官方定位是适用多源整合 / 统一接入 / 数据汇聚的核心机制镜头集成、聚合、单一入口类产品的说明段落。时长约 5.6s168f 30fps导出常量即BEZIER_SOURCE_CONVERGE_MERGE_DURATION 168。能量中长镜慢速推进靠数据包滑行维持活性吞并瞬间是唯一小高点。也就是说当你的产品页面要说我们把四个来源统一了、所有渠道接入同一个入口时与其放一句抽象文案不如用这张卡把过程演出来——这正是该镜头卡的设计哲学。动效意图把抽象话变成可看的物理过程镜头卡文档在意图一节把这段动效拆成三段叙事每段有明确的起止观众不需要旁白就能读出因果先建立通路四条独立曲线的 draw-on 是连上了——四个来源分别与汇聚点产生连接关系再让来源走进同一个点节点沿自己的曲线滑向汇聚点、缩小到 0是被吞并——来源真的被吸收进去了最后擦掉通路只留徽标曲线从左端反向擦除、只剩汇聚徽标与字幕读作现在只有一个。这一意图在源码里也有对应的三段式收束注释见 BezierSourceConvergeMerge.tsx 顶部注释曲线先由左向右 draw-on节点沿自己的曲线滑向汇聚点并三段式加速缩小像被吸进去强调色数据包小圆持续沿路径滑行吞并完成后曲线从左端反向擦除只留圆形徽标 逐词加深字幕。动效核心拆解路径几何一条直线段 一段三次贝塞尔每条路径的d属性固定为M -22,y L 74,y C 186,y 214,120 332,120起点在画框外x -22依赖 SVGoverflow: visible才能露出画框外的一截x 74处是来源节点的驻留位draw-on 完成后、滑动开始前节点停的位置之后一段三次贝塞尔曲线弯向汇聚点(332, 120)四条路径只差起始y36 / 92 / 148 / 204间距 56所以它们的曲率天然不同汇入角度也不同。源码中 SRCS 常量 以中性灰阶分层定义四路S1#111111、S2#4A4A50、S3#7A7A82、S4#A3A3AA灰度仅用于区分来源不参与语义。draw-on用 stroke-dasharray / dashoffset 模拟接通曲线绘制采用 SVG 虚线技巧stroke-dasharray len stroke-dashoffset len * (1 - draw) draw seg(t, 0.04 i * 0.045, 0.04 i * 0.045 0.17, E.outQuad)len是路径全长直线段定长 96 曲线段弧长源码中由mkPathGeom预计算draw从 0 走到 1 时dashoffset从len归零虚线视觉上表现为由左向右刷出0.045的错峰让四条线像被依次接通而不是一起亮约 7 帧间隔缓动用E.outQuad见 demos/_fixtures/Motion.tsx 的缓动表起笔快、收笔慢符合连线的手感。节点定位沿真实曲线走而不是两点间插值这是整张卡最值得借鉴的技术点。节点位置不是起点到汇聚点的直线插值而是沿真实贝塞尔曲线移动先在prime 阶段以 40 步线性扫描求出路径上x ≈ 74节点驻留位对应的路径比例f0运行时frac f0 (1 - f0) * conv其中conv seg(t, 0.34, 0.74, E.inOutCubic)是汇聚主进度用getPointAtLength(len * frac)反查路径上的实际坐标。值得注意的是文档中该定位依赖 SVG 的getTotalLength/getPointAtLength而参考实现做了进一步加固——为避免 Remotion 首帧渲染时 SVG 尚未挂载布局拿不到长度文档已知坑第一条源码在 mkPathGeom 里用纯数学替代了 DOM API把三次贝塞尔段离散成 1600 段折线建累积弧长表误差远低于 0.01px再用二分反查弧长 → 参数 u。这是纯模块级预计算无 DOM 依赖完全满足 Remotion 逐帧确定性渲染的要求也就彻底规避了首帧错位跳变。三段式缩小44 → 15 → 0被吸进去的加速感节点尺寸不是线性缩小而是分两段tt 0.75 时size lerp(tt / 0.75, 44, 15) // 前 75% 行程缓慢瘦身 tt ≥ 0.75 时size lerp((tt - 0.75) / 0.25, 15, 0) // 后 25% 行程掉光后段的尺寸变化率是前段的 4 倍多这就是被吸进去的加速感。配套细节字号跟着size * 0.26同步缩下限 4px标签不会脱离节点节点 opacity 在conv 0.92后才开始淡出(1 - tt) / 0.08而conv在t 0.74就到 1所以节点是尺寸缩到 0 时消失而不是淡出消失——这是有意的被吸进去不该淡出。数据包整数周期 相位偏移 中段最亮强调色小圆7px、#3B82F6描边 淡色填充沿路径持续滑行给长镜慢速推进提供活性pkCycle (seg(t, 0.1, 0.74, E.linear) * 2) % 1走两个整数周期——必须是整数周期否则末帧包停在半路各路加i * 0.13相位偏移错开四路的包避免它们排成一行同时汇入透明度用1 - |cycle - 0.5| * 0.6让包在路径中段最亮、两端淡——避免看到包在起点凭空出现数据包整体由pkOn seg(t, 0.1, 0.16) * (1 - seg(t, 0.7, 0.76))控制启停。擦除dashoffset 取负从起点方向反向退走吞并完成后erase seg(t, 0.78, 0.9, E.outQuad)把 dashoffset 推成负值-erase * lenoff erase 0 ? -erase * len : len * (1 - draw)由于 dashoffset 为负虚线从起点方向退走方向与 draw-on 相反读作通路收回。同时路径 opacity 在(erase - 0.85) / 0.15区间内淡出保证擦除收尾干净。徽标与字幕吞并时刻的接收脉冲汇聚点(332, 120)处是白底圆形徽标内含四角星占位标记BADGE_SIZE 34入场seg(t, 0.16, 0.26, E.outCubic)淡入并从 scale 0.7 放到 1吞并瞬间t 0.7 → 0.78用E.outBack顶起 12%再在 0.78 → 0.86 用E.outQuad减回——这是一次接收到了的脉冲量级 12% 是刻意控制的25% 会抢过汇聚本身的注意力末尾字幕 Four sources unified 在t 0.84后淡入且采用逐词加深语法CAP_WORDS.split( )每个词按capInn进度从浅灰#C9C9CE插值到黑#111111字距随加深收紧整行透明度随capShow淡入。参数表完整继承 源码印证镜头卡文档给出的参数表是全卡调参的核心逐行都能在源码中找到对应实现参数典型值调节手感来源数4 条y36/92/148/204间距 564 条是曲率差异明显又不打结的甜点6 条中间几条的贝塞尔几乎重合汇入角读不出区别draw-on起点0.04i*0.045窗 0.17outQuad0.045 的错峰约 7f归零会读作四条线一起刷出失去逐路接通的语义汇聚窗0.34→0.74inOutCubic占全片 40%是主段落inOut 的缓起是启动、缓收是到位换 linear 立刻变成匀速传送带三段缩小44→15px前 75%→ 0后 25%拐点 0.75 越靠后吸入越突然把它挪到 0.5 会变成一路缩小吞并的那一下就没了数据包周期2 个整数周期0.1→0.74 线性必须是整数周期否则末帧包停在半路周期加密到 4 会读作数据流很急也更容易和节点重叠包相位偏移i*0.13错开四路的包避免它们排成一行同时汇入0 会看到四个包整齐并进像一次发车擦除0.78→0.9dashoffset 取负12f 完成擦除必须在节点全部消失conv0.74 结束、节点 0.92 前淡完之后否则线先没了节点悬在空中徽标脉冲outBack 12%0.7→0.78→ 回落0.78→0.8612% 是接收到了的量级25% 会抢过汇聚本身的注意力补充两条源码级的关联事实seg/lerp/E缓动表 /useT都来自 demos/_fixtures/Motion.tsx其中useT()把当前帧映射到全片归一化进度t ∈ [0,1]末帧恰为 1与样片渲染逐帧一致——所以上表的0.04 / 0.34 / 0.74等时间点全部是归一化比例换帧率或换分辨率时数值不需要改动。已知坑与规避方案镜头卡文档的已知坑一节全部值得落地前仔细阅读这里逐条保留并补充源码证据getTotalLength/getPointAtLength必须在 SVG 已挂到文档且完成布局之后才有效。文档记载 motion-lab 原实现用ready标志在首帧prime()里做移植到 Remotion 时首帧渲染可能拿不到长度fallback 写了|| 380稳妥做法是在useEffect/layout 后再算或预先算好常量表否则首帧会出现一次错位跳变。参考实现正是采用了预先算好常量表路线1600 段折线弧长表 二分反查模块级预计算、无 DOM 依赖彻底规避了该问题。f0精度只有 1/40f0是 40 步线性扫描找出的x 首次 ≥74的比例源码第 79–83 行初始值f0 0.2逐步上探。曲线形状改动大时节点驻留位会偏离 74看起来没停在该停的地方——改路径后要提高扫描步数或直接标定。节点是缩到 0 消失而非淡出节点 opacity 在conv 0.92后才开始淡出而 conv 在 t0.74 就到 1所以节点是尺寸缩到 0 时消失。这是有意的被吸进去不该淡出但如果把三段式拐点改晚会看到节点在有尺寸时突然消失。节点是中性灰阶占位圆落地要换真实来源 logo强调色只留给数据包与徽标不要给节点上色否则汇聚点的视觉主体被夺走。坐标是绑定的一组汇聚点(332,120)与 SVG 视口440×240、overflow: visible绑定。改画布比例要整套重标路径起点-22依赖overflow: visible才能露出画框外的一截。此外外层用DesignStage的 480×270 设计坐标等比放大见 demos/README.md卡片参数表数值都在该坐标系下标定改合成分辨率不需要动参数。字幕是占位文案Four sources unified 出现在 0.84 之后。如果要配旁白这句的出现点应对齐旁白落词而非动画节点。参考实现与复用方式参考实现位于 demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx属于 2026-08 并入的 48 张 Motion 系 demo手法研究自公开发布的产品宣传片全部从零重写、去品牌化、占位化来源溯源见 references/shots/ATTRIBUTION.md。复用步骤与这批卡的通用约定一致详见 demos/README.md把BezierSourceConvergeMerge.tsxcopy 进你的 Remotion 项目同时带上 demos/_fixtures/Motion.tsxE 缓动表 / seg / lerp / rand / useT / DesignStage并修正 import 路径以 30fps / 1920×1080 注册 Composition直接用导出的时长常量import { BezierSourceConvergeMerge, BEZIER_SOURCE_CONVERGE_MERGE_DURATION } from ./bezier-source-converge-merge/BezierSourceConvergeMerge; Composition idBezierSourceConvergeMerge component{BezierSourceConvergeMerge} durationInFrames{BEZIER_SOURCE_CONVERGE_MERGE_DURATION} // 168 fps{30} width{1920} height{1080} /落地产物时把S1–S4占位圆换成真实来源 logo把徽标四角星换成产品标识字幕换成真实文案并对齐旁白落词其余时间轴与参数可直接沿用。小结bezier-source-converge-merge的价值在于它把多源整合这一抽象语义完整翻译成了一组可调参的物理过程draw-on 建立通路、沿真实曲线滑入、三段式加速缩小、整数周期数据包维持活性、反向擦除收束成单一徽标。其核心技法——用stroke-dasharray/dashoffset实现双向绘制、用弧长表 二分反查替代 DOM 依赖的getPointAtLength、用两段缓动拼出吸入加速感——都不依赖特定业务可以在 video-shotcraft 的其他镜头卡与你的 Remotion 工程中自由复用。赞分享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 动效卡拆解用贝塞尔曲线贝塞尔汇流实现多源统一的产品镜头video shotcraft 动效卡拆解用贝塞尔曲线贝塞尔汇流实现多源统一的产品镜头 本文以 video shotcraft 仓库中的动效卡 bezieAI 技能媒体生成视频video-shotcraft 镜头卡深度解析AvatarBracketCarousel 对焦框头像轮换动效的实现与调参指南video shotcraft 镜头卡深度解析AvatarBracketCarousel 对焦框头像轮换动效的实现与调参指南 本篇技术指南以 video shAI 技能媒体生成视频video-shotcraft 里程表数字滚动动效卡odometer-digit-roll 的实现原理与调校实战video shotcraft 里程表数字滚动动效卡odometer digit roll 的实现原理与调校实战 在 video shotcraft 这个 RAI 技能媒体生成视频上一篇MCP-Security-ChecklistAI插件安全终极指南 - 10个关键防护要点下一篇FreqAI 数据管道拆解一条K线如何变成模型输入创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
