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 仓库中的graze-face-tour镜头卡Shot Recipe Card展开它用 CSSperspectiverotateX/rotateY大倾角机位让镜头贴着 UI 表面低飞掠过把侧栏树、顶部 tab 条、列表行拍成被镜头飞掠的地貌并以文字空中贴落作为戏眼——页面元素初始悬浮在界面上空3D z 轴抬高在界面投下同形软影随镜头行进先后加速贴落回界面。读完本文你将掌握大倾角贴面机位的 CSS 3D 搭建方法、悬浮元素 同形软影的完整参数化实现、错峰贴落与段间接力的节奏编排以及该卡与整体登场齐落语法的边界判例neon-frame-orbit-drop 互为反例可直接用于功能区巡礼、产品内部世界暗场霓虹段落等产品视频镜头设计。卡片定位把 UI 拍成地形graze-face-tour的核心理念是把 UI 拍成地形大倾角特写让侧栏树、导航、列表行变成掠过的地貌浅景深强化贴面体感。它属于 camera 镜头家族 中的贴面游走类别同时被标记为ui-entrance标签因为其本质是界面内容逐区登场的入场语法。其典型应用场景包括功能区巡礼把 UI 当地景飞掠逐个区域展示侧栏 → 顶栏 → 列表行产品内部世界段落配合暗场背景 霓虹缘光营造进入产品内部的沉浸感界面内容逐区登场利用错峰贴落让界面在镜头经过时依次完成自己。从 GrazeFaceTour.tsx 的注释可以看到该实现复刻自源片clickup-30.mp4约 28.5–33s 的段落v2 版本加入了文字悬浮 同形软影 先后贴落的用户反馈改进——这是本卡签名式动效的由来。时长规格为单段 4–5s可多段接力延长能量等级为中高运镜持续推进 元素连续落位信息密度高。动效核心五大支柱拆解卡片定义的动效核心由五个相互咬合的支柱构成缺一不可机位CSSperspectiverotateX/rotateY大倾角面几乎侧掠沿界面一条路径持续推进浅景深远处 blur 渐强。悬浮元素初始悬浮高度 H≈120–180px沿面法线方向抬起用easeFall加速下落 软着陆落地不回弹或极微回弹。同形软影元素原位渲染模糊压暗投影blur/offset/opacity全部随当前悬浮高度变化——高影大而糊而淡落地影与本体重合消失。错峰贴落各元素落地时刻按镜头行进方向排布先经过的先落界面在镜头前依次完成。长镜可拆段接力段间用相邻段交叉淡化过渡判例透明度窗口不重叠会产生黑闪帧。其中影子是可感命门没有影子悬浮读作普通位移入场有影子空间关系瞬间成立。这一条在源码中直接体现为FloatWrap组件中高度驱动的投影参数详见下文源码剖析。参数表全解典型值、手感与源码对照卡片给出了六个核心参数的完整调校表下表在保留原表基础上补充了源码中的具体取值参数典型值调节手感源码对照GrazeFaceTour.tsx悬浮高度120–180px80px 影子和位移都读不出250px 落地砸得太重liftOf默认H 120各场景取 130–180侧栏树 130、Recent 卡 170、顶栏 logo 150–160、大标题 180、列表行 150–160影子参数blur/offset/opacity 随高度线性收敛影子恒定不随高度变贴纸感落地影必须归零FloatWrap中blur(3.5 h*0.085)、translate(h*0.22, h*0.42) scale(1 h*0.0011)、opacity: min(0.38, 0.16 h*0.004)h 1.5才渲染影子落地即归零贴落错峰按镜头行进方向 0.2→0.85 归一化排布同帧齐落读作开关乱序落读作 bug错峰错开起点但下落过程重叠并行串行等待一个落完另一个才开始被裁runway 判例liftOf的落地时刻land依场景排布侧栏树0.22 (i/n)*0.62顶栏 tab0.2 i*0.1列表行0.62 i*0.09全部落在 0.2–0.85 区间下落曲线easeFall 加速 软着陆ease-out 下落读作气球飘落重力感靠加速easeFall Easing.bezier(0.5, 0.05, 0.6, 1)下落窗口FALL 0.34归一化时长段间接力相邻段交叉淡化 ≥8f透明度窗口不搭接会黑闪返工判例 f100 纯黑帧实际实现SEG_LEN 50帧、FADE 7帧前后段在边界区间重叠插值透明度景深远处 blur 渐强全清晰读作平面滚动浅景深才有贴面体感屏幕空间二重渲染blur(16px)副本 径向渐变 mask 焦点带焦点随段落呼吸移动源码级实现剖析从悬浮软影到三段接力参考实现位于 demos/camera/graze-face-tour/GrazeFaceTour.tsx共约 470 行由三大部分组成悬浮 同形软影原语、灰阶自绘 UI 素材、3D 摄影与段落编排。下面按职责拆解关键实现。FloatWrap悬浮 同形软影的原语FloatWrap是整个签名动效的最小可复用单元。它接收当前悬浮高度h像素渲染两层相同的子内容软影层h 1.5时渲染绝对定位覆盖在原位通过transform: translate(h*0.22, h*0.42) scale(1 h*0.0011)让影子随高度向右下偏移并微微放大filter: blur(3.5 h*0.085) brightness(0.32) saturate(0.4)实现模糊压暗opacity: Math.min(0.38, 0.16 h*0.004)控制随高度增浓的透明度——高度越高影越大、越糊、越淡本体层transform: translate(-h*0.34, -h*0.78)将元素沿面法线方向抬起屏幕上左方向与软影层拉开空间。当h → 0时影子不渲染h 1.5条件直接跳过本体归位实现落地影与本体重合消失的要求。从实现看blur/offset/opacity 三项全部由同一高度变量线性驱动正是参数表中影子随高度线性收敛的直接证据。liftOf easeFall重力感靠加速const easeFall Easing.bezier(0.5, 0.05, 0.6, 1); // 加速下落、末端软着陆 const liftOf (t: number, land: number, H 120) { const FALL 0.34; const p Math.min(1, Math.max(0, (t - (land - FALL)) / FALL)); return (1 - easeFall(p)) * H; };liftOf定义了一条落地时刻 land的下落曲线在land之前的FALL 0.34窗口内p从 0 走到 1easeFall(p)从 0 走到 1悬浮高度从H线性反向下落到 0。easeFall使用贝塞尔曲线(0.5, 0.05, 0.6, 1)——前半段斜率陡快速加速、末端趋缓软着陆与 ease-out 的气球飘落手感形成对比。所有元素共享同一个FALL窗口意味着错开的是起点与落地时刻下落过程本身是重叠并行的这正是错峰重叠并行的工程化表达。PlaneCSS 3D 大倾角机位Plane组件负责把整块 UI 内容放入 CSS 3D 空间AbsoluteFill style{{ perspective: 1050, perspectiveOrigin: 50% 46% }} div style{{ transformStyle: preserve-3d, transform: scale(${cam.scale}) rotateX(${cam.rx}deg) rotateY(${cam.ry}deg) rotateZ(${cam.rz}deg) }} div style{{ transform: translate3d(${x}px, ${y}px, 0) }}外层设置perspective: 1050与perspectiveOrigin内部preserve-3d保持层级scale * rotateX * rotateY * rotateZ构成大倾角姿态三段相机配置见SEGS侧栏段rx:12, ry:30, rz:-6, scale:0.95顶栏段rx:20, ry:-20, rz:6, scale:0.95列表段rx:14, ry:28, rz:-5, scale:1.05路径推进通过interpolate(t, [0,1], cam.x/cam.y, { easing: easeIO })在内容坐标系里平移目标点translate (W/2 - cx, H/2 - cy)easeIO Easing.bezier(0.45, 0, 0.25, 1)给出舒缓的起止节奏。Plane内还封装了两层贴面辅助沿屏幕边缘的霓虹缘光edge: left | top两种方向的渐变晕染linear-gradient(185deg, #ff7ab8, #b06cff 55%, #6d4dff)blur(70px)大辉光与blur(3px)细亮线以及远端压暗线性渐变在透视远端渐暗到 0.55–0.6 不透明二者共同营造暗场霓虹调性。三段接力交叉淡化藏段落切换原片是一条连续上行长镜复刻版拆成三段SEGS侧栏树 → 顶栏 tab 条 → 列表行SEG_LEN 50帧/段、共 150 帧。Stage组件对每段做边界淡化const opacity interpolate(local, [-FADE, 0, SEG_LEN - FADE, SEG_LEN], [i 0 ? 1 : 0, 1, 1, i SEGS.length - 1 ? 1 : 0]);每段在其局部帧[-FADE, 0]区间淡入、在[SEG_LEN - FADE, SEG_LEN]区间淡出FADE 7帧相邻两段的透明度窗口在边界重叠——保证段间切换没有纯黑帧。注意卡片参数表建议交叉淡化 ≥8f返工判例 f100 出现纯黑帧实现以FADE 7为实际取值实战若发现边界闪烁应优先把淡化窗口加宽到 8f 以上。屏幕空间浅景深焦点带随段落呼吸GrazeFaceTour顶层把整个Stage再渲染一遍做浅景深模糊副本filter: blur(16px) brightness(0.92)叠加radial-gradient(ellipse 58% 52% at X% Y%, transparent 34%, rgba(0,0,0,0.85) 72%, black 92%)作为mask——焦点椭圆内部透明清晰、向外渐变为黑模糊焦点带随段落移动focusX [44, 40, 46][seg]、focusY [46, 40, 50][seg]产生呼吸感的浅景深正是参数表中远处 blur 渐强的实现手段最后叠加径向暗角radial-gradient(ellipse 90% 80% ... rgba(1,1,4,0.9))完成暗场压暗。已知坑清单调校边界与判例约束卡片明确记录了五条实战中容易踩中的坑首次使用该卡时务必逐条核对参数是调校起点而非实战定稿demo 在灰阶/占位素材自绘TreeRow、RecentCard等上调校通过首次实战必须以真实素材回验全部参数悬空元素别被环境压黑带吞掉邻候选 runway 判例空中元素需追光/提亮约 1.3x否则悬浮状态不可感等于没做——暗场 远端压暗容易让抬升元素融入背景与 space-camera-moves / tension-camera-moves 的分工那两张是相机语言本身本卡贴面机位元素贴落的组合签名缺一半就改用相机卡贴落节奏语义判例本卡巡礼镜错峰并行而整体登场镜必须全体同帧齐落见下节反例选错语法两边都会被裁长镜路径成本原片是连续上行长镜复刻用三段接力、段落切换藏在交叉淡化里——实战若做真单长镜路径规划成本高得多。节奏语义判例与 neon-frame-orbit-drop 互为反例本卡最重要的边界约束是贴落节奏的语义区分neon-frame-orbit-drop.md 与本卡互为反例graze-face-tour巡礼镜 错峰并行错开贴落起点但下落过程重叠并行界面依次完成neon-frame-orbit-drop整体登场镜 全体同帧齐落所有组件文字同帧起落、同帧贴合、软影同步消失判例裁决原话为应该是所有组件和文字同时从空中往下贴合其错峰版被裁。选错语法两边都会被裁在巡礼镜头里用齐落会读作开关式整页切换在整体登场镜头里用错峰会读作逐区巡礼。实战选卡时单页 UI 一次性隆重登场应选 neon-frame-orbit-drop或 neon-frame-forerun功能区逐区亮相、界面内容逐区登场的巡礼语境才使用本卡。同一段落内两张卡二选一避免同框语言重复。参考实现与后续深入完整实现demos/camera/graze-face-tour/GrazeFaceTour.tsx约 470 行含灰阶 UI 素材、3D 摄影、三段接力与浅景深卡片原始定义references/shots/camera/graze-face-tour.md反例参照references/shots/ui-entrance/neon-frame-orbit-drop.md及其实现 NeonFrameForerunOrbit.tsx同家族参照贴面游走的 runway-ground-skim、大倾角滑移的 steep-tilt-glide 与相机语言卡 space-camera-moves、tension-camera-moves。仓库配套的 参考镜头序列 与 工作台workbench 可作为镜头编排与联调的进一步入口该卡的公开卡片元数据摘要、时长、能量、适用场景收录于 gallery/api/library.json。赞分享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 大倾角贴面游走特写GrazeFaceTour把 UI 当地形低飞掠过的动效卡片实战解析video shotcraft 大倾角贴面游走特写GrazeFaceTour把 UI 当地形低飞掠过的动效卡片实战解析 本篇技术指南以 video sAI 技能媒体生成视频video-shotcraft 跑道镜头卡用 Remotion 实现低角度掠地机位下的 UI 卡片急雨贴落与页面立起转正video shotcraft 跑道镜头卡用 Remotion 实现低角度掠地机位下的 UI 卡片急雨贴落与页面立起转正 导读 本文深度拆解 video shAI 技能媒体生成视频video-shotcraft 镜头卡深度解析RunwayGroundSkim 低角度掠地贴落动效的实现与调参video shotcraft 镜头卡深度解析RunwayGroundSkim 低角度掠地贴落动效的实现与调参 本篇技术指南以 references/shotAI 技能媒体生成视频上一篇How to GraphQLGraphQL订阅与WebSocket扩展协议下一篇Autopilot-Notes从L2到L4 - 自动驾驶分级的技术演进路线图创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考