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 镜头配方库中的 steep-tilt-glide 镜头卡 展开如何在 Remotion 中用纯 CSS 3D 变换复刻镜头钉死、页面自己滑的侧掠运镜涵盖相机常数标定、滑移曲线设计、速度重影、悬空贴落与由暗揭亮的完整实现细节。读完后你可以直接按参数表复现该镜头并理解每一处参数背后的取舍判例哪一版被裁、为什么裁把这张卡真正用到长页面 UI 巡览段落中。镜头卡定位一镜 4 秒的侧掠机位卡片 frontmatter 给出了这张镜头卡的定位元信息值一句话固定镜头下直立页面以 60° 强透视侧立右近左远页面自身沿其 3D 横面方向滑移掠过镜头物动镜不动滑移带速度重影、文字组件悬空贴落、由暗揭亮适用长页面/多区块 UI 的炫技巡览内容依次滑过固定机位暗场霓虹调性与贴面运镜卡互补的侧掠机位时长4s120f单镜页面越宽越可拉长能量中高透视炫技持续运动但节奏是匀的标签ui-entrance它和 graze-face-tour贴面游走特写来自同一原片clickup-30.mp4的复刻需求但两者在运动模型上完全对偶贴面卡是镜头动、页面静侧掠卡是镜头静、页面动。这个分工不是风格偏好而是被评审判例强制的——参考实现文件头的注释逐字记录了用户意见角度不对……镜头是固定的但是页面本身往其3d空间的横面方向移动的效果见 SteepTiltGlide.tsx 第 1–8 行注释。命门物动镜不动——为什么镜头必须全程常数这张卡的意图描述非常直接把页面立成一堵斜墙镜头钉死不动60° 强透视让右缘贴脸、左缘消失在灭点页面自己沿自身平面横向滑移——内容像列车车厢一样依次掠过。从源码结构看这个镜头不动被实现为一个全程不变的相机常量对象SteepTiltGlide.tsx#L259// v7批次 16用户意见改成60度吧——rotY -53 → -60精确定值 const CAM { persp: 1100, // perspective 距离 origin: 30% 58%, // perspectiveOrigin灭点偏左中下 rotY: -60, // 主倾斜角右缘近、左缘远 rotZ: -2, // 轻微侧倾顶缘向右上扬 left: 40%, top: 15%, // 面板在画面中的锚点 scale: 0.62, // 内容坐标 → 画面坐标的缩放 };渲染层级SteepTiltGlide.tsx#L261-L275严格分三层3D 变换只发生在中间层const PanelLayer ({ lx, shade, opacity, t }) ( AbsoluteFill style{{ opacity }} AbsoluteFill style{{ perspective: CAM.persp, perspectiveOrigin: CAM.origin }} div style{{ position: absolute, left: CAM.left, top: CAM.top, transform: rotateY(${CAM.rotY}deg) rotateZ(${CAM.rotZ}deg), transformOrigin: left top, }} {/* 页面自身在其 3D 平面内横移局部 X 轴——全程唯一动的量 */} div style{{ transform: scale(${CAM.scale}) translateX(${lx}px), transformOrigin: left top }} Panel shade{shade} t{t} / /div /div /AbsoluteFill /AbsoluteFill );要点在于perspective、perspectiveOrigin、rotateY、rotateZ四个量在 120 帧里一个都不变唯一随帧变化的量是内层 div 的translateX(lx)——而且这个位移发生在页面自身的局部坐标系里所以它滑移的方向永远是页面 3D 横面方向而不是屏幕方向。卡片参数表把这个运动模型标为命门早期镜头横移版被评审打回打回意见就是文件头引用的那句镜头是固定的页面本身往其3d空间的横面方向移动。镜头一动语义就从页面在自我展示变成了运镜炫技镜头语言完全不同。角度经三轮收敛的精确 -60°透视角不是好看就行的自由参数而是这张卡的身份v5 起步时对照原片密帧校准为 rotateY(-38°)源码注释中保留了当时的校准记录后续批次用户裁定 -45°不对 → -53°再大一点 → 最终精确定值 -60°v7参数表同时给出边界-70° 以上内容就读不清了。因此实战微调范围建议55–65°出这个区间等于换手法。滑移模型超宽面板 尾段斜率不归零的缓动页面本体是一个超宽面板内容坐标6200×2400SteepTiltGlide.tsx#L76-L79。为什么必须这么宽参数表给了解释页面宽度需 ≥3 屏内容——太窄滑两秒就完撑不起一镜。参考实现里页面分两段左段是 ClickUp 3.0 的顶栏侧栏右段是 Product Management 任务列表原片尾程满幅白页整页手绘了 tab 条、logo 行、药丸框、任务行等约二十个组件成本不低——这也是已知坑里提醒实战可用真实长截图代替滑移逻辑不变的原因。滑移曲线是这段镜头的第二命门实现只有三行SteepTiltGlide.tsx#L282-L286// 起步柔和后近匀速全程不安定停死bezier 尾段斜率不归零 const glide Easing.bezier(0.3, 0.12, 0.72, 0.9); const lxAt (f: number) { const p interpolate(f, [0, 120], [0, 1], { easing: glide, extrapolateLeft: clamp, extrapolateRight: clamp }); return interpolate(p, [0, 1], [60, -4100]); // 局部 X60 → -4100 };设计意图拆开看120 帧内局部 X 从60 滑到 -4100内容从镜头右侧一直掠过到左侧bezier(0.3, 0.12, 0.72, 0.9)的形状起步柔和有呼吸感→ 中段近匀速 → 尾段斜率不归零。尾段不归零意味着镜头切走时页面仍在运动不安定停死参数表记录了两个反例早期版本中途停死被抓v4 返工全用 linear 则少了起步呼吸。也就是说这条 bezier 是在全程匀速和中途刹停两个失败样本之间收敛出来的。速度重影用过去时刻的重投影做拖尾滑移带速度重影是该镜头的第三个签名。实现思路不是画模糊拖尾而是把整个 PanelLayer 再渲染两次位置取过去时刻的局部位移透明度与当前滑移速度成正比SteepTiltGlide.tsx#L291-L294、L307-L311// 重影强度 ∝ 滑移速度拖尾过去时刻的局部位置同一固定镜头下重投影 const speed Math.abs(lxAt(frame - 1) - lxAt(frame 1)) / 2; const g1 Math.min(0.42, speed * 0.03); const g2 Math.min(0.22, speed * 0.016); ... // 重影先画垫在本体后面位置过去时刻的页面局部位移 {g2 0.02 PanelLayer lx{lxAt(frame - 5)} shade{shade} opacity{g2} t{drop} /} {g1 0.02 PanelLayer lx{lxAt(frame - 2.5)} shade{shade} opacity{g1} t{drop} /} {/* 本体 */} PanelLayer lx{lx} shade{shade} opacity{1} t{drop} /三层用同一个PanelLayer组件相机常量完全一致所以拖尾层就是过去时刻的页面在同一固定镜头下的重投影——几何上严格正确不会出现拖尾与本体透视对不上的问题。两个细节值得注意透明度 ∝ 速度且用min(0.42 / 0.22, ...)封顶双层拖尾f-2.5 浓、f-5 淡只有速度快时才出现静止或慢速时g 0.02直接不渲染。参数表里恒定重影读作重像故障说的就是反例——重影必须跟着速度呼吸重影先画、本体后画利用 DOM 层叠垫在身后。悬空贴落FloatWrap 同形软影 错峰行程页面内的文字组件不是原地出现而是悬浮在界面上空、带同形软影随滑移进程错峰贴落——这是从 graze-face-tour 卡继承的巡礼语法。实现是两个小函数const easeFall Easing.bezier(0.5, 0.05, 0.6, 1); // 加速贴落、末端软着陆 const FloatWrap ({ h, children }) ( div style{{ position: relative }} {h 2 ( div style{{ // 同形软影随高度抬移、放大、变糊变淡 position: absolute, inset: 0, transform: translate(${h * 0.24}px, ${h * 0.46}px) scale(${1 h * 0.0009}), filter: blur(${5 h * 0.075}px) brightness(0.35) saturate(0.4), opacity: Math.min(0.38, 0.15 h * 0.0016), }}{children}/div )} div style{{ transform: translate(${-h * 0.34}px, ${-h * 0.8}px) }}{children}/div /div ); /* land贴合完成时刻(0..1)之前从 H 高度加速贴落 */ const liftOf (t, land, H 230) { const FALL 0.32; const p Math.min(1, Math.max(0, (t - (land - FALL)) / FALL)); return (1 - easeFall(p)) * H; };关键参数与语义悬浮高度 H 取 230–280pxliftOf的第三参在 230/240/250/260/280 之间变化高于 graze-face-tour 卡的 120–180px因为 60° 侧立视角下要读得出悬浮抬得更高影子参数全部随高度线性收敛blur、offset、opacity 都是h的函数落地时h→0影子与本体重合消失——影子是可感命门见 graze-face-tour 卡的论述错峰贴落面板内各元素传入不同的land时刻0.3、0.42、0.54、0.62、0.68、0.8、0.86…按滑移方向排布先经过的先落全程并行重叠而非串行等待——参数表注明这是巡礼语法与整体登场镜全体同帧齐落的语法neon-frame-orbit-drop 判例互斥选错语法两边都会被裁进程驱动量是drop interpolate(frame, [4, 100], [0, 1])即贴落进程占满全片前 100 帧。由暗揭亮与暗场氛围最后一层签名是揭亮起始面板压暗约 1.4s 内揭到全亮左缘额外渐变阴影同步退去SteepTiltGlide.tsx#L243-L250、#L289-L298// 面板黑罩起始暗 → 约 1.4s 全亮对齐原片节奏 const shade interpolate(frame, [0, 18, 44], [0.7, 0.4, 0], { extrapolateRight: clamp }); ... // 面板内黑罩随进度揭亮 div style{{ position: absolute, inset: 0, background: #050409, opacity: shade }} / // 左缘额外阴影起始更暗随亮度一同退去 div style{{ position: absolute, inset: 0, background: linear-gradient(90deg, rgba(5,4,9,0.9), rgba(5,4,9,0) 42%), opacity: Math.min(1, shade * 1.6), }} /配合#060409的近黑底色、左侧径向紫晕glow在 14→70 帧从 0.15 涨到 1和全屏暗角构成卡片所说的暗场霓虹调性。注意黑罩是画在面板内部的Panel 组件的最后一层所以它跟着页面一起滑移——暗是页面还没亮起来而不是镜头前的遮罩这一点在复刻时容易做错层级。参数表完整继承与调节手感以下是原卡片的完整参数表含评审判例实战调参时优先对照调节手感列参数典型值调节手感倾斜角rotateY-60°用户精确定值-45° 被裁角度不对、-53°再大一点-70° 内容读不清运动模型镜头全常数、页面自移命门——镜头横移版被裁镜头是固定的页面本身往其3d空间的横面方向移动滑移曲线尾段斜率不归零的 bezier中途停死被抓v4 返工全 linear 少了起步呼吸重影透明度∝速度双层 f-2.5/f-5恒定重影读作重像故障页面宽度≥3 屏内容太窄滑两秒就完撑不起一镜悬空贴落错峰巡礼语法 影随高度语义判例见 graze-face-tour/orbit-drop 三卡族补充源码中的完整取值方便直接复用参数值源码位置perspective1100CAM 对象perspectiveOrigin30% 58%同上rotateY / rotateZ-60° / -2°同上transformOriginleft top旋转层与位移层均取左上锚点PanelLayer面板锚点/缩放left 40%、top 15%、scale 0.62同上面板尺寸6200 × 2400内容坐标PW/PH滑移范围局部 X 60 → -4100120 帧lxAt滑移缓动bezier(0.3, 0.12, 0.72, 0.9)同上重影层f-2.5上限 0.42×speed×0.03/ f-5上限 0.22×speed×0.016SteepTiltGlide.tsx#L291-L294悬浮高度 H230–280pxliftOf 调用点贴落窗口每元素落地前 0.32 归一化进程内完成liftOf揭亮shade 0.7→0.4→0 帧 0/18/44SteepTiltGlide.tsx#L290已知坑与实战边界原卡片已知坑一节全部继承如下并用源码做了对应标注demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿首次实战须以真实素材回验。参考实现本身就是手绘占位 UI双 V 叠形 logo、蓝四菱形 glyph 都是近似这一点在 SteepTiltGlide.tsx#L40-L74 的注释里写得很明白角度判例透视角是本卡身份实战微调范围建议 55–65°出这个区间等于换手法与 graze-face-tour 的分工那张镜头动贴面游走、页面静本卡镜头静、页面动。同段落二选一不能混用与 runway-ground-skim 的分工那张是俯角平躺垂直贴落立起本卡是侧立横向滑移轴向正交超宽页面手绘成本高实战可用真实长截图代替滑移逻辑不变——因为滑移只作用于translateX(lx)一个量页面内容换成img不影响运动模型。与其他镜头卡的族谱关系从卡片库结构看这张卡与几张卡构成明确对偶或互补关系选型时按谁在动判断对偶于 graze-face-tour贴面游走镜头动、页面静戏眼是文字空中贴落——两者共享FloatWrap悬浮软影模式本卡文件注释第 17 行即标注GrazeFaceTour FloatWrap 模式但运动模型相反对偶于 runway-ground-skim俯角平躺、垂直贴落、最后立起——与本卡轴向正交与 tension-camera-moves / space-camera-moves 的差别在 graze-face-tour 卡中被概括为那两张是相机语言本身本族卡是机位元素行为的组合签名——steep-tilt-glide 同理签名是固定强透视机位 页面自移 速度重影的绑定去掉任何一半都应改用对应的基础相机卡。参考资料镜头卡原文references/shots/camera/steep-tilt-glide.md参考实现demos/camera/steep-tilt-glide/SteepTiltGlide.tsxWorkbench 工作区同步副本workbench/demosrc/camera/steep-tilt-glide/SteepTiltGlide.tsx对偶镜头卡references/shots/camera/graze-face-tour.md卡库 API 与检索入口gallery/api/library.json、gallery/llms.txt原片出处为 clickup-30.mp4卡片 frontmatter 与 graze-face-tour 卡共同标注。需要说明的是demo 与卡片参数基于占位素材调校通过属于调校起点而非实战定稿真实项目落地时请按上述已知坑以实际素材回验角度、滑移幅度与揭亮节奏。赞分享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点击查看免费下载相关推荐OpenUI 完整上手从一句描述到实时渲染的 UI 组件OpenUI 完整上手从一句描述到实时渲染的 UI 组件 输入“做一个响应式定价页”几秒后一个实时渲染的 UI 就出现在屏幕上你还能继续提修改意见或把它AI 技能媒体生成视频Video2X 实用指南AI 视频超分与帧插值四引擎选型到完整跑通Video2X 实用指南AI 视频超分与帧插值四引擎选型到完整跑通 Video2X 是一个用 C/C 编写的开源 AI 视频超分与帧插值框架整合了 AAI 技能媒体生成视频video-shotcraft 镜头配方 list-stack-press用 Remotion 做出有重量的列表堆叠镜头video shotcraft 镜头配方 list stack press用 Remotion 做出有重量的列表堆叠镜头 本篇围绕 video shotcAI 技能媒体生成视频上一篇Longhorn 标签驱动的周期性任务Recurring Job机制从卷级 Cron 定义到 CRD 与标签引用下一篇Elsa 3.6.3 补丁版本技术解析Azure Service Bus 集群稳定性、Cron 行为与发布反馈改进创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Video Shotcraft 侧掠机位实战：固定镜头下 60° 强透视的 UI 页面滑移镜头（steep-tilt-glide）
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 镜头配方库中的 steep-tilt-glide 镜头卡 展开如何在 Remotion 中用纯 CSS 3D 变换复刻镜头钉死、页面自己滑的侧掠运镜涵盖相机常数标定、滑移曲线设计、速度重影、悬空贴落与由暗揭亮的完整实现细节。读完后你可以直接按参数表复现该镜头并理解每一处参数背后的取舍判例哪一版被裁、为什么裁把这张卡真正用到长页面 UI 巡览段落中。镜头卡定位一镜 4 秒的侧掠机位卡片 frontmatter 给出了这张镜头卡的定位元信息值一句话固定镜头下直立页面以 60° 强透视侧立右近左远页面自身沿其 3D 横面方向滑移掠过镜头物动镜不动滑移带速度重影、文字组件悬空贴落、由暗揭亮适用长页面/多区块 UI 的炫技巡览内容依次滑过固定机位暗场霓虹调性与贴面运镜卡互补的侧掠机位时长4s120f单镜页面越宽越可拉长能量中高透视炫技持续运动但节奏是匀的标签ui-entrance它和 graze-face-tour贴面游走特写来自同一原片clickup-30.mp4的复刻需求但两者在运动模型上完全对偶贴面卡是镜头动、页面静侧掠卡是镜头静、页面动。这个分工不是风格偏好而是被评审判例强制的——参考实现文件头的注释逐字记录了用户意见角度不对……镜头是固定的但是页面本身往其3d空间的横面方向移动的效果见 SteepTiltGlide.tsx 第 1–8 行注释。命门物动镜不动——为什么镜头必须全程常数这张卡的意图描述非常直接把页面立成一堵斜墙镜头钉死不动60° 强透视让右缘贴脸、左缘消失在灭点页面自己沿自身平面横向滑移——内容像列车车厢一样依次掠过。从源码结构看这个镜头不动被实现为一个全程不变的相机常量对象SteepTiltGlide.tsx#L259// v7批次 16用户意见改成60度吧——rotY -53 → -60精确定值 const CAM { persp: 1100, // perspective 距离 origin: 30% 58%, // perspectiveOrigin灭点偏左中下 rotY: -60, // 主倾斜角右缘近、左缘远 rotZ: -2, // 轻微侧倾顶缘向右上扬 left: 40%, top: 15%, // 面板在画面中的锚点 scale: 0.62, // 内容坐标 → 画面坐标的缩放 };渲染层级SteepTiltGlide.tsx#L261-L275严格分三层3D 变换只发生在中间层const PanelLayer ({ lx, shade, opacity, t }) ( AbsoluteFill style{{ opacity }} AbsoluteFill style{{ perspective: CAM.persp, perspectiveOrigin: CAM.origin }} div style{{ position: absolute, left: CAM.left, top: CAM.top, transform: rotateY(${CAM.rotY}deg) rotateZ(${CAM.rotZ}deg), transformOrigin: left top, }} {/* 页面自身在其 3D 平面内横移局部 X 轴——全程唯一动的量 */} div style{{ transform: scale(${CAM.scale}) translateX(${lx}px), transformOrigin: left top }} Panel shade{shade} t{t} / /div /div /AbsoluteFill /AbsoluteFill );要点在于perspective、perspectiveOrigin、rotateY、rotateZ四个量在 120 帧里一个都不变唯一随帧变化的量是内层 div 的translateX(lx)——而且这个位移发生在页面自身的局部坐标系里所以它滑移的方向永远是页面 3D 横面方向而不是屏幕方向。卡片参数表把这个运动模型标为命门早期镜头横移版被评审打回打回意见就是文件头引用的那句镜头是固定的页面本身往其3d空间的横面方向移动。镜头一动语义就从页面在自我展示变成了运镜炫技镜头语言完全不同。角度经三轮收敛的精确 -60°透视角不是好看就行的自由参数而是这张卡的身份v5 起步时对照原片密帧校准为 rotateY(-38°)源码注释中保留了当时的校准记录后续批次用户裁定 -45°不对 → -53°再大一点 → 最终精确定值 -60°v7参数表同时给出边界-70° 以上内容就读不清了。因此实战微调范围建议55–65°出这个区间等于换手法。滑移模型超宽面板 尾段斜率不归零的缓动页面本体是一个超宽面板内容坐标6200×2400SteepTiltGlide.tsx#L76-L79。为什么必须这么宽参数表给了解释页面宽度需 ≥3 屏内容——太窄滑两秒就完撑不起一镜。参考实现里页面分两段左段是 ClickUp 3.0 的顶栏侧栏右段是 Product Management 任务列表原片尾程满幅白页整页手绘了 tab 条、logo 行、药丸框、任务行等约二十个组件成本不低——这也是已知坑里提醒实战可用真实长截图代替滑移逻辑不变的原因。滑移曲线是这段镜头的第二命门实现只有三行SteepTiltGlide.tsx#L282-L286// 起步柔和后近匀速全程不安定停死bezier 尾段斜率不归零 const glide Easing.bezier(0.3, 0.12, 0.72, 0.9); const lxAt (f: number) { const p interpolate(f, [0, 120], [0, 1], { easing: glide, extrapolateLeft: clamp, extrapolateRight: clamp }); return interpolate(p, [0, 1], [60, -4100]); // 局部 X60 → -4100 };设计意图拆开看120 帧内局部 X 从60 滑到 -4100内容从镜头右侧一直掠过到左侧bezier(0.3, 0.12, 0.72, 0.9)的形状起步柔和有呼吸感→ 中段近匀速 → 尾段斜率不归零。尾段不归零意味着镜头切走时页面仍在运动不安定停死参数表记录了两个反例早期版本中途停死被抓v4 返工全用 linear 则少了起步呼吸。也就是说这条 bezier 是在全程匀速和中途刹停两个失败样本之间收敛出来的。速度重影用过去时刻的重投影做拖尾滑移带速度重影是该镜头的第三个签名。实现思路不是画模糊拖尾而是把整个 PanelLayer 再渲染两次位置取过去时刻的局部位移透明度与当前滑移速度成正比SteepTiltGlide.tsx#L291-L294、L307-L311// 重影强度 ∝ 滑移速度拖尾过去时刻的局部位置同一固定镜头下重投影 const speed Math.abs(lxAt(frame - 1) - lxAt(frame 1)) / 2; const g1 Math.min(0.42, speed * 0.03); const g2 Math.min(0.22, speed * 0.016); ... // 重影先画垫在本体后面位置过去时刻的页面局部位移 {g2 0.02 PanelLayer lx{lxAt(frame - 5)} shade{shade} opacity{g2} t{drop} /} {g1 0.02 PanelLayer lx{lxAt(frame - 2.5)} shade{shade} opacity{g1} t{drop} /} {/* 本体 */} PanelLayer lx{lx} shade{shade} opacity{1} t{drop} /三层用同一个PanelLayer组件相机常量完全一致所以拖尾层就是过去时刻的页面在同一固定镜头下的重投影——几何上严格正确不会出现拖尾与本体透视对不上的问题。两个细节值得注意透明度 ∝ 速度且用min(0.42 / 0.22, ...)封顶双层拖尾f-2.5 浓、f-5 淡只有速度快时才出现静止或慢速时g 0.02直接不渲染。参数表里恒定重影读作重像故障说的就是反例——重影必须跟着速度呼吸重影先画、本体后画利用 DOM 层叠垫在身后。悬空贴落FloatWrap 同形软影 错峰行程页面内的文字组件不是原地出现而是悬浮在界面上空、带同形软影随滑移进程错峰贴落——这是从 graze-face-tour 卡继承的巡礼语法。实现是两个小函数const easeFall Easing.bezier(0.5, 0.05, 0.6, 1); // 加速贴落、末端软着陆 const FloatWrap ({ h, children }) ( div style{{ position: relative }} {h 2 ( div style{{ // 同形软影随高度抬移、放大、变糊变淡 position: absolute, inset: 0, transform: translate(${h * 0.24}px, ${h * 0.46}px) scale(${1 h * 0.0009}), filter: blur(${5 h * 0.075}px) brightness(0.35) saturate(0.4), opacity: Math.min(0.38, 0.15 h * 0.0016), }}{children}/div )} div style{{ transform: translate(${-h * 0.34}px, ${-h * 0.8}px) }}{children}/div /div ); /* land贴合完成时刻(0..1)之前从 H 高度加速贴落 */ const liftOf (t, land, H 230) { const FALL 0.32; const p Math.min(1, Math.max(0, (t - (land - FALL)) / FALL)); return (1 - easeFall(p)) * H; };关键参数与语义悬浮高度 H 取 230–280pxliftOf的第三参在 230/240/250/260/280 之间变化高于 graze-face-tour 卡的 120–180px因为 60° 侧立视角下要读得出悬浮抬得更高影子参数全部随高度线性收敛blur、offset、opacity 都是h的函数落地时h→0影子与本体重合消失——影子是可感命门见 graze-face-tour 卡的论述错峰贴落面板内各元素传入不同的land时刻0.3、0.42、0.54、0.62、0.68、0.8、0.86…按滑移方向排布先经过的先落全程并行重叠而非串行等待——参数表注明这是巡礼语法与整体登场镜全体同帧齐落的语法neon-frame-orbit-drop 判例互斥选错语法两边都会被裁进程驱动量是drop interpolate(frame, [4, 100], [0, 1])即贴落进程占满全片前 100 帧。由暗揭亮与暗场氛围最后一层签名是揭亮起始面板压暗约 1.4s 内揭到全亮左缘额外渐变阴影同步退去SteepTiltGlide.tsx#L243-L250、#L289-L298// 面板黑罩起始暗 → 约 1.4s 全亮对齐原片节奏 const shade interpolate(frame, [0, 18, 44], [0.7, 0.4, 0], { extrapolateRight: clamp }); ... // 面板内黑罩随进度揭亮 div style{{ position: absolute, inset: 0, background: #050409, opacity: shade }} / // 左缘额外阴影起始更暗随亮度一同退去 div style{{ position: absolute, inset: 0, background: linear-gradient(90deg, rgba(5,4,9,0.9), rgba(5,4,9,0) 42%), opacity: Math.min(1, shade * 1.6), }} /配合#060409的近黑底色、左侧径向紫晕glow在 14→70 帧从 0.15 涨到 1和全屏暗角构成卡片所说的暗场霓虹调性。注意黑罩是画在面板内部的Panel 组件的最后一层所以它跟着页面一起滑移——暗是页面还没亮起来而不是镜头前的遮罩这一点在复刻时容易做错层级。参数表完整继承与调节手感以下是原卡片的完整参数表含评审判例实战调参时优先对照调节手感列参数典型值调节手感倾斜角rotateY-60°用户精确定值-45° 被裁角度不对、-53°再大一点-70° 内容读不清运动模型镜头全常数、页面自移命门——镜头横移版被裁镜头是固定的页面本身往其3d空间的横面方向移动滑移曲线尾段斜率不归零的 bezier中途停死被抓v4 返工全 linear 少了起步呼吸重影透明度∝速度双层 f-2.5/f-5恒定重影读作重像故障页面宽度≥3 屏内容太窄滑两秒就完撑不起一镜悬空贴落错峰巡礼语法 影随高度语义判例见 graze-face-tour/orbit-drop 三卡族补充源码中的完整取值方便直接复用参数值源码位置perspective1100CAM 对象perspectiveOrigin30% 58%同上rotateY / rotateZ-60° / -2°同上transformOriginleft top旋转层与位移层均取左上锚点PanelLayer面板锚点/缩放left 40%、top 15%、scale 0.62同上面板尺寸6200 × 2400内容坐标PW/PH滑移范围局部 X 60 → -4100120 帧lxAt滑移缓动bezier(0.3, 0.12, 0.72, 0.9)同上重影层f-2.5上限 0.42×speed×0.03/ f-5上限 0.22×speed×0.016SteepTiltGlide.tsx#L291-L294悬浮高度 H230–280pxliftOf 调用点贴落窗口每元素落地前 0.32 归一化进程内完成liftOf揭亮shade 0.7→0.4→0 帧 0/18/44SteepTiltGlide.tsx#L290已知坑与实战边界原卡片已知坑一节全部继承如下并用源码做了对应标注demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿首次实战须以真实素材回验。参考实现本身就是手绘占位 UI双 V 叠形 logo、蓝四菱形 glyph 都是近似这一点在 SteepTiltGlide.tsx#L40-L74 的注释里写得很明白角度判例透视角是本卡身份实战微调范围建议 55–65°出这个区间等于换手法与 graze-face-tour 的分工那张镜头动贴面游走、页面静本卡镜头静、页面动。同段落二选一不能混用与 runway-ground-skim 的分工那张是俯角平躺垂直贴落立起本卡是侧立横向滑移轴向正交超宽页面手绘成本高实战可用真实长截图代替滑移逻辑不变——因为滑移只作用于translateX(lx)一个量页面内容换成img不影响运动模型。与其他镜头卡的族谱关系从卡片库结构看这张卡与几张卡构成明确对偶或互补关系选型时按谁在动判断对偶于 graze-face-tour贴面游走镜头动、页面静戏眼是文字空中贴落——两者共享FloatWrap悬浮软影模式本卡文件注释第 17 行即标注GrazeFaceTour FloatWrap 模式但运动模型相反对偶于 runway-ground-skim俯角平躺、垂直贴落、最后立起——与本卡轴向正交与 tension-camera-moves / space-camera-moves 的差别在 graze-face-tour 卡中被概括为那两张是相机语言本身本族卡是机位元素行为的组合签名——steep-tilt-glide 同理签名是固定强透视机位 页面自移 速度重影的绑定去掉任何一半都应改用对应的基础相机卡。参考资料镜头卡原文references/shots/camera/steep-tilt-glide.md参考实现demos/camera/steep-tilt-glide/SteepTiltGlide.tsxWorkbench 工作区同步副本workbench/demosrc/camera/steep-tilt-glide/SteepTiltGlide.tsx对偶镜头卡references/shots/camera/graze-face-tour.md卡库 API 与检索入口gallery/api/library.json、gallery/llms.txt原片出处为 clickup-30.mp4卡片 frontmatter 与 graze-face-tour 卡共同标注。需要说明的是demo 与卡片参数基于占位素材调校通过属于调校起点而非实战定稿真实项目落地时请按上述已知坑以实际素材回验角度、滑移幅度与揭亮节奏。赞分享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点击查看免费下载相关推荐OpenUI 完整上手从一句描述到实时渲染的 UI 组件OpenUI 完整上手从一句描述到实时渲染的 UI 组件 输入“做一个响应式定价页”几秒后一个实时渲染的 UI 就出现在屏幕上你还能继续提修改意见或把它AI 技能媒体生成视频Video2X 实用指南AI 视频超分与帧插值四引擎选型到完整跑通Video2X 实用指南AI 视频超分与帧插值四引擎选型到完整跑通 Video2X 是一个用 C/C 编写的开源 AI 视频超分与帧插值框架整合了 AAI 技能媒体生成视频video-shotcraft 镜头配方 list-stack-press用 Remotion 做出有重量的列表堆叠镜头video shotcraft 镜头配方 list stack press用 Remotion 做出有重量的列表堆叠镜头 本篇围绕 video shotcAI 技能媒体生成视频上一篇Longhorn 标签驱动的周期性任务Recurring Job机制从卷级 Cron 定义到 CRD 与标签引用下一篇Elsa 3.6.3 补丁版本技术解析Azure Service Bus 集群稳定性、Cron 行为与发布反馈改进创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考