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 镜头卡库中particle-sand-fill粒子落砂成柱的完整配方它如何用方点粒子的重力坠落与逐层堆积替代表柱状图传统的长高入场以及参考实现中闭式预解析、逐帧确定性这一 Remotion 渲染铁律的具体落地方式。读完后你能掌握这张卡的参数调校逻辑、可直接复用的源码结构以及把它搬进自己 Remotion 项目时的依赖与验收流程。一、镜头卡定位什么时候该用它particle-sand-fill是 镜头卡 库共 150 张中属于data数据可视化品类的一张构筑型入场卡其 frontmatter 给出的元信息如下字段值一句话粒子落斗成柱——柱状图不长高而是下雨下出来方点粒子逐颗坠落堆积成柱堆满凝成实体 数值弹出适用柱状图/量级对比入场讲积累/汇聚语义的数据段落时长4–5s能量中高构筑感入场标签effects参考实现ParticleSandFill.tsx该卡同时被收录进 Gallery 的机器可读索引 library.json卡名particle-sand-fill英文描述 Chart columns form from falling square particles, solidify when full, and finish with a value pop.按 制作流水线 阶段 2 的工作方式先扫references/shots/全部卡片 frontmatter 按用途/能量/时长选卡再完整读卡全文并按参考实现定位准确 demo 源码。这张卡的分工边界在卡文中有明确交代——与同目录下 chart-live-moves 中的unit-dot-swarm-regroup点群平面迁徙聚形相比那是同一批点改队形这是落体材料筑成图形一个描述迁徙/重组一个描述从无到有攒出来。二、设计意图从长高动画到落体堆积原卡的意图章节把动作语法讲得很具体每根柱上方下一场方块雨粒子逐颗坠落重力加速触堆积面即停并做 15% 单次回弹一层压一层堆到目标高度后粒子面淡出、换实体柱顶部数值标签弹出。核心叙事效果是——数据的量从抽象的坐标位移变成看得见的一颗一颗攒出来。这个语义判断直接决定了三个不可降档的设计约束后面会看到它们在源码里如何兑现落体而不是补间柱体高度不由height属性的缓动驱动而是由每颗粒子的真实坠距反解出的落地帧驱动视觉上就是下雨回弹只弹一次无回弹读作贴图没有落地物理感多次回弹拖节奏必须凝成实体收尾粒子态直接定格会显脏交接完成粒子面淡出到 0后整体卸载粒子层只留实体柱 标签达成真静止。三、参数表典型值与调节手感原卡给出的调校参数源自灰阶占位素材上的调校轮次参数典型值调节手感粒径14px 方点词汇原案 4px 不可感QA 中加码 3.5 倍每柱粒子数~50 颗太少堆积感稀疏太多单颗不可辨坠落重力加速落地帧闭式预解析堆积高度已落数×粒径禁真碰撞模拟回弹触面 15% 单次回弹无回弹读作贴图多次回弹拖节奏柱间错峰6f 逐柱启动齐落读作机械错峰有雨势推移感收束堆满→粒子面淡出→实体柱标签 back-out 弹出粒子态直接定格显脏必须凝成实体注意每柱 ~50 颗是卡文的量级描述参考实现中因粒径放大到 14px、柱高 182–336px实际单柱颗粒数在 117–216 颗之间太少/太多的手感描述在放大粒度后依然成立但实战时应以渲染产物为准回验见下文已知坑。四、源码解析闭式预解析如何保证帧确定性参考实现 ParticleSandFill.tsx 是一个 1920×1080、纯 DOM 绝对定位的 Remotion 组件只依赖remotion的useCurrentFrame/interpolate/Easing外加灰阶占位素材包 Fixtures.tsx提供G调色板与TitleBlock。整个实现的关键都集中在头部的常量区与两个纯函数4.1 常量与几何预算const GRAIN 14; // 方点边长宁大勿小4px 在 1080p 卡内不可感加码到 14 const PER_LAYER 9; // 每层 9 颗 → 柱宽 126px const BAR_W GRAIN * PER_LAYER; const DROP_FROM 230; // 距各自落点上方 ~230px 起落 const GRAV 1.6; // px/f² const STAGGER 6; // 各柱错峰启动 const RATE 0.28; // 颗间出发间隔帧——最高柱 216 颗需 ~60f 发完全局 f120 内收束注释里藏着两条调校结论粒径宁大勿小对应参数表4px 不可感QA 加码 3.5 倍以及RATE的取值来自全局收束约束——最高柱 216 颗按 0.28f 间隔发出需约 60 帧整段预算 120 帧4s 30fps内必须收完。改参数时这两个约束单颗可辨 全片收束帧数是互相牵制的。4.2 出发帧与落地帧全部闭式可算const frac (x: number) x - Math.floor(x); const rnd (i: number, salt: number) frac(Math.sin(i * 12.9898 salt * 78.233) * 43758.5453); // … const fallTime (dist: number) Math.sqrt((2 * dist) / GRAV); const departOf (bar: number, i: number) 8 bar * STAGGER i * RATE rnd(i, bar * 7 1) * 1.5;这三行是整张卡的确定性引擎rnd(i, salt)是一个 sin 散列伪随机无Math.random()由粒子 index 与盐值派生任何两帧、任何两次渲染算出的抖动值完全一致。这正是 制作流水线 阶段 5 的确定性渲染铁律——禁Date.now()/Math.random()伪随机一律用固定种子、seed 从 index 派生departOf把每颗的出发帧写成(bar, i)的纯函数全局 8f 起跳 柱间STAGGER6f错峰 颗间RATE0.28f间隔 1.5f 散列抖动。参数表里柱间错峰 6f 逐柱启动就是这里的bar * STAGGERfallTime是匀加速落体的解析解t sqrt(2d/g)坠距d与重力GRAV都是常量所以每颗粒子的落地帧在编译期就能算出。4.3 堆积面用已落数×粒径代替碰撞模拟const layer Math.floor(i / PER_LAYER); const col i % PER_LAYER; const targetTop PLOT_BOTTOM - (layer 1) * GRAIN; // 闭式堆积面粒子按 index 顺序逐层填充第 k 层 9 颗横排第 k 层的顶面就是基线 - (k1)×GRAIN。因为同层粒子共享同一个堆积面不存在粒子间相互碰撞落点只是层索引的算术运算。这是参数表中堆积高度已落数×粒径禁真碰撞模拟的直接实现一旦引入真实碰撞落地时刻会依赖逐帧状态累积帧确定性立刻被打破。坠落与回弹的逐帧位置也全是闭式分段函数const age frame - depart; // 出发后已过帧数 if (age 0) return null; // 未出发不渲染 const tLand fallTime(dist); let top: number; if (age tLand) { top startTop 0.5 * GRAV * age * age; // 坠落段匀加速位移 } else { const ba age - tLand; const bounce ba 6 ? Math.sin((ba / 6) * Math.PI) * GRAIN * 2 * 0.15 * (1 rnd(i, b * 13 9)) : 0; top targetTop - bounce; // 落地后6f 内单次半正弦回弹幅度 ~15% 粒径 }回弹是 6 帧内一个半正弦包络峰值幅度约为GRAIN × 2 × 0.15对应触面 15% 单次回弹且每颗的幅度再乘一个(1 rnd(…))的散列扰动避免回弹整齐划一。4.4 收束交接粒子面淡出 → 实体柱 标签弹出每根柱的堆满帧同样闭式预解析末颗indexn-1出发后仍要坠落约DROP_FROM的距离所以lastLand departOf(b, n-1) fallTime(DROP_FROM)再留 7 帧给回弹收完doneAt之后进入交接const solidOp interpolate(frame, [doneAt, doneAt 10], [0, 1], { …clamp }); // 实体柱淡入 10f const labelScale interpolate(frame, [doneAt 6, doneAt 18], [0, 1], { easing: Easing.out(Easing.back(2.2)), …clamp }); // 标签 back-out 弹出实体柱与粒子面共用同一几何left、PLOT_BOTTOM - bar.h、BAR_W、bar.h实体柱以solidOp淡入、粒子层 opacity 取1 - solidOp淡出交叉重叠完成凝成实体的视觉切换数值标签用Easing.out(Easing.back(2.2))做 scale 0→1即参数表里的back-out 弹出粒子层整体包在{solidOp 1 …}里——交接完成即条件卸载全部 DOM 节点画面进入无动画的真静止实现头部注释要求真静止 ≥35f符合 pipeline 阶段 3批量动效收尾 0.5s 静止的帧预算原则。4.5 高亮策略实现中第 2 根柱整体着琥珀色AMBER #b45309其余柱中约 18% 的粒子随机混色rnd(i, b*137) 0.18用极少量色彩打破灰阶占位素材的单调同时保证主角柱的视线引导——这是 demo 在灰阶调校轮次里可用的最小高亮手段实战时应替换为产品色板。五、已知坑与使用边界原卡全文继承原卡已知坑一节逐条列出实战时逐条核对参数是调校起点非实战定稿demo 在灰阶/占位素材上调校通过首次实战须以真实素材回验换产品色板、真实数值后重新看节奏帧确定性前提落地帧全部闭式预解析每颗粒子的落点/落帧编译期可算禁逐帧状态累积——改写此卡时不要引入useRef存逐帧位置或Math.random()量级上限只适合 3–5 根柱的量级对比十几根柱的密集图表用常规入场雨帘太多读作噪声方向语义不可反转这是构筑从无到有堆出图形不是破坏把完整图形打碎——与碎块解体否决判例的界限在于方向语义相反不要做反向播放变体即不要用反向 scrub 实现柱体崩解成粒子;声音设计细密颗粒落地声铺底每柱堆满一声轻叩标签弹出一声 tick。按 sound-design 的词汇表落地类音效从assets/audio/sfx/impact/、细密铺底可看data/或counter/类目挑选SFX 钉帧表里from一律写相对表达式如SHOTS.x.from offset而非裸帧号。六、如何使用把 demo 搬进你的 Remotion 项目按 demos/README.md 的约定本 demo 的使用方式与其他data类卡一致copy 源码把 ParticleSandFill.tsx 复制进你自己的 Remotion 项目30fps / 1920×1080同时带上它唯一的共享依赖 Fixtures.tsxG调色板 TitleBlock并改掉import { G, TitleBlock } from ../../_fixtures/Fixtures的相对路径。该组件不依赖PageCam2D.tsx也不需要remotion/motion-blur注册 Composition组件本身是纯帧驱动useCurrentFrame注册时按卡的 4–5s 建议给durationInFrames{120}实现按全局 f120 收束标定起fps{30} width{1920} height{1080}接入真实数据BARS数组是唯一的数据入口cx柱心、h目标高度、label顶标文案layers与n由h / GRAIN自动派生改数据不需要动动画逻辑。注意改柱高会同时改变每柱颗粒数与lastLand仍要确认全片在预算帧数内收束doneAt之后留出足够静止帧验收流程按 pipeline 阶段 5 的定式写完即npx remotion still src/index.ts ParticleSandFill out/qa/particle-sand-fill.png --frameN抽雨势最密与实体凝成两个验收帧肉眼检查再整片渲染回看本仓库 CI 侧还有两道对应闸门可参考——所有demos/**/*.tsx走tsc --noEmit --strict严格编译以及 smoke-render-demos.py 对带时长导出的 demo 自动渲染首帧做冒烟本组件若需纳入该脚本需按 demos/README.md 的约定补一个PARTICLE_SAND_FILL_DURATION导出。七、小结particle-sand-fill这张卡的完整链路是用落体堆积的构筑语义替换长高补间的柱状图入场用GRAIN / GRAV / STAGGER / RATE四个常量 sin 散列伪随机把每一颗方点的出发帧、落点、落地帧全部闭式预解析从而在 120 帧预算内同时满足单颗可辨、雨势推移、单次回弹与实体凝成并以条件卸载保证结尾真静止。它展示了 Remotion 数据镜头的一个通用方法论——把物理过程写成纯函数而不是模拟循环帧确定性由此成为可渲染、可验收、可回滚的工程属性。赞分享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点击查看免费下载相关推荐Ant Design图表集成实战折线图、柱状图与饼图实现Ant Design图表集成实战折线图、柱状图与饼图实现 Ant Design作为企业级UI设计语言和React UI库提供了丰富的组件生态。在数据可视化方前端UI组件设计系统WSABuilds 安装实战在 Windows 10/11 上运行完整安卓子系统的 4 步路径WSABuilds 安装实战在 Windows 10/11 上运行完整安卓子系统的 4 步路径 想在电脑上直接装几个安卓应用搜到的资料却只有两类官方 WS开发工具F2 柱状图实战指南用 AntV F2 在移动端绘制基础柱状图与区间柱状图F2 柱状图实战指南用 AntV F2 在移动端绘制基础柱状图与区间柱状图 本篇技术指南聚焦 AntV F2 移动端图表库中最基础的图形语法——柱状图Bar数据可视化前端上一篇WTF-Solidity 函数选择器Function Selector深度解析从 calldata 到 selector 调用下一篇三步解锁隐藏功能让小米智能音箱变身全能音乐管家创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
