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点击查看免费下载导读线条接力横移转场line-carry-transition是 video-shotcraft 转场卡库中一张标签为camera的招牌转场卡场景 A 的进度条走满后延伸出一条墨线冲出画面镜头跟着线横移 1920px 进入新世界线在移动中拐直角围出场景 B 的卡框框闭合、内容淡入——全程没有任何剪切点。本文基于 gallery/source/line-carry-transition.md 展开结合其参考实现 LineCarryTransition.tsx逐帧拆解动效原理、参数调校手感与已知坑并对照仓库内的 draw-svg-trace 卡说明两种线条动画的语义边界。读完你可以直接理解并复刻这一转场将其接入自己的 Remotion 项目中。一、转场意图根本不换一条线牵着你走过去video-shotcraft 的转场库按场景怎么换分成三大族——穿越、藏切、体块。线条接力转场的回答完全不同根本不换——一条线牵着你走过去。进度条走满后其末端延伸成长线冲出卡缘镜头跟着线横移 1920px 进入新世界线在移动中拐直角围出场景 B 的卡框框闭合、内容淡入。从头到尾观众的眼睛没离开过这条线图形连续性本身就是转场。它与 match-cut 的关键区别在于match-cut 是切点两侧形状对位——终究还是切而本卡是连续绘制——没有切。文档特别强调线的身份必须有叙事逻辑——因为进度条走完了所以它延伸出去是合理的自然动作无来由的线只是装饰。这正是该转场最容易被新手做错的地方凭空起一条线观众读作屏保而非转场。适用场景来自文档两个有图形亲缘的场景之间进度条→卡框、下划线→图表轴一支片子的招牌转场位即《Catch Me If You Can》片头式的图形接力。二、总时长与能量定位属性值时长~5.3s进度条走满 横移 60f 围框 内容淡入 静止 36f能量中标签camera从时间轴结构看LineCarryTransition.tsx 将整段动画分成四个接力段0–24f场景 A 卡底部的 6px ink 进度条走满560pxEasing.out(cubic)24–34f进度条末端延伸成横线冲出卡右缘drawn 从 560 到 110034–94f镜头整体左移 1920pxEasing.inOut(cubic)60f线与镜头同速延伸94–112f线拐直角围出 560×330 的卡框并闭合112–124f框闭合后 B 卡内容淡入 12f124–160f真静止 36f≥35f满足仓库 R 系判例。帧确定、无随机整体可预测可复现。三、动效核心世界容器当镜头 一条全程 evolve 的折线3.1 镜头 3840 宽世界容器的 translateX实现上镜头跟线横移并不是真的移动相机而是把 A、B 两个场景并排放进一个 3840px 宽的世界容器再对容器施加translateX(-cam)const cam interpolate(frame, [34, 94], [0, 1920], { easing: Easing.inOut(Easing.cubic), extrapolateLeft: clamp, extrapolateRight: clamp, });世界宽 3840 场景 A左半 1920 场景 B右半 192034–94f 移 1920px即32px/f的匀速节奏套Easing.inOut(cubic)起收有呼吸场景 B 半世界的底色略浅G.panel用于卖出新世界的视觉层级。3.2 一条折线 path全程 dasharray/dashoffset evolve线的本体是一条手写折线 path总长 3980pxM 400 705 L 2600 705 L 2600 375 L 3160 375 L 3160 705 L 2600 705拆成五段SEGS 数组段起点 → 终点长度语义1(400,705) → (2600,705)2200进度条 560 冲出段 16402(2600,705) → (2600,375)330直角上拐3(2600,375) → (3160,375)560框顶边4(3160,375) → (3160,705)330直角下拐5(3160,705) → (2600,705)560框底边回程闭合path 渲染时设strokeDasharray{TOTAL}与strokeDashoffset{TOTAL - drawn}通过分段驱动drawn长度实现一条 path 全程 evolve。五段长度合计 2200330560330560 3980与 TOTAL 常量一致。3.3 命门横移段 drawn 1100 cam——笔头钉在画面偏右这是整个转场最关键的调校点源码第 61 行直接写成drawn 1100 cam; // 与镜头同速延伸笔头稳在画面偏右含义在 34–94f 的横移段线的生长速度与镜头位移速度严格相等。笔头位置因此钉在画面 x≈1500约 78% 处偏右永不出画也永不落后。一旦失速线长太快或太慢观众跟丢线就等于跟丢了转场——这是文档明确标注的命门。笔头用tipAt(drawn)函数按已画长度沿折线取点对 SEGS 逐段扣除长度求插值 t保证笔头永远精确落在当前线的末端。3.4 笔头墨点与收尾静止笔头是一个 r11 的墨点circle全程随笔走框闭合后 112–118f 线性消散interpolate(frame, [112, 118], [1, 0])118f 起条件卸载const tipMounted frame 118——即从 DOM 中彻底移除墨点节点这是文档摘罩判例的落地如果笔头残留画面124–160f 的真静止就被破坏了。类似地B 内容不提前抢戏contentOpacity从 112f框闭合帧才开始 0→1 淡入到 124f 完成随后是 36f 无任何变化、无任何残留元素的真静止。四、参数表六项手感调校文档给出了六个核心参数的典型值与调节手感这是实战调校的直接依据参数典型值调节手感线体6px ink 实线太细横移中读丢虚线读作未完成态横移配比1920px / 60f32px/f更远的横移等比拉长时长别提速——40px/f 笔头开始拖影跟丢笔头位置画面 x≈1500约 78% 处偏右居中读作线追镜头贴边一颤就出画拐角直角硬拐不倒圆圆角软拐丢掉制图感Saul Bass 味就没了框闭合闭合帧起 B 内容再淡入框没闭合内容先出线的悬念白搭收尾淡入完 ≥36f 真静止笔头墨点必须条件卸载残留即毁静止补充说明线体 6px ink 实线对应源码strokeWidth{6}、stroke{G.ink}其中G.ink #2f2f2f定义在 demos/_fixtures/Fixtures.tsx拐角硬拐由 path 的直角转折天然实现配合strokeLinejoinround只做线头圆角处理不引入圆角轨迹横移速率上限 40px/f是一个实测警戒值超过后笔头开始拖影跟丢读者应从 32px/f 起步按需等比拉长时长。五、源码级实现拆解逐段对照参考实现位于 demos/transition/line-carry-transition/LineCarryTransition.tsx完整可运行。以下按代码结构拆解1. 世界几何与分段L12-L23PATH 常量 SEGS 五段数组 TOTAL3980几何数据与文档描述完全一致。2. 笔头取点函数 tipAtL26-L36按 drawn 长度沿折线逐段插值超出 TOTAL 时钳制在闭合点 (2600,705)。3. 镜头与 drawn 的四段接力L41-L680–24f 进度条、24–34f 冲出、34–94f 与镜头同速drawn 1100 cam、94–112f 收框drawn 从 3020 到 TOTALout cubic。4. B 内容与墨点生命周期L70-L82内容 112–124f 淡入墨点 112–118f 消散、118f 起条件卸载。5. 渲染L84-L150外层AbsoluteFill灰底世界容器translateX(-cam)B 半世界铺G.panel浅底A 场景为 TitleBlock Card 进度条轨道SVG path 一条线全程 evolve墨点条件渲染B 场景的卡框区域2600,375–3160,705由线画成内部是 Fixtures 风格的四行骨架 头像行随 contentOpacity 淡入。其中G、Card、TitleBlock均来自 demos/_fixtures/Fixtures.tsx——该文件是孵化轮标准占位素材包提供灰阶卡片组、假 dashboard 面板与标题字块demo 只求把运动演清楚。六、与 draw-svg-trace 的关系元素级 vs 场景级文档专门划清了本卡与库内另一张线动画卡 draw-svg-trace 的边界draw-svg-trace 是元素级描边点名一条带笔头的墨线沿单个元素的轮廓跑一圈把它画出来线属于元素是接下来讲它的点名时刻line-carry-transition 是场景级线条接力线属于镜头承载着从一个场景走到另一个场景的转场职责。两者同片可共存但线的语义必须一致同为 ink 6px 手绘感或同为几何硬线。混用两种线风会读作两套美术。此外 draw-svg-trace 的免测周长技巧pathLength{1} dasharray/dashoffset 1→0与本卡的手写折线分段 evolve 是两种不同的描边驱动方式恰好互为参照。七、已知坑清单实战避雷demo 在灰阶/占位素材上调校通过——参数是调校起点而非实战定稿首次实战必须以真实素材回验与 draw-svg-trace 的线风语义同片共存时线体风格必须一致混用读作两套美术全片 ≤1 次这是招牌转场不是常规转场第二次出现魔法就穿帮起点必须是已有图形构件的自然延伸进度条走满、下划线画完凭空起线读作屏保声音设计线生长配一声持续笔擦笔擦类素材如 sound-design.md 提到的text/write-blackboard可按笔画时长截取、框闭合配一声轻叩钉帧规则见 sound-design §4.5。关于第 5 点的钉帧硬规则references/sound-design.md 明确SFX 钉帧一律写SHOTS.shot.from offset相对 shot 起点绝不写裸数字帧号——这样镜头内部节拍不变时调整前面镜头时长只需分镜表更新一处SFX 自动跟随。本卡约 5.3s 的绝对帧号0–160f在接入分镜表时也应换算为相对起点偏移。文档还提到音画对齐需补偿两项偏移音源峰值滞后 输出音轨 encoder priming 偏移这也是接入实战时的隐含成本。八、如何在本仓库中查看与复用卡文档gallery/source/line-carry-transition.md本文主体依据参考实现LineCarryTransition.tsx完整可运行帧确定、无随机素材依赖demos/_fixtures/Fixtures.tsx灰阶占位素材包G 色板、Card、TitleBlock同族对照draw-svg-trace.md元素级描边点名语义边界参照声音钉帧规则sound-design.md§4.4 返工教训、§4.5 相对钉帧硬规则、§4.6 音画对齐偏移。如需接入自己的 Remotion 项目可参照template/下的工程结构template/package.json、template/remotion.config.ts将 LineCarryTransition.tsx 作为独立 Composition 引入替换其中的 A/B 场景占位内容TitleBlock、Card、骨架行为真实素材并严格按第六节参数表回验线体、横移配比、笔头位置与收尾静止。九、总结线条接力横移转场回答的是转场库三大族都绕不开的问题——场景怎么换而它的答案是反直觉的不换。通过 3840 宽世界容器平移当镜头、一条 3980px 折线全程 dasharray/dashoffset evolve、以及横移段 drawn 1100 cam这一命门公式实现了笔头永远钉在画面 78% 处的连续绘制。它是一张全片最多出现一次的招牌转场其成败取决于线的叙事身份、镜头与线生长严格同速、以及框闭合后 ≥36f 的真静止。理解它的实现与调校逻辑等于掌握了无剪切图形接力转场的完整方法论。赞分享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点击查看免费下载相关推荐Remotion 场景转场完全指南基于 TransitionSeries 打造专业无缝画面切换Prompt to Motion Graphics 实战Remotion 场景转场完全指南基于 TransitionSeries 打造专业无缝画面切换Prompt to Motion Graphics 实战 导音视频AI 应用前端video-shotcraft「冲白降维」转场卡用 Remotion 实现一次闪白完成液态字标到扁平 Logo 的质感切换video shotcraft「冲白降维」转场卡用 Remotion 实现一次闪白完成液态字标到扁平 Logo 的质感切换 本文以 video shotcraAI 技能媒体生成视频video-shotcraft 几何擦除转场实战clock-wipe 时钟扫描与 blinds-slice 百叶窗切条的完整实现解析video shotcraft 几何擦除转场实战clock wipe 时钟扫描与 blinds slice 百叶窗切条的完整实现解析 本篇以 video shAI 技能媒体生成视频上一篇Windows实时语音转文字终极指南TMSpeech离线字幕工具完全解析下一篇UnrealPakViewer虚幻引擎Pak文件分析的终极解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考