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 卡片库中canvas-materialize-moves画布物化运动一张卡的两式技法A 式 panel-to-canvas 把面板表格行沿上抛弧线倒出、跨容器变形成画布卡片B 式 diagram-cascade 让一句话 prompt 打字之后级联长出一棵结构树。文章以 gallery/source/canvas-materialize-moves.md 为骨架对照 PanelToCanvasMaterialize.tsx 与 DiagramCascadeBuild.tsx 的源码逐参数拆解读完即可在 Remotion 工程里复刻两套可调参数的完整镜头。这张卡补什么库内生成叙事的第三个动作video-shotcraft 的交互叙事库里此前只有两种AI 生成中的呈现ai-stream-response内容在面板内流式写入证据行逐条汇入面板结论先到、证据随后chart-live-moves数据图表自身活起来——流线、点阵、爆轴。两者都没有覆盖第三种语义内容离开容器、在开放画布上物化成新实体。canvas-materialize-moves正是补这一块的画布是舞台生成物是登台的演员。文档给两式的定位是适用AI/协作工具生成结果落到画布上的叙事段落A 式讲已有内容换了个存在形态B 式讲从一句话长出一棵结构。A 式panel-to-canvas 行倒卡的命门是跨容器形态迁移——同一条内容从行变成卡位置/宽高/圆角/内容布局在一条 spring 上同步插值观众读到是它飞过去变的而不是删一个加一个B 式diagram-cascade 级联生成树的命门是级联时序——线牵出节点、层喂出层结构感来自先后而非同时。时长参考A 式约 4.3s130fB 式约 5.3s160f能量等级中标签归入ui-entrance界面入场运动。两式选型先定叙事再动手式做法适用A panel-to-canvas 行倒卡复选框逐个自动打勾→按钮按下→三行沿上抛弧线错峰飞出途中行形态与卡形态交叉淡化落位带随机倾角面板行槽塌陷成虚线留白批量导入/一键上板内容从列表态迁移为空间态B diagram-cascade 级联生成树prompt 逐字敲出敲完描边变深确认→根深色→2 子→4 孙逐层弹出折角连线描线先行 8f成树后整棵呼吸一拍AI 生成结构图/脑图/ER 图一句话长出一棵树A 式服务批量导入 / 一键上板这类已有内容换形态的镜头B 式服务AI 生成结构图 / 脑图 / ER 图这类从零长出一棵树的镜头。不要把 B 式拿去演一张已经存在的图表那是 chart-live-moves 的职责也不要用 A 式表达复制粘贴那是反语义。A 式 panel-to-canvas跨容器形态迁移的六段时序源码 PanelToCanvasMaterialize.tsx 以面板坐标PANEL_X1210, PANEL_Y90, PANEL_W620, ROW_H92和画布三张卡落位TARGETS [{x:150,y:150,rot:-2},{x:480,y:420,rot:1.5},{x:180,y:660,rot:2}]CARD_W480, CARD_H240为骨架全片分为六段打勾预告、按钮按下、错峰起飞、弧线飞行、形态交叉淡化、落位定倾角。1. 打勾预告12/22/32f逐个 pop复选框不是同帧齐勾而是逐个打勾CHECK_FRAMES [12, 22, 32]每个勾用spring({ damping: 10, stiffness: 260 })做一个轻量 pop代码里体现为scale(0.8 0.2 * checkPop)。文档给的手感说明打勾是预告全删观众不知道要飞谁同帧齐勾读作静态已选。即逐个打勾是在预告即将飞走的对象建立起这三行被选中的因果若同帧齐勾就成了一个静止的已勾选状态丢失了叙事预告。2. 按钮按下46f处按下并回弹BUTTON_FRAME 46。源码用interpolate(frame, [46, 49, 55], [0, 1, 0])产生按压曲线按钮底色G.side → G.ink并以scale(1 - 0.06 * btnPress)做按压缩放同时一个 SVG 光标从画面中部起点 900,560沿Easing.inOut(Easing.quad)移动到按钮中心并停留按下press插值1 → 0.78 → 1。按钮按下是起飞动作的触发器必须比首行起飞54f早一拍。3. 起飞错峰54/60/66f错峰 6f三行不是同帧齐飞而是FLY_START [54, 60, 66]错峰 6f。文档强调同帧齐飞读作复制粘贴错峰 12f 尾行像掉队。同帧齐飞会瞬间清空面板观感是复制粘贴而非依次倒出错峰过大会让尾行显得掉队。6f 是文档给出的调校起点。4. 飞行插值低刚度 spring 加二次贝塞尔弧线飞行进度t spring({ damping: 16, stiffness: 60, durationInFrames: 34 })——注意这是低刚度高阻尼的缓动落在帧上约 34f。位置不走直线而是二次贝塞尔源码以mx (sx tgt.x) / 2; my Math.min(sy, tgt.y) - 170; x (1-u)²·sx 2(1-u)u·mx u²·tgt.x; y (1-u)²·sy 2(1-u)u·my u²·tgt.y;实现中点上抬170px。文档提示直线飞读作平移不读作倒出来中点抬 100px 弧线感消失。上抛弧线是从容器里倒出来的关键视觉线索中点抬升不足 100px 时弧线感消失会退化成平移。5. 形态迁移行 → 卡的尺寸/圆角/内容交叉淡化飞行中同步插值形态宽sw → 480、高sh → 240、圆角10 → 18、阴影0.08 → 0.16随 u 插值倾角tgt.rot * u。两套内容用交叉淡化切换rowOp max(0, 1 - u * 2.2) // 行形态内容u≈0.45 前灭 cardOp max(0, (u - 0.45) / 0.55) // 卡形态内容u0.45 后亮行形态是复选框 单行横条的水平布局卡形态是标题条 两行正文 footer 头像行的纵向布局。文档警告两套内容交叉淡化必须错开——中段两态同显即穿帮。同时因为 spring 有过冲、u 可能短暂 1两处 opacity 都用Math.max(0, ...)clamp 到 [0,1]防止内容透明度越界。6. 落位倾角±2° 随机三张卡落位倾角TARGETS的 rot 为-2 / 1.5 / 2±2° 量级随 idx 固定而非每帧随机。文档说明全正读作网格排版4° 读作散落故障。全部同向全正会读成规整的网格排版、失去散落的手工感超过 4° 则读作散落故障。行槽塌陷虚线留白是不可省的语义行飞走后面板内原位不是消失或留空而是塌陷成虚线留白——源码中flown后行槽变为border: 2px dashed 透明背景 opacity 0.7。文档强调A 式行槽必须塌陷成虚线留白——行飞走后原位完好如初迁移就退化成复制语义全失。虚线留白是对观众说这三行真的从这里迁走了是迁移而非复制语义的兜底。B 式 diagram-cascade一句话长出一棵树的四级节奏源码 DiagramCascadeBuild.tsx 以PROMPT Generate an entity-relationship diagram、树布局NODES1 根 2 子 4 孙NODE_W300, NODE_H110根位于 960,330、两子 620/1300 在 570、四孙在 820为骨架节奏分四段打字确认、级联弹出、连线先行、收尾呼吸。1. 打字确认1.1字符/帧 描边变色打字从TYPE_START 6开始速率TYPE_CPS 1.1字符/帧带闪烁光标frame/8取奇偶控制|显隐。关键在确认态typed PROMPT.length敲完后prompt 条描边从G.border变成G.ink深色。文档解释无确认态则敲完与开始生成之间没有因果扣。描边变深是把打字结束和开始生成根节点弹出扣在一起的因果标志——没有它观众无法把两件事联系起来。2. 级联时序根 52f 起、层间隔 20f、兄弟错峰 6f节点弹出时刻由nodeStart()计算CASCADE_START 52根子层20f、孙层40f同层兄弟再各错峰SIBLING_STAGGER 6根: 52f 子: 52 20 0×6 72f / 52 20 1×6 78f 孙: 52 40 0×6 / 6 / 12 / 18节点入场用spring({ damping: 11, stiffness: 170 })poptransform: scale(pop)。文档手感说明层间隔 12f 读作一次性全出兄弟同帧读作复制。层间隔是层级感的命门小于 12f 时三层层级压缩成一次全出兄弟同帧弹出则读作复制而非生长。根节点用深色G.side、子节点用G.card浅色层级在颜色上再做一层区分。3. 连线先行折角 path 描线比节点早 8f连线不是节点落地后补画而是先于节点生长。源码中每条边edgePath生成父底边中点 → 垂直下探 → 水平 → 垂直进子顶边的折角 path的描线起点为nodeStart(n) - 8早 8f描线时长 16f、Easing.out(Easing.cubic)缓出实现上以strokeDasharray edgeLen、strokeDashoffset edgeLen * (1 - grow)模拟描线生长。文档强调线牵出节点是因果感来源线晚于节点就成了补笔。这条先有线、再有节点的次序是因果感的来源——节点是被线牵出来的反过来线晚于节点就退化成事后补笔。4. 收尾呼吸以树心为原点 scale1 → 1.035 → 1末节点弹出后 22f 起整棵树呼吸一拍interpolate(frame, [lastStart22, lastStart34, lastStart50], [1, 1.035, 1])缓动Easing.inOut(Easing.sin)28f 完成。源码中呼吸缩放放在包裹整棵树的容器上transformOrigin: 960px 620px——这个原点不是画面中心而是树的视觉重心。文档警告B 式呼吸原点必须是树的视觉重心demo 960,620而非画面中心不然读作整屏 zoom。呼吸是成树的句号若原点错放在画面中心整体缩放会被读成整屏 zoom。文档还给出手感阈值1.06读作缩放故障。参数总表一张卡两套可调起点参数典型值调节手感A 打勾12/22/32f 逐个spring(damping 10, stiffness 260) pop打勾是预告全删观众不知道要飞谁同帧齐勾读作静态已选A 起飞错峰按钮 46f 按下三行 54/60/66f 起飞错峰 6f同帧齐飞读作复制粘贴错峰 12f 尾行像掉队A 飞行插值spring(damping 16, stiffness 60, 34f)位置走二次贝塞尔中点上抬 170px直线飞读作平移不读作倒出来中点抬 100px 弧线感消失A 形态迁移行 560×80 → 卡 480×240圆角 10→18rowOp 在 u≈0.45 前灭、cardOp 后亮两套内容交叉淡化必须错开——中段两态同显即穿帮A 落位倾角±2° 随机-2/1.5/2全正读作网格排版4° 读作散落故障B 打字1.1 字符/帧敲完 prompt 条描边 G.border→G.ink 确认无确认态则敲完与开始生成之间没有因果扣B 级联时序根 52f 起层间隔 20f、同层兄弟错峰 6f节点 spring(damping 11, stiffness 170)层间隔 12f 读作一次性全出兄弟同帧读作复制B 连线先行SVG 折角 path父底边→中线→子顶边描线 16f ease-out比子节点早 8f线牵出节点是因果感来源线晚于节点就成了补笔B 收尾呼吸末节点 22f 起以树心为原点 scale 1→1.035→1sin inOut28f呼吸是成树的句号1.06 读作缩放故障注意A 式行 560×80是源码中飞行起点sw620-60560、sh92-1280的折算值与落位CARD_W480, CARD_H240对应。所有参数都是 demo 在灰阶/占位素材上调校通过的起点值首次实战必须用真实素材回验见下文已知坑。已知坑七条调校红线文档记录了七条实战红线的原始条目这里逐条保留demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿首次实战须以真实素材回验。与 ai-stream-response 的分工那卡内容在面板内流式落位结论先到、证据随后本卡内容离开面板上画布同片可串先流式生成→再倒上画布串用时 A 式的打勾段可省——流式完成态即已选。与 chart-live-moves 的分工那卡是数据图表自身的活性流线/点阵/爆轴B 式是结构图的诞生过程——图活着 ≠ 图正在被生成别拿 B 式去演已有图表。A 式行槽必须塌陷成虚线留白——行飞走后原位完好如初迁移就退化成复制语义全失。A 式交叉淡化窗口rowOp 灭于 u≈0.45 前、cardOp 亮于其后是防穿帮的命门spring 有过冲u 可能短暂 1内容 opacity 都要 clamp源码中Math.max(0, ...)即为此而设。B 式呼吸原点必须是树的视觉重心demo 960,620而非画面中心不然读作整屏 zoom。两式的占位素材来源颜色取自 _fixtures/Fixtures.tsx 的灰阶调色板Gbg/panel/line/bar/ink/mid/card/border/side九个语义色demo 只求把运动演清楚、不求页面质感。参考实现与出处A 式PanelToCanvasMaterialize.tsxB 式DiagramCascadeBuild.tsx卡面元数据与英文摘要gallery/api/library.jsoncanvas-materialize-moves条目说明为 Two materialize moves: table rows arc out of a panel and morph into canvas cards, and a typed prompt grows a cascading diagram tree.原片出处miro-promo 84–92sA 式/ 104–116sB 式两式均可在 demos 目录下直接以 Remotion 工程渲染复刻实际产品镜头中A 式适合接在 ai-stream-response 流式段之后作为落板动作B 式适合作为 AI 生成结构图/脑图/ER 图的完整生成叙事。赞分享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 镜头卡实战ring-diagram-annotation-reveal 同心环图解注释揭示动效video shotcraft 镜头卡实战ring diagram annotation reveal 同心环图解注释揭示动效 本篇以 video shotcAI 技能媒体生成视频N_m3u8DL-RE流媒体下载与直播录制一条命令搞定——5 场景实战指南N_m3u8DL RE流媒体下载与直播录制一条命令搞定——5 场景实战指南 在线视频想存一份点下载却只跳出一个 m3u8 或 mpd 链接点开一看满屏分AI 技能媒体生成视频video-shotcraft 动效卡拆解countdown-arc-scatter 表盘扫掠倒计时字卡的 Remotion 实现video shotcraft 动效卡拆解countdown arc scatter 表盘扫掠倒计时字卡的 Remotion 实现 导读countdownAI 技能媒体生成视频上一篇KK_Plugins终极指南解决Illusion游戏插件安装的5大常见问题下一篇手把手用电子课本下载工具粘贴链接到存下 PDF 教材只要 3 步创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考