video-shotcraft 镜头卡拆解：outro-group-photo-launch「全家福合影」发布会收场终镜的实现

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点击查看免费下载导读outro-group-photo-launch全家福合影是 video-shotcraft 仓库中面向outro / 品牌收尾场景的镜头卡全片展示过的每个功能各抽一个代表页面元素从四面八方带旋转飞入、围住居中的产品字标合影再叠加 crane 落机位运镜、舞台光与金尘把整个片子的能量推到最高点收场。这张卡约 4.8 秒145f 30fps在模板片时间线中承担第 ④ 段发布会收场职责。读完本文你将掌握9 元素错峰飞入的 cue 排布与过冲缓动取值、crane 运镜的最小幅度标定、发布会氛围三件套的确定性参数设计以及配套的固定三拍声音句式与复用这份参考实现的具体步骤。卡片定位为什么结尾要拍成发布会卡片 frontmatter 定义了三项核心属性属性值一句话全片元素从四面八方飞来围住字标合影crane 落机位 舞台光 金尘做成发布会收场适用outro / 品牌收尾多功能产品的全家福式终镜时长约 4.8s145f能量峰值全片最高点其设计意图在 gallery/source/outro-group-photo-launch.md 中写得很明确把前面每个功能镜头各抽一个代表元素叫回来合影让字标压轴登场——观众离场前最后记住的是这些东西属于同一个产品。规格必须是发布会级能量推到全片最高。这张卡不是孤立设计的它同时是 promo-energy-arc.md 能量骨架的第 ④ 段发布会收场占比 13–16%、能量峰值、全片最高负责承接第 ③ 段功能爬升段55–65%之后的高点段位表里明确要求已展示功能各出代表元素合影围住字标Q8且sign-off hold ≥1sR1。换句话说这张卡把两条全局规则兑现为可运行实现Q8每个展示过的功能都要有代表元素缺谁观众都会察觉与R1字标落定后 hold 满 1 秒。动效核心五层结构的发布会收场参考实现 OutroGroupPhotoLaunch.tsxOUTRO_GROUP_PHOTO_LAUNCH_DURATION 145把整段收场拆成五层动效全部由当前帧号frame经interpolate驱动逐帧确定性可复现9 个页面元素从四方带旋转飞入落地时弹一记强调色 glow字标 letterpress 逐字登场同时全员退后排让主角rule 长出并射出延长线crane 运镜合影层整体perspective(1400px) rotateX(4°→0) scale(1.06→1)落下之后缓推发布会氛围三件套开场光带扫过、字标背后舞台光、金尘上飘背景页面 blur 化作景深24f 内 0→14px只作用于背景页不糊掉合影元素。9 元素全家福cue 错峰 渲染顺序即层叠顺序源码中 9 个元素用ELS: FlyEl[]表驱动OutroGroupPhotoLaunch.tsxkey纹理文件落点 (cx, cy)scalesettled rot飞入起点 (dx, dy)cue帧navnav.png960, 840.620°0, -1204card4card4-hires.png300, 4000.72-5°-500, 07card1card1.png1630, 3800.684°500, 010paper1paper1.png1460, 7300.50-3°450, 26013card7card7.png260, 8000.603°-400, 30016paper3paper3.png620, 9300.482°0, 32019searchfloat-search.png760, 1800.55-1.5°0, -24022statsfloat-stats.png1560, 9500.90-2°380, 025wbrwbr-full.png1620, 1700.802.5°360, -20028关键排布规则源码// render order cue order, so later arrivals stack on top注释明确标注cue 从 4 起每 3f 一个4/7/10/13/16/19/22/25/28每次飞 12f起点偏移 ±360–500px正好落在参数表给定的±360–500px区间最大 500 来自 card4/card1最小 360 来自 wbr。渲染顺序 cue 顺序即后到者叠在前者上方——这正是合影层叠感的来源nav 最底wbr 最后到、最上层。每个元素的飞行是dx*(1-t)、dy*(1-t)的线性位移但缓动由FLY_EASE决定见下节rot el.rot * (2 - t)实现飞行中 rot×2 → 落定 rot的姿态收束scale el.scale * (1.12 - 0.12*t)实现 ×1.12→1 的落定收缩。wbr 元素走wbrCrop分支不贴整图而是从wbr-full.png上以-576px -173px / 1920px的背景裁剪出文档头一条并加1px solid oklch(90% .008 82)描边。飞入缓动bezier y1 1 才是真过冲飞入缓动是这张卡最被强调的调参教训源码给出了直接证据const FLY_EASE Easing.bezier(0.34, 1.4, 0.44, 1);SceneOutroLive.tsx 中对应注释点名教训旧值bezier(0.25, 0.9, 0.3, 1)never crossed 1即控制点 y 峰值从未超过 1所以没有真正的过冲。要让元素落地时弹一下y1 必须 1——0.34/1.4/0.44/1 中 y11.4 保证了元素先越过落点再回弹。这是调节手感列里唯一有源码级教训注解的参数。飞行姿态的完整表达飞行中 rot×2 → settled rot±5° 内、scale ×1.12→1同时叠加ghost 残影在路径上滞后 8% 的模糊副本blur(8px)、opacity 0.2*max(0,1-linT)仅在linT ∈ (0.05, 0.95)期间显示落地后强调色 glow6fcue12 → cue180.35→0mixBlendMode: multiply的琥珀色径向光斑。空中阴影也随air 1-t收紧飞行中0 36px 70px rgba(30,25,18,0.26)的大软影落定收紧为双层小影。字标 letterpress 与全员退后排字标 AI Foundation Lab 逐字登场LETTERS AI Foundation Lab.split()每字母delay Math.round(42 i * 1.8)飞行 8f缓动Easing.bezier(0.2, 0.75, 0.3, 1)带translateY(28px→0)、scale(1.35→1)、blur(8px→0)的 letterpress 质感字标登场的 42–50f 同时驱动recede退后排全员opacity ×(1-0.12×recede)、saturate(1-0.08×recede)即 opacity −12%、saturate −8%——主角登场配角必须让位否则字标压不住 9 个元素rule 长出58→70fscaleX(0→1)琥珀色模板片oklch(52% 0.115 65)6px 高 260px 宽的底线延长线射出58–66f 从 rule 两端各射出 190px 的 1px 细线width 190*ruleExt66–72f 6f 内淡去——发布会 lower-third 的仪式感字距呼吸62–66fletterSpacing −0.01em → 0.005em字标落定后一次微小的吸气tagline Team Research Consolemono、25px、letterSpacing 0.14em、大写在 68–80f 淡入全片 fadeOutduration-12 → duration由 1→0。crane 运镜4° 就是落机位的最小读感crane 作用于整个合影层字标层在组外不受影响transform: perspective(1400px) rotateX(camTilt) scale(camScale)transformOrigin: 50% 45%craneT interpolate(frame, [0, 40], [0, 1]) // CRANE_EASE bezier(0.3, 0, 0.2, 1) pushT interpolate(frame, [40, duration], [0, 1]) camScale 1.06 - 0.06 * craneT 0.035 * pushT camTilt 4 * (1 - craneT) // rotateX deg前 40f 从rotateX(4°) / scale(1.06)落到水平 0° / 1.0之后0.035缓推。参数表的调节手感明确提示crane 幅度就这么小4°已经够落机位读感大了会晕推测性结论源码按其标定。发布会氛围三件套确定性参数氛围层时间窗关键参数实现开场光带2–14f600px 宽、mixBlendMode: overlay、峰值 opacity 0.12sweepX从 -700 → 2020 横穿opacity 在 [2,5,11,14] → [0,0.12,0.12,0]舞台光42→50→58fopacity 0 → 0.5 → 0.25radial-gradient(700px 360px at 960px 470px, rgba(255,246,228,…))打在字标背后金尘全程上飘20 颗、2–3px、opacity 0.15–0.35DUST数组见下同时 42–54f 有一个极淡的收尾 vignetteradial-gradient(1400px 900px)opacity 0→0.1把视线收拢到中心。金尘的确定性设计是硬规则粒子/光效参数必须确定性派生渲染必须可复现源码 OutroGroupPhotoLaunch.tsx 的DUST全部由索引 i 派生、无任何随机源const DUST Array.from({ length: 20 }, (_, i) ({ x: (i * 439 137) % 1920, // 水平起点 y0: (i * 613 271) % 1080, // 垂直起点 rise: 0.3 (i % 5) * 0.11, // 上飘速度 px/frame swayAmp: 9 (i % 4) * 5, // 横向摆动幅度 swayFreq: 0.022 (i % 3) * 0.008, // 摆动频率 phase: (i * 0.83) % (Math.PI * 2), // 相位 size: 2 (i % 3) * 0.5, // 2–3px opacity: 0.15 ((i * 7) % 5) * 0.05, // 0.15–0.35 }));每帧位置由y (y0 - frame*rise) % 1080环绕循环x d.x sin(frame*swayFreq phase)*swayAmp计算。参数表还记录了经验边界金尘超过 30 颗开始像雪推测性结论20 颗是标定值。背景景深blur 只作用兄弟层背景页projects-full.png通过PageCam2D渲染cx 960, cy 700, zoom 0.750–24fblur 0→14px。源码注释特别解释了分层原因PageCam2D 自闭合飞入元素放在未过滤的兄弟层屏幕空间坐标与 template 版同构——若把合影元素放进 children 会连它们一起糊掉只剩字标清晰。这层之上还叠一块暖色 scrimradial-gradient(1200px 800px at 50% 48%)垫底保持中心可读又不洗掉元素。参数表全览可直接取用参数典型值调节手感元素飞入9 元素 cue 从 4 起每 3f 一个各飞 12f起点偏移 ±360–500px渲染顺序cue 顺序后到者叠上每个已展示过的功能都要有代表元素Q8 自检项缺谁观众都会察觉飞入缓动bezier(0.34,1.4,0.44,1)旧bezier(0.25,0.9,0.3,1)never crossed 1 没有真过冲——落地要弹 y1 必须 1飞行姿态飞行中 rot×2→settled rot±5° 内、scale ×1.12→1ghost 残影滞后 8% blur 8px落地强调色 glow 6f0.35→0multiply落定角度收进 ±5° 内——合影要整齐但不刻板退后排字标登场时 42–50f 全员 opacity −12%、saturate −8%主角登场配角必须让位不让位字标压不住 9 个元素crane 运镜perspective(1400px) rotateX(4°→0) scale(1.06→1)前 40f 落下之后缓推 0.035crane 幅度就这么小4°已经够落机位读感大了会晕推测氛围三件套光带 2–14f600px 宽 overlay 峰值 opacity 0.12舞台光 42→50→58f 0→0.5→0.25金尘 20 颗 2–3px、opacity 0.15–0.35、全参数 index 派生确定性粒子/光效参数必须确定性派生硬规则渲染必须可复现金尘超过 30 颗开始像雪推测字标字母 delay42i·1.8、8frule 58→70f 长出、两端 190px 延长线 8f 射出 6f 淡去字距 62–66f 呼吸背景页 24f 内 blur 0→14落定后 sign-off hold 30f字标落定 hold 满 1 秒R1 定案outro 不加解说 caption 保持干净C1 例外项声音固定三拍句式全片唯一未改动段落outro 的声音是固定三拍句式钉帧全部写死在模板片 SFX 表Main.tsx拍帧全片绝对帧音效volume语义一f945riser-cine.mp30.5上升铺垫铺进合影组装段二f980impact-cine.mp3现等价于impact-deep-whoosh.mp30.55字标 stamp 落地全片 SFX 响度峰值三f1005sparkle.mp30.3rule tagline 的余韵闪光声音设计规范 第 4.3 节把这一句式总结为可复用规律riser-cine组装/铺垫段起→ 约 35f 后 impact主体 stamp 落地全片响度峰值→ 25f 后 sparkle余韵光效并注明这是定稿声音方向确立后唯一从未改动的段落句式S2 判例。两个可直接落地的细节impact-cine.mp3已从assets/audio/删除但新项目复刻时用sfx/impact/impact-deep-whoosh.mp3代替即可——它与原文件字节完全相同md5ce27fd2f是同一个 Mixkit 素材 Cinematic whoosh deep impact模板片照常渲染是因为 Remotion 读的是template/public/audio/的独立副本。三拍的音色分别来自 assets/audio/sfx/riser/1 个上升铺垫与 assets/audio/sfx/light/sparkle 类光效目录属于 S1 词汇表中 riser / impact / sparkle 的对应目录映射。在模板片时间线中的位置模板片AiflMain全片 1085f ≈ 36.2s 30fps中 outro 是最后一个镜头Main.tsxoutro: { from: 940, duration: 145 }, // 31.3–36.2s defocus letterpress sign-off (1s hold)其中duration: 145与 demo 的OUTRO_GROUP_PHOTO_LAUNCH_DURATION 145完全一致sum 1085是十镜总和对应AIFL_TOTAL 1085。SFX 三拍的绝对帧 945/980/1005 正好落在该 Sequence940–1085内部且与动画拍点对齐。模板片 outro 遵循C1 例外项不在 outro 叠加解说 caption对比 Main.tsx 中其余镜头都有CAPTIONS底部字幕条保持收尾画面干净。已知坑与工作流规则初版收尾几乎总是偏保守Q8安静签名式 → 合影 → 发布会三级加码——起稿就按像一个产品发布的规格给足 crane / 舞台光 / 粒子不要先做保守版再层层加码。结构先于特效先有四方飞入合影结构再加码氛围直接堆特效没有骨架。outro tagline 与字标下方文案查重P4 dedupe 判例——同一句话全片只出现一次正文区写过的 tagline 在 outro 必须换掉。hold 规则R1字标落定后 sign-off hold 满 1 秒30f 30fps这是品牌落定的最低停留标准模板片开场与 outro 两处字标时刻都遵守。参考实现与复用方式两条实现路径demo 剥离版OutroGroupPhotoLaunch.tsx —— self-contained写死字标/配色/字号仅依赖 remotion可直接 copy 进项目注册 Composition 跑30fps / 1920×1080时长用导出的OUTRO_GROUP_PHOTO_LAUNCH_DURATION。template 主题化版SceneOutroLive.tsx —— 原版实现通过SCENE_OUTRO_DEFAULTSwordmark/tagline/wordmarkSize/ink/amber/muted与useVisualTheme()主题系统可配置化注意两个主题差异字母 delay 在 ink-press 主题为42i*1.8、其他主题为42i*1.3且 glow / 金尘 / 光带 / 舞台光仅在 ink-press纸墨主题下显示paperStyle开关——模板片即此主题所以全部特效生效。依赖清单来自 demos/README.md共享依赖_fixtures/PageCam2D.tsx2.5D 页面相机与 template 的 PageCam 同款坐标数学self-contained——copy demo 时一并带上并改 import 路径_textures/下的live-layout.json与 9 张页面纹理nav / card4-hires / card1 / paper1 / card7 / paper3 / float-search / float-stats / wbr-full需复制到项目public/textures/live/demo 中的staticFile(textures/live/xxx.png)才能解析验证手段demo 需通过tsc --noEmit --strict严格编译仓库的渲染冒烟脚本 smoke-render-demos.py 会自动扫描带时长导出的 demo 并逐个remotion still渲染首帧可用--subset单独验证本卡。结语outro-group-photo-launch的整套做法——结构先于特效、错峰 cue 排布、真过冲缓动、最小幅度 crane、确定性粒子、固定三拍声音——是发布会级收场的可复用配方。它在仓库内被三处证据闭环锁定卡片文档gallery/source/outro-group-photo-launch.md 与 references/shots/outro/outro-group-photo-launch.md、可运行实现demo 版 template 版、以及时间线与声音表Main.tsx。需要给任何多功能产品片收尾时直接取用这套参数与结构即可。赞分享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点击查看免费下载相关推荐PDF 补丁丁免费使用指南一键合并、批量修书签、无损提图片全程离线不上传PDF 补丁丁免费使用指南一键合并、批量修书签、无损提图片全程离线不上传 手头几份尺寸不一的 PDF 要拼成一份送打印书签层级还乱成一团PDF 补丁丁是AI 技能媒体生成视频Herdr 键盘模式完整指南跟一条操作时间线5 分钟分清 3 种模式Herdr 键盘模式完整指南跟一条操作时间线5 分钟分清 3 种模式 Herdr 是把 Claude Code、Codex、Cursor 这类编码 AgenAI 技能媒体生成视频Yii 2 功能测试实战指南用 Codeception 在应用内直接验证用户场景Yii 2 功能测试实战指南用 Codeception 在应用内直接验证用户场景 功能测试Functional Tests从用户视角验证完整场景与验收测AI 技能媒体生成视频上一篇Kubernetes 功能工作流演进2017 Contributor Summit 讨论记录与社区治理制度化解读下一篇Apache DolphinScheduler 任务执行框架深度解析dolphinscheduler-task-executor 如何统一 run / track / report 任务实例创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考