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 仓库中的avatar-bracket-carousel镜头卡references/shots/ui-entrance/avatar-bracket-carousel.md为骨架拆解一句承诺加四次证明的对焦框头像轮换动效从连续位置量pos的 spring 累加、距离驱动的缩放/透明度/模糊/位移四属性同步到参数表的每个数值手感与六条已知坑。读完你不仅能完整还原这张 5.2 秒镜头还能在真实产品落地时独立调整节拍、步距与衰减斜率而不破坏其锁定同一位置的语义。卡片定位把一个位置多种角色拍成一句话镜头这张卡的核心意图很清晰把能力枚举从清单变成承诺加证明。文档原文说我们有设计师、客服、分析师、写手列成四行就是一张清单。塞进一句话的一个槽位里它变成一个承诺加四次证明句子不动只有槽里的人在换。也就是说文案骨架是 Your ___ teammates 这类填空排版——句子本身不参与任何动画只有槽位里的头像在轮换。四角对焦框bracket是这个手法的关键它不参与轮换但它把观众的眼睛钉死在那 92×92 的方框里所以四次更换才被读作同一个位置而不是四张头像飘过。对焦框的锁定语义正是全片的叙事支点。卡片的元信息卡片 front-matter完整如下作为后续所有参数标定的基准元信息字段值一句话Your ___ teammates 填空排版四角对焦框钉在句中不动头像队列在框内垂直 spring 轮换三次入框放大清晰、出框按距离缩小淡化模糊角色标签同步更换切换瞬间对焦框呼吸 7%适用一个位置多种角色的能力枚举团队/身份/预设/人格类产品的核心一句话镜头时长约 5.2s156f 30fps能量中三次等距切换构成稳定节拍器对焦框脉冲是唯一装饰性动作这张卡在仓库中有三处落点可以相互印证定稿卡片文档references/shots/ui-entrance/avatar-bracket-carousel.mdGallery 数据源 gallery/source/avatar-bracket-carousel.md 与之内容一致原生 Remotion 参考实现demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsxworkbench 内的 workbench/demosrc/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx 是同一实现的副本共享动效原语demos/_fixtures/Motion.tsx提供E缓动表、seg分段进度、useT归一化时间与DesignStage设计坐标容器。动效核心连续位置量pos与距离驱动一切整个动效只有两个内部状态其余全部由它们推导没有任何逐帧手排的时间轴。1. 位置量pos三段 spring 的累加而不是索引跳变let pos 0; SWITCHES.forEach((s0) { pos seg(t, s0, s0 0.14, (k) E.spring(k, 0.25)); });其中SWITCHES [0.24, 0.46, 0.68]seg把归一化时间t在[s0, s00.14]窗口内归一化后过缓动函数并钳位demos/_fixtures/Motion.tsx 中定义ease(Math.min(1, Math.max(0, (t - t0) / (t1 - t0))))。E.spring(k, 0.25)是仓库缓动表内置的阻尼弹簧spring: (t: number, bounce 0.25) { const w 8 8 * (1 - bounce); return 1 - Math.exp(-6 * t) * Math.cos(w * t * bounce * 2.2); },关键点在于pos是连续量而非离散索引。它从 0 起步经过三次各 0.14 的 spring 行程依次推进到 1、2、3因此任意时刻都能算出每个头像距离槽位有多远——这就是后面所有属性同步的基础。2. 距离驱动一切四个属性同源于一个d对第k张头像先求距离d |k - pos|然后四个属性一次算齐const d Math.abs(k - pos); const sc Math.max(0.5, 1 - d * 0.38); const op Math.max(0, 1 - d * 0.62);渲染时transform: translateY(${(k - pos) * STEP}px) scale(${sc}), opacity: op * seg(t, 0.02 k * 0.03, 0.12 k * 0.03), filter: blur(${Math.min(3, d * 2.4)}px),对应文档公式scale max(0.5, 1 - d*0.38)opacity max(0, 1 - d*0.62)blur min(3, d*2.4)translateY (k - pos) * 76因为入框/出框的缩放、透明、模糊、位移全部由一个距离量导出四者的变化天然同步不需要单独为每个属性排时间轴。这是本卡最值得抄走的设计用连续标量驱动多元属性比给每个属性各画一段关键帧更稳健、更好调。3. 队列叠放0×0 锚点上的绝对定位四张头像全部绝对定位在槽位中心缩成的 0×0 锚点上叠放left: 50%, top: 50%, width: 0, height: 0每张再以left: -29, top: -29自居中头像 58px 直径垂直位移全靠(k - pos) * STEP。框外的头像照样在渲染只是被 opacity 与 blur 藏掉——这意味着出框不是销毁元素而是同一队列在连续位置上的不同投影轮换过程里帧与帧之间不会有任何跳变。4. 入场层叠在轮换之上的独立一层入场是另一段与距离无关的透明度渐变按索引错峰建立队列opacity: op * seg(t, 0.02 k * 0.03, 0.12 k * 0.03),四张按 0.03 的时间偏移在开场约 0.15 内依次淡入到位此后这一项恒为 1轮换逻辑全权接管。把建立队列与轮换分成两个独立时间层是这张卡在时间轴组织上的第二个可复用手法。5. 角色标签共享pos但衰减更陡标签Designer / Support / Analyst / Writer固定在对焦框下方translate(-50%, 64px)位置完全不动只随对焦位置换透明度opacity: Math.max(0, 1 - Math.abs(k - pos) * 2.2),衰减斜率 2.2 比头像的 0.62 陡得多——标签在 0.45 格距离外就完全消失永远不会出现两个标签同屏半透明叠着的状态。这是文字与图像的本质差异文字是读的两句同时半透明最难读所以标签必须用近乎硬切的衰减。6. 对焦框呼吸正弦包络在切换正中达峰let breath 0; SWITCHES.forEach((s0) { breath Math.sin(seg(t, s0, s0 0.1) * Math.PI); }); // 渲染时 transform: scale(${1 Math.min(1, breath) * 0.07}),sin(seg(·) * π)的波形天然是从 0 升到峰再回到 0的完整包络取min(1, breath)防止三次脉冲叠加超过 1乘 0.07 加到 scale 上。效果是每次切换动作的正中对焦框咬合一下放大 7% 再归零作为唯一的装饰性动作与头像换位精确对齐。呼吸走完归零因此画面静置期对焦框尺寸完全稳定不抢槽位不动的主体语义。参数表每个数值的调节手感文档给出了完整的参数表这是本卡实战调参的第一手依据逐项说明如下所有数值均在 480×270 设计坐标系下标定见 demos/README.md参数典型值调节手感切换点0.24 / 0.46 / 0.68间隔 0.22≈34f / 1.14s间隔就是读得完一个角色的时长0.12 观众来不及看标签0.3 节拍器感散掉切换行程窗 0.14≈22fE.spring(k, 0.25)行程占间隔的 64% → 静置时间约 12f阻尼 0.25 是明确一次回弹调小会抖两下与相邻切换互相干扰步距STEP76px框 92px、头像 58px步距必须大于头像直径否则相邻两张会咬边76/92 意味着出框的头像仍露出一角队列的存在被暗示缩放衰减1 - d*0.38下限 0.5一格距离缩到 0.62斜率调大出框更决绝但下限 0.5 会更早触顶队列变成两档尺寸透明度衰减1 - d*0.621.6 格距离外完全消失 → 画面里始终有约 3 张可见斜率降到 0.3 会看到整列四张都在取景框的锁定语义被削弱模糊衰减d*2.4上限 3px模糊是景深暗示2.4 的斜率让邻位约 2.4px4px 邻位糊成色块队列读不出是头像标签衰减1 - d*2.2斜率必须显著大于头像的 0.62——标签是文字两句同时半透明叠着最难读框脉冲窗 0.1sin(·π)× 0.077% 是咬合了一下的量15% 框自己变成主角抢过头像更换把这张表和源码 AvatarBracketCarousel.tsx 对着看几个数值的换算关系一目了然时长核对156f 30fps 5.2s切换间隔 0.22 × 156 ≈ 34f ≈ 1.14s行程 0.14 × 156 ≈ 22f占间隔 0.22 的约 64%剩余静置约 12f步距几何头像直径 58px步距 76px 58px 所以相邻不咬边76/92 ≈ 0.83意味着出框头像在对焦框内仍露出一角用露角暗示队列继续存在而不是彻底消失衰减协同0.62 的透明度斜率让 1.6 格外的头像完全消失与 0.38 的缩放斜率、2.4 的模糊斜率叠加后画面任意时刻稳定可见约 3 张头像——这正是取景框锁定与队列存在感的平衡点。已知坑这张卡最容易翻车的地方文档明确列了六条已知坑直接决定了你改卡时不能动哪些地方四张头像对应三次切换pos最终停在 3正好是末位。加第五张必须加第四次切换且末次切换要在 0.86 之前结束才有静置时间否则队列末尾永远进不了框。切换点数组出现两处SWITCHES硬编码数组同时用于pos累加与breath累加。改节拍必须同步改两处漏改一处会出现框脉冲和头像换位错开源码中两处SWITCHES.forEach是同一数组引用天然同步但如果你复制后各自改写就要小心。入场 stagger 与首次切换的间隔只有 0.09入场末约 0.15到首次切换0.24之间很紧。加头像数会推后入场结束点公式0.12 k*0.035 张以上就要把首次切换往后挪。色彩分工头像是 emoji 中性灰阶底色圆#4a4d59→#828796灰度分层仅用于区分队列项强调色#3b82f6只用在对焦框的四个 SVG 角标上。落地换成真实头像后仍应保持这个分工——头像本身别抢色否则对焦框的锁定语义会被稀释。对焦框 SVG 坐标写死四条角 pathM4,26 L4,4 L26,4等与 92×92 viewBox 是写死的。改框尺寸要整套重标只改容器宽高会让角标缩放失真。中文句子适配原句 Your ___ teammates 用 flex gap:22px 居中槽宽固定 92px句干不因头像更换而重排但换成中文句子时要确认槽两侧的字宽变化不会让槽偏离画面中心。如何在 Remotion 工程中运行这张卡按 demos/README.md 的说明Motion 系 demo2026-08 并入的 48 张卡的用法与普通 demo 一致copy 需要的 .tsx 进你的 Remotion 项目注册成 Composition 即可跑。两个差异点共享依赖是_fixtures/Motion.tsx不是Fixtures.tsx——E缓动表 /seg/lerp/ 确定性rand/useT/DesignStage都在其中。copy demo 时一并带上并改 import 路径画面用DesignStage的 480×270 设计坐标作画、等比放大到合成分辨率卡片参数表的数值都在此坐标系下标定改合成分辨率不需要动参数。DesignStage的rasterzoom模式适合文字密集场景布局期放大小字号字形按目标尺寸光栅化更清晰。每个组件同时export const 卡名大写蛇形_DURATION30fps 帧数注册 Composition 时直接用。本卡导出的是AVATAR_BRACKET_CAROUSEL_DURATION 156import { AvatarBracketCarousel, AVATAR_BRACKET_CAROUSEL_DURATION } from ./avatar-bracket-carousel/AvatarBracketCarousel; import { Composition } from remotion; Composition idAvatarBracketCarousel component{AvatarBracketCarousel} durationInFrames{AVATAR_BRACKET_CAROUSEL_DURATION} fps{30} width{1920} height{1080} /动画全部由归一化时间tuseT()末帧恰为 1驱动计算无真随机逐帧确定性渲染该批 demo 都经过与原样片 mp4 的全帧 SSIM 比对验收。渲染环境注意点无头 Linux 上remotion still/render在低核机器会报--concurrency上限传--concurrency1即可详见 README.md 的 Headless/CI 说明。落地到真实产品换素材、换句子、保持语义把这张卡从 demo 变成产品镜头时文档给出的原则可以总结为三步头像层emoji 灰阶圆替换为真实头像图但保持中性处理可统一加同色系底圆、不引入第二强调色队列的角色集合仍靠灰阶/位置区分强调色ACCENT #3b82f6只在四角对焦框上替换成产品品牌色即可全局换肤文案层保持固定槽位 两侧句干不动的排版策略槽宽按新文案宽度重新标定并对齐对焦框 SVG 的 92×92 坐标确认居中不偏移。最终镜头就是一个稳定的节拍器句子不动、槽位不动、对焦框只在切换瞬间呼吸 7%四次头像轮换把同一个位置的承诺反复证明。这种连续标量驱动多元属性的动效架构也可以平移到其他需要同一位置换内容的产品镜头里复用。赞分享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 动效卡详解AvatarBracketCarousel 对焦框头像轮换的填空排版实现video shotcraft 动效卡详解AvatarBracketCarousel 对焦框头像轮换的填空排版实现 导读 本文以 gallery/sourceAI 技能媒体生成视频video-shotcraft 镜头卡拆解PillSlotCycle 句中词槽轮换的实现原理与调参实战video shotcraft 镜头卡拆解PillSlotCycle 句中词槽轮换的实现原理与调参实战 本篇技术指南围绕 video shotcraft htAI 技能媒体生成视频video-shotcraft 镜头卡实战crash-zoom-punch 急推镜头的动效设计、参数调校与 Remotion 源码拆解video shotcraft 镜头卡实战crash zoom punch 急推镜头的动效设计、参数调校与 Remotion 源码拆解 导读 crash zAI 技能媒体生成视频上一篇一文读懂MARS框架为什么方差 reduction 是大模型训练的关键下一篇SysML v2 系统建模完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考