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 仓库中 research-card-stack-scroll 配方卡 展开完整拆解论文卡叠压滚流这一 UI 登场动效的帧级时间轴、六项动效核心、参数调节手感与已知坑并结合 ResearchCardStackScroll.tsx 源码给出可复现的 Remotion 实现证据。读完你将掌握如何用每 12 帧一张卡沿右下轴线飞入叠压的流水线语法把读了海量资料的抽象量级拍成持续吞吐的能力镜头以及如何安全地改参数、换文案、改时长而不破坏节奏。一、这张卡在讲什么把数量拍成吞吐量配方卡的适用场景写得很明确读了大量资料 / 处理了海量文档的量级交代以及研究类、检索类、批处理类产品的能力镜头。它面对的叙事问题是要说的是数量但一次把 13 张卡摆满画面会读成一堵墙观众看到的是一个静态的堆而不是数量本身。解法是把静态堆改成流水线卡一张一张进场每张都被读过——最上面一张永远是全文渲染的那一张标题 作者 摘要读完就沉进堆里变模糊只露出顶部标题条。观众感受到的是持续不断的吞吐量。这里有一个关键的速度参照设计背景横向 grid 必须与卡堆同速下移。配方卡明确指出没有这个 grid堆积会读成卡在原地缩小——物体只变大不移动方向感就丢了。整卡的规格frontmatter为时长约 4.8s144f 30fps能量定级中高匀速高频无爆发但持续压迫。二、帧级时间轴用真实帧号而非归一化 t配方卡的第一个设计原则是时间轴用真实帧号而非归一化 t。内部常量F 144整卡总帧数PER 12每 12 帧进一张卡一个节拍第 i 张卡的本地时间e t*144 - i*12源码中是e f - i * PER其中f t * F。一切编排入场、堆积、深度都以 12 帧的节拍为单位写死。这一层在 ResearchCardStackScroll.tsx 中被实现为常量F、PER、GAP 30、XOFF 9并在每张卡的map回调里用e f - i * PER计算本地帧。每张卡只依赖自己的本地帧号13 张卡共享同一套公式只是相位差i * PER——这是批量入场动效的标准写法。三、动效核心六件事在一个节拍器上咬合1. 入场6 帧短促动作提前 6 帧起飞入场进度p seg(clamp((e6)/6), 0, 1, E.outCubic)。注意起点是e -6卡在自己的节拍到达前 6 帧就开始飞配合translateY(-40→0)scale(0.94→1)。因为入场行程只有节拍的一半每张卡都能在下一张到来之前落定——画面里几乎不会出现两张同时在飞。2. 落位 squash1.6 帧的 y 轴压缩e ∈ [0, 1.6)时y 轴 scale 额外乘 0.97只压 1.6 帧。配方卡强调这个压缩短到读不出是变形只读作砸实了。源码里表现为squash e 0 e 1.6 ? 0.97 : 1并乘在 scale 的 y 分量上scale(lerp(p,0.94,1), lerp(p,0.94,1) * squash)。3. 堆积漂移沿右下轴线产生厚度落位后drift e/12 * 30每个节拍向下 30px、向右XOFF 9px形成微微向右下的轴线。这条轴线是厚度的来源——13 张卡不是同心叠放而是一叠有厚度的卡堆。源码中x (max(0,e)/PER) * XOFF、y lerp(p,-40,0) drift。4. 深度衰减三个节拍内糊到底depth min(1, drift/(30*3))——90px3 个节拍内衰减到底施加blur(depth*4)brightness(1-depth*0.25)。再往下用(drift - 30*3.2)/(30*1.6)把 opacity 拉到 0完成对离场卡的回收。因为衰减距离只有 3 个节拍画面里始终只有约 3 张卡是半清晰的其余都是糊掉的标题条。5. 焦点唯一正在读的那一张只有一张focus floor(f/12)只有i focus的卡渲染 body作者行 4 条摘要骨架线其余卡的 body 直接opacity: 0只留标题。这是每张都被读过的视觉保证——最上一张永远是全文渲染的那张。6. 背景 grid与卡堆严格同速背景 grid 的位移translateY((f/12 * 30 * S) % 24)与卡的 drift 共用同一个GAP30推导因此与卡堆严格同速对 24px 取模实现无缝循环。源码里用一条linear-gradient水平线 backgroundSize: 100% 24px实现S是逻辑坐标系到实际画布的缩放。四、参数表八项参数与调节手感配方卡给出了完整的参数表这里完整继承并补充源码实现中的对应取值参数典型值调节手感节拍PER12帧/张13 张12f 是紧但看得清的下限8f 标题来不及读20f 量级感垮掉变成逐张展示入场行程6 帧outCubic提前量 -6 帧行程只有节拍的一半 → 每张在下一张来之前已经落定行程 ≥ PER 时会有两张同时在飞入场位移/缩放translateY(-40→0)、scale 0.94→140px 相对 96px 卡高是小幅——卡是落进去不是飞进来缩放差只有 0.06再大就读作弹窗落位压缩1.6 帧y 轴 ×0.973% 是刚好能感知的量6% 或时长 3f 会看出橡皮变形堆积轴线每节拍 y30px、x9px9/30 的比值决定轴线斜度x 归零会变成正下方同心叠压厚度感消失深度衰减depth drift/90blur 0→4px、brightness 1→0.7590px3 个节拍内衰减完 → 画面里始终只有约 3 张是半清晰的衰减距离拉长会让下方糊卡堆太厚画面变脏回收窗drift 96px起淡出48px 内到 0回收太早会看到卡在画面中央消失太晚 13 张全在场DOM 与 blur 开销都上去内容坐标系逻辑 420×250整体scale(min(W/420, H/250))所有像素值写在逻辑坐标系里改画布尺寸不用重排卡 296×96、字号 9.5px 都是逻辑值其中内容坐标系在源码中的实现值得展开Motion.tsx 的DesignStage以 480×270 为设计坐标容器做等比放大本卡内部再以LW420, LH250、S Math.min(480/420, 270/250) 1.08建立逻辑画布。卡片实际尺寸CW296, CH96、标题字号9.5px、正文8px全部是逻辑值改画布尺寸只需调S无需重排任何布局。五、源码级实现细节Remotion确定性伪随机摘要骨架条的宽度4 条摘要骨架线的宽度由100 - k*11 - rand(i*5k)*12%给出。rand来自 Motion.tsx 的确定性伪随机实现sin(seed*127.1311.7)*43758.5453取小数部分与 Remotion 的random(seed)等价同种子跨帧、跨渲染可复现。这与 pipeline.md 的确定性渲染铁律一致禁Date.now()/Math.random()一切伪随机用固定种子从 index 派生。卡内布局左侧 3px 色条i % 4 1时用品牌橙#FF6A1F否则#2E2E2E——13 张卡里约每 4 张一根橙色给单调的深色堆一个节拍性的色彩呼吸标题条所有卡都渲染650 9.5px/1.35、#F0F0F0作者行A. Author, B. Writer, C. Reader · preprint:24xx编号由索引生成24${10i}.0${i%9}${i%7}深色卡INK(#1A1A1A)底 #2A2A2A描边 11px 圆角 0 14px 34px rgba(0,0,0,.22)投影压在#FAFAFA浅底上。渲染成本控制zIndex 按i递增、已回收卡 opacity 归 0、深度衰减在 90px 内完成——这些共同保证了最多时也只有约 3 张卡承受 blurbrightness 的 filter 开销且离场卡在 48px 窗内淡出卸载。六、已知坑改这张卡前必须知道的五件事配方卡的已知坑是多次实测裁决的沉淀改参数时必须逐条核对卡数与节拍绑定13 张 × 12 帧 156 帧 F144末两张在 t1 时仍在入场途中末帧不是干净的静态。要做定格结尾把卡数压到F/PER - 1以内12 帧节拍下 ≤11 张。focus 越界focus floor(f/12)在 f144 时等于 12恰好是最后一张但加卡数或改节拍后必须确认 focus 不会长期指向不存在的索引否则会出现没有任何一张是清晰的。时间常量写死全部时间常量建立在 144 帧假设上F144、frf/F。改时长必须同时改F否则节拍会随时长伸缩12 帧的紧凑感丢失。占位内容要替换13 条是真实感的论文标题占位、preprint:24xx编号由索引生成落地要换成项目真实文档标题rand(i*5k)生成的是确定性伪随机宽度不要换成 Math.random会破坏确定性渲染。深色卡是对比度的前提深色卡INK底 #2A2A2A描边压在#FAFAFA浅底上是这套对比度的前提卡色改浅后brightness(0.75)的深度衰减几乎看不出来需要改用 opacity 或灰度衰减。七、适用场景与流水线接入这张卡在仓库中有三处对应资产构成了配方卡 → Gallery 条目 → demo 源码的完整链路配方卡本体references/shots/ui-entrance/research-card-stack-scroll.md含完整 frontmatter名称、一句话、适用、时长、能量Gallery 条目gallery/api/library.json 中research-card-stack-scroll记录summary/use/intention/source 字段media 指向预览样片参考实现demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx。在 pipeline.md 的八阶段流水线中这张卡服务于阶段 2 功能到镜头映射扫描references/shots/卡片 frontmatter根据用途、能量、建议时长选卡并记录依据进入阶段 5 逐镜头实现时规则要求先用gallery/api/library.json校验卡名再读配方卡全文再按参考实现定位并读准确的 demo TSX——demo 代码是调校过的参数真相配方卡已知坑/命门标注的参数不得降档质量标准只升不降。接入新项目时把DesignStage、E、lerp、rand、seg、useT这几个公共件见 demos/_fixtures/Motion.tsx随 demo 一起复制即可demo 不依赖项目内其他模块可直接运行。参考实现路径配方卡references/shots/ui-entrance/research-card-stack-scroll.md参考实现demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx公共动效件E/lerp/rand/seg/useT/DesignStagedemos/_fixtures/Motion.tsxGallery 卡片库索引gallery/api/library.json制作流水线阶段 2/5 选卡与实现规则references/pipeline.md赞分享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点击查看免费下载相关推荐res-downloader 完整指南5 步嗅探并下载视频号无水印视频res downloader 完整指南5 步嗅探并下载视频号无水印视频 想把微信视频号里的视频保存成无水印原片res downloader 就是干这个的它AI 技能媒体生成视频video-shotcraft 镜头卡实战用 Remotion 实现 Card Stack 卡片堆叠与 3D 扇面展开动效video shotcraft 镜头卡实战用 Remotion 实现 Card Stack 卡片堆叠与 3D 扇面展开动效 导读 Card Stack卡片堆AI 技能媒体生成视频video-shotcraft list-stack-press 镜头卡深度拆解用 Remotion 实现堆叠有重量的列表卡入场动效video shotcraft list stack press 镜头卡深度拆解用 Remotion 实现堆叠有重量的列表卡入场动效 导读 本篇文章以 vAI 技能媒体生成视频上一篇Cryptomatte终极指南5分钟掌握智能ID遮罩提取技术下一篇Unreal Engine存档编辑终极指南用Rust工具轻松管理游戏进度创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 video-shotcraft 动效配方卡深度解析：research-card-stack-scroll 论文卡叠压滚流
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 仓库中 research-card-stack-scroll 配方卡 展开完整拆解论文卡叠压滚流这一 UI 登场动效的帧级时间轴、六项动效核心、参数调节手感与已知坑并结合 ResearchCardStackScroll.tsx 源码给出可复现的 Remotion 实现证据。读完你将掌握如何用每 12 帧一张卡沿右下轴线飞入叠压的流水线语法把读了海量资料的抽象量级拍成持续吞吐的能力镜头以及如何安全地改参数、换文案、改时长而不破坏节奏。一、这张卡在讲什么把数量拍成吞吐量配方卡的适用场景写得很明确读了大量资料 / 处理了海量文档的量级交代以及研究类、检索类、批处理类产品的能力镜头。它面对的叙事问题是要说的是数量但一次把 13 张卡摆满画面会读成一堵墙观众看到的是一个静态的堆而不是数量本身。解法是把静态堆改成流水线卡一张一张进场每张都被读过——最上面一张永远是全文渲染的那一张标题 作者 摘要读完就沉进堆里变模糊只露出顶部标题条。观众感受到的是持续不断的吞吐量。这里有一个关键的速度参照设计背景横向 grid 必须与卡堆同速下移。配方卡明确指出没有这个 grid堆积会读成卡在原地缩小——物体只变大不移动方向感就丢了。整卡的规格frontmatter为时长约 4.8s144f 30fps能量定级中高匀速高频无爆发但持续压迫。二、帧级时间轴用真实帧号而非归一化 t配方卡的第一个设计原则是时间轴用真实帧号而非归一化 t。内部常量F 144整卡总帧数PER 12每 12 帧进一张卡一个节拍第 i 张卡的本地时间e t*144 - i*12源码中是e f - i * PER其中f t * F。一切编排入场、堆积、深度都以 12 帧的节拍为单位写死。这一层在 ResearchCardStackScroll.tsx 中被实现为常量F、PER、GAP 30、XOFF 9并在每张卡的map回调里用e f - i * PER计算本地帧。每张卡只依赖自己的本地帧号13 张卡共享同一套公式只是相位差i * PER——这是批量入场动效的标准写法。三、动效核心六件事在一个节拍器上咬合1. 入场6 帧短促动作提前 6 帧起飞入场进度p seg(clamp((e6)/6), 0, 1, E.outCubic)。注意起点是e -6卡在自己的节拍到达前 6 帧就开始飞配合translateY(-40→0)scale(0.94→1)。因为入场行程只有节拍的一半每张卡都能在下一张到来之前落定——画面里几乎不会出现两张同时在飞。2. 落位 squash1.6 帧的 y 轴压缩e ∈ [0, 1.6)时y 轴 scale 额外乘 0.97只压 1.6 帧。配方卡强调这个压缩短到读不出是变形只读作砸实了。源码里表现为squash e 0 e 1.6 ? 0.97 : 1并乘在 scale 的 y 分量上scale(lerp(p,0.94,1), lerp(p,0.94,1) * squash)。3. 堆积漂移沿右下轴线产生厚度落位后drift e/12 * 30每个节拍向下 30px、向右XOFF 9px形成微微向右下的轴线。这条轴线是厚度的来源——13 张卡不是同心叠放而是一叠有厚度的卡堆。源码中x (max(0,e)/PER) * XOFF、y lerp(p,-40,0) drift。4. 深度衰减三个节拍内糊到底depth min(1, drift/(30*3))——90px3 个节拍内衰减到底施加blur(depth*4)brightness(1-depth*0.25)。再往下用(drift - 30*3.2)/(30*1.6)把 opacity 拉到 0完成对离场卡的回收。因为衰减距离只有 3 个节拍画面里始终只有约 3 张卡是半清晰的其余都是糊掉的标题条。5. 焦点唯一正在读的那一张只有一张focus floor(f/12)只有i focus的卡渲染 body作者行 4 条摘要骨架线其余卡的 body 直接opacity: 0只留标题。这是每张都被读过的视觉保证——最上一张永远是全文渲染的那张。6. 背景 grid与卡堆严格同速背景 grid 的位移translateY((f/12 * 30 * S) % 24)与卡的 drift 共用同一个GAP30推导因此与卡堆严格同速对 24px 取模实现无缝循环。源码里用一条linear-gradient水平线 backgroundSize: 100% 24px实现S是逻辑坐标系到实际画布的缩放。四、参数表八项参数与调节手感配方卡给出了完整的参数表这里完整继承并补充源码实现中的对应取值参数典型值调节手感节拍PER12帧/张13 张12f 是紧但看得清的下限8f 标题来不及读20f 量级感垮掉变成逐张展示入场行程6 帧outCubic提前量 -6 帧行程只有节拍的一半 → 每张在下一张来之前已经落定行程 ≥ PER 时会有两张同时在飞入场位移/缩放translateY(-40→0)、scale 0.94→140px 相对 96px 卡高是小幅——卡是落进去不是飞进来缩放差只有 0.06再大就读作弹窗落位压缩1.6 帧y 轴 ×0.973% 是刚好能感知的量6% 或时长 3f 会看出橡皮变形堆积轴线每节拍 y30px、x9px9/30 的比值决定轴线斜度x 归零会变成正下方同心叠压厚度感消失深度衰减depth drift/90blur 0→4px、brightness 1→0.7590px3 个节拍内衰减完 → 画面里始终只有约 3 张是半清晰的衰减距离拉长会让下方糊卡堆太厚画面变脏回收窗drift 96px起淡出48px 内到 0回收太早会看到卡在画面中央消失太晚 13 张全在场DOM 与 blur 开销都上去内容坐标系逻辑 420×250整体scale(min(W/420, H/250))所有像素值写在逻辑坐标系里改画布尺寸不用重排卡 296×96、字号 9.5px 都是逻辑值其中内容坐标系在源码中的实现值得展开Motion.tsx 的DesignStage以 480×270 为设计坐标容器做等比放大本卡内部再以LW420, LH250、S Math.min(480/420, 270/250) 1.08建立逻辑画布。卡片实际尺寸CW296, CH96、标题字号9.5px、正文8px全部是逻辑值改画布尺寸只需调S无需重排任何布局。五、源码级实现细节Remotion确定性伪随机摘要骨架条的宽度4 条摘要骨架线的宽度由100 - k*11 - rand(i*5k)*12%给出。rand来自 Motion.tsx 的确定性伪随机实现sin(seed*127.1311.7)*43758.5453取小数部分与 Remotion 的random(seed)等价同种子跨帧、跨渲染可复现。这与 pipeline.md 的确定性渲染铁律一致禁Date.now()/Math.random()一切伪随机用固定种子从 index 派生。卡内布局左侧 3px 色条i % 4 1时用品牌橙#FF6A1F否则#2E2E2E——13 张卡里约每 4 张一根橙色给单调的深色堆一个节拍性的色彩呼吸标题条所有卡都渲染650 9.5px/1.35、#F0F0F0作者行A. Author, B. Writer, C. Reader · preprint:24xx编号由索引生成24${10i}.0${i%9}${i%7}深色卡INK(#1A1A1A)底 #2A2A2A描边 11px 圆角 0 14px 34px rgba(0,0,0,.22)投影压在#FAFAFA浅底上。渲染成本控制zIndex 按i递增、已回收卡 opacity 归 0、深度衰减在 90px 内完成——这些共同保证了最多时也只有约 3 张卡承受 blurbrightness 的 filter 开销且离场卡在 48px 窗内淡出卸载。六、已知坑改这张卡前必须知道的五件事配方卡的已知坑是多次实测裁决的沉淀改参数时必须逐条核对卡数与节拍绑定13 张 × 12 帧 156 帧 F144末两张在 t1 时仍在入场途中末帧不是干净的静态。要做定格结尾把卡数压到F/PER - 1以内12 帧节拍下 ≤11 张。focus 越界focus floor(f/12)在 f144 时等于 12恰好是最后一张但加卡数或改节拍后必须确认 focus 不会长期指向不存在的索引否则会出现没有任何一张是清晰的。时间常量写死全部时间常量建立在 144 帧假设上F144、frf/F。改时长必须同时改F否则节拍会随时长伸缩12 帧的紧凑感丢失。占位内容要替换13 条是真实感的论文标题占位、preprint:24xx编号由索引生成落地要换成项目真实文档标题rand(i*5k)生成的是确定性伪随机宽度不要换成 Math.random会破坏确定性渲染。深色卡是对比度的前提深色卡INK底 #2A2A2A描边压在#FAFAFA浅底上是这套对比度的前提卡色改浅后brightness(0.75)的深度衰减几乎看不出来需要改用 opacity 或灰度衰减。七、适用场景与流水线接入这张卡在仓库中有三处对应资产构成了配方卡 → Gallery 条目 → demo 源码的完整链路配方卡本体references/shots/ui-entrance/research-card-stack-scroll.md含完整 frontmatter名称、一句话、适用、时长、能量Gallery 条目gallery/api/library.json 中research-card-stack-scroll记录summary/use/intention/source 字段media 指向预览样片参考实现demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx。在 pipeline.md 的八阶段流水线中这张卡服务于阶段 2 功能到镜头映射扫描references/shots/卡片 frontmatter根据用途、能量、建议时长选卡并记录依据进入阶段 5 逐镜头实现时规则要求先用gallery/api/library.json校验卡名再读配方卡全文再按参考实现定位并读准确的 demo TSX——demo 代码是调校过的参数真相配方卡已知坑/命门标注的参数不得降档质量标准只升不降。接入新项目时把DesignStage、E、lerp、rand、seg、useT这几个公共件见 demos/_fixtures/Motion.tsx随 demo 一起复制即可demo 不依赖项目内其他模块可直接运行。参考实现路径配方卡references/shots/ui-entrance/research-card-stack-scroll.md参考实现demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx公共动效件E/lerp/rand/seg/useT/DesignStagedemos/_fixtures/Motion.tsxGallery 卡片库索引gallery/api/library.json制作流水线阶段 2/5 选卡与实现规则references/pipeline.md赞分享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点击查看免费下载相关推荐res-downloader 完整指南5 步嗅探并下载视频号无水印视频res downloader 完整指南5 步嗅探并下载视频号无水印视频 想把微信视频号里的视频保存成无水印原片res downloader 就是干这个的它AI 技能媒体生成视频video-shotcraft 镜头卡实战用 Remotion 实现 Card Stack 卡片堆叠与 3D 扇面展开动效video shotcraft 镜头卡实战用 Remotion 实现 Card Stack 卡片堆叠与 3D 扇面展开动效 导读 Card Stack卡片堆AI 技能媒体生成视频video-shotcraft list-stack-press 镜头卡深度拆解用 Remotion 实现堆叠有重量的列表卡入场动效video shotcraft list stack press 镜头卡深度拆解用 Remotion 实现堆叠有重量的列表卡入场动效 导读 本篇文章以 vAI 技能媒体生成视频上一篇Cryptomatte终极指南5分钟掌握智能ID遮罩提取技术下一篇Unreal Engine存档编辑终极指南用Rust工具轻松管理游戏进度创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考