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 仓库的镜头配方卡 hatch-depth 及其参考实现 HatchDepth.tsx 展开。读完你将理解这张 data 类镜头卡的三幕时间结构错峰 wipe 生长 → 斜纹/实心层交叉淡化 → 微颤收尾、每个可调参数的取值边界与手感依据并能把这套几何零跳变的材质替换技法适配到自己的 dashboard/报表叙事镜头中。卡片定位解决什么叙事问题hatch-depth 是仓库references/shots/下 data 分类的一张镜头配方卡frontmatter 元信息如下原样继承自 hatch-depth.md一句话斜纹占位条逐条 wipe 伸长后斜纹淡出、强调色实心层淡入并弹出数值占位图蜕变为真数据条形图适用从草稿到真实数据的叙事拍dashboard/报表功能引入或强调数据实时性的段落时长约 4.4s132f30fps生长 0–1.7s · 蜕变 2.2–3.4s · 微颤收尾能量中信息渐进无爆点靠质感转换制造上线了的瞬间。配方卡的意图一节给出的设计动机值得完整保留把占位符变成真数据这个产品瞬间拍成看得见的材质转换——先用 45° 斜纹条画出这里将有数据的草稿感再让实心色层原位替换几何完全不动、只换皮肤观众读到的是同一样东西活了。这张卡在整个卡片库里有明确分工。从 data 分类的相邻卡片结构看chart-live-moves 讲图表自己活起来示波流线/点阵重组/轴爆表counter-confetti 讲里程碑数字的庆祝拍而 hatch-depth 独占占位态 → 实体数据态这一格语义——它不是数据在动是数据的材质在变。4.4 秒时间轴三幕结构逐帧拆解demo 总长 132 帧HATCH_DEPTH_DURATION 1324400ms 30fps所有时序都写在归一化时间轴 t∈[0,1] 上。参考实现里每个元素的动作由三段独立进度驱动// demos/data/hatch-depth/HatchDepth.tsx 核心循环第 45–50 行附近 const grow seg(t, 0.06 i * 0.05, 0.06 i * 0.05 0.22, E.outCubic); // 生长 const morph seg(t, 0.5 i * 0.03, 0.5 i * 0.03 0.14); // 蜕变 const wiggle 1 Math.sin(t * 30 i * 2.1) * 0.02 * seg(t, 0.7, 0.85); // 微颤 const wPct grow * w * 100 * wiggle;第一幕错峰 wipe 生长t 0.06–0.48约 0–1.7s5 条横柱按0.06 i*0.05错峰启动每条历时 0.22归一化时长走outCubic缓动从 0 wipe 伸长到各自的目标宽度归一化数据[0.85, 0.55, 0.95, 0.4, 0.7]源码中的ROWS常量。末条i4在 t0.26 启动、t0.48 长完为第二幕的蜕变窗口留出余量。生长阶段只有斜纹层可见repeating-linear-gradient(45deg, #565860 0 4px, transparent 4px 9px)叠加同色 1px 描边是典型的未填充草稿质感。第二幕原位材质蜕变t 0.5–0.76约 2.2–3.4s这是全卡的命门。源码中斜纹层与实心层是两个绝对定位、同宽同步的兄弟节点实心层的初始 opacity 恒为 0因此蜕变在视觉上只是一次交叉淡化斜纹层opacity: 1 - morph淡出实心层opacity: morph淡入两者width都是同一个wPct变量逐条错峰0.5 i*0.03每条 0.14 时长标签SERIES_A 等同拍从#8b91a3变暗到#5c626f源码里用morph 0.5二值切换把视觉重心让给数据数值文字Math.round(w * 420 * grow)K 挂在柱端left: calc(wPct% 8px)透明度绑定morph——注意数值本身仍乘grow所以读数感是随生长滚动到终值蜕变时数值恰好定格。配方卡特别强调这是卡点位BGM 重音应压在首条蜕变t0.5上。第三幕微颤收尾与表头宣告t 0.62–0.85微颤t0.7–0.85 全体柱宽乘1 sin(t*30 i*2.1) * 0.02±2% 的正弦摆动给活数据在呼吸的暗示。每条用i*2.1错相避免 5 条柱同步摆动读作整体抖动。表头滑入METRICS ● LIVE TOTAL 875K AVG 1.02M信息条在 t0.62–0.78 从上方 -30px 处按outCubic滑入headIn变量宣告蜕变完成。绿色● LIVE是整个实时数据语义的最后一枚钉子。关键参数表原卡继承 调节边界参数典型值调节手感错峰间隔生长 0.05/条、蜕变 0.03/条生长间隔可到 0.08 增强逐条点亮蜕变间隔别超 0.05拖长会读作故障闪烁生长时长0.22outCubic缩到 0.15 更利落配合错峰保证末条 ≤0.5 长完给蜕变留窗口蜕变窗口0.5 起、每条 0.14 交叉淡化这是卡点位——BGM 重音应压在首条蜕变t0.5上柱宽数据[0.85, 0.55, 0.95, 0.4, 0.7]换成真实数据比例即可最长条 ≥0.9 保证画面有满幅锚点微颤幅度±2%t0.7–0.854% 读作抖动 bug不想要呼吸感可归零但收尾会偏死板强调色ACCENT#5B8DEF/ACCENT_HI#8FB2F7双常量整体换肤HI 用于数值文字保持同族但更亮适配项目时只需替换三处ROWS真实指标名与归一化宽度、ACCENT/ACCENT_HI项目强调色、数值映射函数w*420换成实际格式化。源码深潜几何零跳变是怎么保证的配方卡已知坑第一条——斜纹层和实心层必须共用同一条grow曲线分开算会在蜕变瞬间产生 1–2px 宽度跳变原位换皮的错觉立刻穿帮——在 HatchDepth.tsx 里有直接体现两个div的width都写同一个模板字符串${wPct}%wPct由grow * w * 100 * wiggle一次算出。微颤wiggle也乘进同一个变量保证蜕变完成后两层以及柱端数值位置calc(${wPct}% 8px)继续严格共宽。几个容易忽略的实现细节全部带着原片复现的注释留在源码里boxSizing: content-box是刻意的斜纹层样式。原渲染管线没有全局 border-box1px 边框外扩更重要的是注释指出斜纹相位随元素尺寸变化box-sizing 不还原相位就对不上——repeating-linear-gradient的纹理相位与元素尺寸耦合改盒模型会改变斜纹相位导致与样片对不上。HATCH_DEPTH_DURATION 132的导出约定。仓库demos/目录的 demo 普遍导出时长常量供渲染冒烟脚本按真实时长取首帧验证见SKILL.md资产一节python3 assets/scripts/smoke-render-demos.py渲染每个带时长导出 demo 的首帧断言不崩。字体兜底fontFamily: SF Mono,Courier,monospace——源码注释说明 SF Mono 对无头 Chrome 不可见真实 Chrome 会落到 Courier显式补 Courier 兜底以对齐原片字形。接项目时换成产品自己的等宽字体即可但等宽这一属性要保住否则标签列与数值对齐会漂。NBSP2不换行空格常量JSX 会折叠连续普通空格表头METRICS ● LIVE TOTAL…的间距必须用nbsp;语义的常量这是跨镜头卡通用的写法。这套 demo 不是孤立文件它依赖 demos/_fixtures/Motion.tsx 的四个纯函数原语该文件注释说明是motion-lab 孵化轮沉淀的 48 张卡共用E缓动表E.outCubic (t) 1 - Math.pow(1 - t, 3)即本卡生长/表头滑入的缓动seg(t, t0, t1, ease)分段进度原语——t 在 [t0,t1] 内归一化后过 ease越界钳位所有动效的时间轴原语。卡片参数表里的一切归一化时值0.05 错峰、0.22 生长、0.14 蜕变都是喂给seg的入参useT()把useCurrentFrame()映射为 t∈[0,1]末帧恰为 1满足 Remotion 确定性渲染DesignStage480×270 设计坐标容器内容按设计坐标作画后等比放大铺满合成分辨率。配方卡参数表的所有数值都在这个坐标系下标定换算比例时数值不动——这正是卡片参数可移植到 1920×1080 工程的机制。它还提供raster: zoom选项用 CSSzoom布局级放大、字形按目标尺寸光栅化而非 transform scale解决 3D 下文字发糊问题对应references/pipeline.md阶段 5 的自检项。已知坑原卡四条完整继承共用 grow 曲线斜纹层和实心层宽度必须共用同一条grow曲线——分开算会在蜕变瞬间产生 1–2px 宽度跳变原位换皮的错觉立刻穿帮见上文源码对应实现70px 定宽标签列标签SERIES_A 等是占位词换项目真实指标名时注意标签列width: 70设计坐标 px超长会被裁——长指标名要么缩字号要么加宽但加宽会压缩柱区需按 480×270 坐标系目检数值是演示映射w*420接真数据时换成实际数值格式化函数但保持随 grow 滚动终值 ×grow的读数感——直接终值淡入会丢掉数据正在被算出来的过程感微颤频率与时长耦合微颤用全局 t 驱动sin(t*30)改动画总时长 dur 会改变颤动频率需重新目检。适配时长后t*30的 30 应按期望每秒振荡次数 × 30重算。在 video-shotcraft 流水线中的使用方式这张卡是配方卡 调校过的 demo 源码两层结构。按 SKILL.md 核心理念 6 与 references/pipeline.md 阶段 5 的硬规则使用流程是解析校验用 gallery/api/library.json 校验卡名与style-keyhatch-depth属data分类媒体为./media/hatch-depth.mp4卡片文档的静态副本在 gallery/source/hatch-depth.md读卡全文、定位 demo按卡片参考实现一节指向 demos/data/hatch-depth/ 读全文连同 demos/_fixtures/Motion.tsx 一起 copy 进目标 Remotion 工程demos/的多数 demo 为自包含灰阶 democopy 进项目即可跑见SKILL.md资产使用方式一节允许适配、命门不降档允许按目标产品做适配性改动换ROWS、换强调色、换字体但卡上已知坑/命门标注的参数共宽、错峰上限、蜕变窗口不得降档——凭卡名和理解新写放弃全部调校积累确定性渲染铁律全链路禁Date.now()/Math.random()本 demo 的随机性为零数据表与三角函数全部确定性符合仓库 vitest 覆盖的确定性断言标准静帧验收完成即npx remotion still src/index.ts Comp out/qa/hatch-depth.png --frameN按计划验收帧建议取首条蜕变帧 t0.5 与满幅定格帧肉眼检查共宽与数值对齐。音画侧本卡能量为中适合垫在功能段中部重音压 t0.5 首条蜕变可选一条assets/audio/sfx/light/或counter/类别的轻音效钉在数值弹出帧BGM 选型与 SFX 钉帧表规范见references/sound-design.md。来源与授权说明本卡属于仓库 2026-08 新增的 48 张镜头卡批次。按 references/shots/ATTRIBUTION.md 的逐卡来源映射hatch-depth研究自 x.com/amirdzm 公开发布的 motion 作品 b属于手法参考、独立重写、无原素材仓库不包含原片片段、截图或品牌元素实现中的文案、配色、UI 内容均为中性占位模板。该文件同时给出了法律边界说明——项目只研究动效手法时序结构、缓动思路、编排逻辑不复刻原片的具体表达。参考文件清单配方卡原文references/shots/data/hatch-depth.md参考实现demos/data/hatch-depth/HatchDepth.tsx动效公共件E/seg/useT/DesignStagedemos/_fixtures/Motion.tsx卡片库索引gallery/api/library.json、卡片静态副本 gallery/source/hatch-depth.md制作流水线卡片使用规则references/pipeline.md、SKILL.md批次授权说明references/shots/ATTRIBUTION.md样片海报gallery/media/poster/hatch-depth.jpg赞分享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点击查看免费下载相关推荐AReaL 分布式 RL 框架开发者协作规范全解基于 CLAUDE.md 的工程化实践指南AReaL 分布式 RL 框架开发者协作规范全解基于 CLAUDE.md 的工程化实践指南 本文以仓库根目录 CLAUDE.md https://link.gAI 技能媒体生成视频video-shotcraft 镜头卡实战用 SegmentedThumbHero 把 segmented control 的 thumb 位移拍成模式切换特写叙事video shotcraft 镜头卡实战用 SegmentedThumbHero 把 segmented control 的 thumb 位移拍成模式切换AI 技能媒体生成视频video-shotcraft 镜头卡解析用 Remotion 实现「首词推近落位组句」LeadWordZoomAssemble的字卡开场动画video shotcraft 镜头卡解析用 Remotion 实现「首词推近落位组句」LeadWordZoomAssemble的字卡开场动画 本篇技术指AI 技能媒体生成视频上一篇华硕笔记本色彩配置文件丢失G-Helper一键修复终极指南下一篇终极炉石传说模改插件HsMod3分钟快速安装与50实用功能详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考