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点击查看免费下载本文以 references/shots/typography/word-relay-filmstrip.md 配方卡为核心逐项拆解左列证据胶片步进滚动 右侧衬线大词原位接力这一版式级图文对位镜头它的设计意图、两大命门、完整参数表以及 demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx 的源码级实现。读完你将掌握如何用 Remotion 复刻这种切词即换证的编辑部气质镜头并能直接套用到Computer researches / builds / codes式的产品能力枚举、作品集案例流与产品多场景巡礼段落。卡片定位它是一张讲什么的镜头卡在 video-shotcraft 的 157 张配方卡体系中word-relay-filmstrip属于 typography 类别同时挂ui-entrance标签见 gallery/api/library.json 中对应记录。卡片的一句话定义是左列黑白相间等高页面卡步进滚动、右侧衬线大词原位接力名词恒定 动词轮换——切词瞬间才滚动一格词块垂直中心与当前页面卡中点精确对齐。它要解决的典型文案结构是一个主体 × 多种能力的枚举段主体名词恒定如 Computer能力动词轮换researches → builds → codes。卡片 frontmatter 明确给出的适用场景有三类枚举段一个主体 × 多种能力如 Computer researches / builds / codes作品集 / 案例流展示多个案例以胶片形式纵向排列逐一成为大词的证据产品多场景巡礼同一个产品在不同场景下的能力巡礼。时长预算每词期约 1.5–2s × 3–4 词全段 5–7s。能量定位中低——编辑部气质节奏不靠速度而靠切词那一刻的咔哒感。原片出处perplexity-promo.mp4 约 76–90s 处demo 是依据该参考片逐帧量取后复刻的调校版本。设计意图文字与画面互为注脚这张卡的核心叙事结构是图文对位左边是证据一列纵向排列的页面截图胶片右边是论点一个大号衬线词。两者通过一个机械动作绑定动词换一次胶片就步进一格给出新证据——文字与画面互为注脚。观众先看到动词变化视线随即被胶片滚动带向下一张证据形成论点提出 → 证据落定的阅读节奏而非单纯的文字轮换。设计上存在两个命门违反即整卡失效步进制左列平时必须完全静止只在切词瞬间滚动一格。滚动在这里承担的是换证据的机械动作语义一旦变成持续滚动左列就会沦为背景装饰切词瞬间的咔哒感随之消失。卡片原文将其表述为持续滚动会让左列沦为背景装饰、切词失去咔哒感。对齐大词块的垂直中心必须与当前页面卡的中点精确对齐像素级。这是编辑部严谨感的视觉根基——歪了整个版式的编辑部严谨感就塌了。这两条命门不仅是设计原则也直接决定了下方参数表中多个参数的调节方向。动效核心拆解左列步进式滚动胶片页面卡等高纵向排列黑白深浅强制相间以凸显滚动步进——同色系或不等高都会让步进一格读不出来滚动只在切词窗口内发生采用 ease-in-out 缓动恰好滚动一卡高卡高 间距其余时间零位移。demo 中六张卡片按DarkArticle → LightMedal → DarkMri → LightTable → DarkStats → LightPortfolio固定顺序排布奇偶位置强制黑白交替详见下文源码解析。右列原位接力先出后进右侧是衬线体Didot 类两行排版第一行主体名词恒定demo 中为 Computer第二行动词原位接力旧词灰化淡出先出新词落位后进。接力有严格次序先出后进不许叠影。判例记录在案v2 版本因叠影出现 resebuilds新旧词同屏交叠的残影被抓出返工。词与词之间不做位移全部在原位通过透明度与颜色黑→灰→透明完成交接。像素级对齐词块总高的垂直中心 当前卡顶 卡高/2。demo 在 1080p 下的实测值为y540精确到个位像素卡顶 y275 卡高 530/2。用户对这张卡的单点反馈原文是文字高度和中间的页面中点要对齐实测偏差 8px 即可感知。滚动与切词同步滚动与切词的帧级绑定关系滚动起点 旧词开始灰化即切点前约 14 帧滚动终点 新词落稳。也就是说左列的滚动窗口与右列的词交接窗口完全同步——观众看到旧词变灰的瞬间胶片开始滚动一格新词落定时滚动恰好完成。参数表完整继承与调校手感参数典型值调节手感页面卡等高530px1080p、黑白相间、约半屏宽不等高/同色系读不出步进卡太窄失去证据分量词期~45–60f/词40f 读不完词胶片看不清词期不必均匀滚动窗口~12f ease-in-out恰一卡高持续滚动命门违例滚过头/不足读作机械故障词接力旧词 4–6f 灰化淡出 → 新词 6–8f 落位同帧交叉必叠影间隙 10f 读作断片垂直对齐词块中心当前卡中点像素级用户单点意见文字高度和中间的页面中点要对齐差 8px 可感字体衬线 Didot 类、动词字重比名词轻或同无衬线会丢编辑部气质几个值得展开的调校细节词期不必均匀demo 的切词帧为 14 / 62 / 108即第 1 词驻留 48f、第 2 词驻留 46f——不是节拍器式的均匀停留这样更接近人读词的自然呼吸滚动窗口的恰一卡高demo 用STEP CARD_H GAP精确控制单次步进量任何滚过头/不足都会被观众读作机械故障字体栈demo 采用Didot, Bodoni 72, Playfair Display, Georgia, serif字号 116px、字重 400动词与名词字重一致比名词轻或同均可换成无衬线会直接丢掉编辑部气质。源码实现深度解析WordRelayFilmstrip.tsx参考实现位于 demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx当前为v3版本。文件头注释记录了版本沿革v2 依据参考片截图perplexity-promo017 张重做布局v3 完成批次 12 的单点微调——把右侧大词块的垂直中心从 top 462 修正到 402以对齐当前页面卡的垂直中点 y540。以下按模块拆解其实现原理。确定性渲染mulberry32 种子随机demo 没有使用任何无参随机所有卡片内容由mulberry32(seed)种子随机函数生成卡片种子为(i 1) * 733。这与 references/pipeline.md 阶段 5 的确定性渲染铁律一致——禁Date.now()/Math.random()一切伪随机用固定种子保证逐帧可复现、渲染间零抖动。卡集合与黑白相间关键常量const CARD_W 940; // 卡宽约半屏1080p 全宽 1920 const CARD_H 530; // 卡高 const GAP 105; // 卡间距 const STEP CARD_H GAP; // 单次步进量六张卡片严格奇偶交替DarkArticle深色文章页、LightMedal浅色奖牌/按钮页、DarkMri深色 MRI 界面、LightTable浅色表格页、DarkStats深色数据统计、LightPortfolio浅色作品集网格。卡片内部全部用 CSS 块模拟真实页面元素导航栏、搜索框、列表行、图表、卡片网格等是灰阶/占位示意而非真实截图——这一点在已知坑部分有专门交代。步进滚动interpolate easeInOutCubic滚动实现的核心逻辑对每个切词窗口[s, s SW_DUR]用interpolate把帧映射到 0→1两侧clamp截断再套easeInOutCubicp 0.5 ? 4*p³ : 1-(-2p2)³/2得到本窗口的步进进度累加后乘以STEP得到总位移窗口之外进度被 clamp 在 0/1位移完全静止——这正是平时静止、只在切词窗口内滚一格的实现机制窗口内恰好滚动一个STEP一卡高 间距缓动对称平滑。注意一个参数细节卡片参数表的滚动窗口 ~12f是配方卡的典型值demo 实际使用SW_DUR 16帧切词帧SWITCHES [14, 62, 108]即 14–30f / 62–78f / 108–124f 三个滚动窗口。实战中 12–16f 区间都是合理起点关键是窗口外零位移 窗口内恰一卡高两条硬约束。卡片铺设采用三组循环复制rep -1, 0, 1并按y 275 i*STEP rep*total - scroll定位total CARDS.length * STEP配合y 1200 || y -CARD_H - 120的裁剪实现任意滚动相位下画面始终有卡、且滚动可无缝循环。词生命周期先出后进不叠影右侧词行容器高 140px动词逐个渲染。每个词的生命周期被拆成四段见 WordRelayFilmstrip.tsx入场淡入黑字新词在切点后 7 帧才开始淡入interpolate(frame, [sIn7, sInSW_DUR], [0,1])——刻意延后入场避免与旧词叠影常驻黑保持纯黑rgb(25,25,25)附近灰化切点前 14 帧开始interpolate(frame, [sOut-14, sOut-2], [0,1])到切点前 2 帧已完全变灰——这是旧词灰化阶段也是滚动启动的信号淡出切点起前半窗口内出完interpolate(frame, [sOut, sOut8], [1,0])。透明度由平滑函数smooth(x) x²(3-2x)对入场/出场分别平滑后相乘灰化用smooth(grey)在#191919与#9d988e之间插值颜色RGB 从 0x19 插到 0x9d/0x98/0x8e。代码注释点明参考片截图 4/6 捕捉到的正是旧词已灰、新词未现的中间态——这是原片真实的交接节奏也是先出后进判例的来源。对齐公式top 540 − 277/2 ≈ 402v3 的对齐计算源码 L291-L297词块总高 ≈ Computer 行116px × lineHeight 1.18 ≈ 137px 词行容器 140px 277px当前页面卡中点 y 卡顶 275 卡高 530/2 540词块 top 540 − 277/2 ≈402。这就是像素级对齐的落地公式把两行总高的中心钉在卡片中点而不是某一行对齐卡片边缘。与相邻卡片的边界卡片文档专门划清了它与两张相邻卡片的分工实战选卡时不要混淆与 text-column-converge 的分工见 references/shots/typography/text-column-converge.md那张是左右两词对峙、最后一词才唯一一次合拢的揭晓戏收尾揭晓型文字卡本卡是纵向证据流 原位接力——没有合拢、没有揭晓只有切词换证据的机械步进。若段落没有合拢揭晓的收束诉求就不该用 text-column-converge与 pill-slot-cycle 的分工见 references/shots/typography/pill-slot-cycle.md那张是胶囊槽位里整词级老虎机式轮换属于** UI 元素级轮换句干钉死、槽内换 pill本卡是版式级**的图文对位系统——左列一整屏证据胶片 右侧版式级大词两者视觉层级完全不同。pill-slot-cycle 适合一句话卖点 多个动词短语而本卡适合一列真实产品页面 主体能力枚举。已知坑与实战调校路径卡片文档明确列出四类已知坑直接决定实战产出质量参数是调校起点不是实战定稿demo 全部在灰阶/占位素材上调校通过6 张卡片均为 CSS 示意块首次实战必须以真实素材回验——所有时值、字号、间距参数都可能需要按真实截图密度微调与 text-column-converge / pill-slot-cycle 的分工见上节选卡前先判断段落结构避免三张卡在同一个片子中功能重叠实战素材要求页面卡应使用真实截图demo 为灰条示意与真实页面的残余差距已知截图亮度要人工分档保证黑白深浅相间可读——真实页面亮度相近时相间信息会消失步进感也随之消失对齐的验收口径偏差 8px 用户即可感知静帧验收时必须逐像素核对词块中心与当前卡中点。在八阶段流水线中落地这张卡在制作流水线中的位置非常明确见 references/pipeline.md阶段 2功能到镜头映射扫描references/shots/全部卡片 frontmatter按适用 / 能量 / 建议时长 / 限制 / 所需页面状态为能力枚举类功能选择本卡阶段 5逐镜头实现先读配方卡全文 → 按参考实现定位并读 demo TSX 全文 → 把 assets/lib/ 对应组件 copy 进项目。流水线强调demo 代码是调校过的参数真相——缓动、时值配比、摘罩时机、已知坑的规避写法都在里面允许做适配性改动但配方卡已知坑/命门标注的参数不得降档静帧验收每镜头用npx remotion still src/index.ts Comp out/qa/name.png --frameN抽 2 个验收帧号肉眼自检重点核对切词瞬间旧词灰化 滚动起点与落稳瞬间新词落位 滚动终点两帧的同步与对齐交付接口按 references/workbench.md 把文案/颜色/字号/位置做成带默认值的 props、节奏命门保持常量交付前cd workbench npm run parity证明拆解无损。一句话总结这张卡的实战要点左列平时纹丝不动、只在切词窗口内 ease-in-out 恰好滚一卡高右侧旧词先灰化淡出、新词延后落位词块总高的垂直中心与当前页面卡中点像素级对齐——满足这三条你就复刻出了Computer researches / builds / codes式证据链镜头的全部精髓。赞分享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 镜头配方 word-relay-geometry三点式利益陈述的一词一世界几何接力video shotcraft 镜头配方 word relay geometry三点式利益陈述的一词一世界几何接力 本篇基于 video shotcrafAI 技能媒体生成视频video-shotcraft 镜头卡实战用 SegmentedThumbHero 把 segmented control 的 thumb 位移拍成模式切换特写叙事video shotcraft 镜头卡实战用 SegmentedThumbHero 把 segmented control 的 thumb 位移拍成模式切换AI 技能媒体生成视频video-shotcraft 镜头卡 hatch-depth 解析用 Remotion 把斜纹占位条原位换皮成真数据条形图video shotcraft 镜头卡 hatch depth 解析用 Remotion 把斜纹占位条原位换皮成真数据条形图 本文基于 video shoAI 技能媒体生成视频上一篇3步把B站番剧下载进自建媒体库的BiliTools使用指南下一篇mini.nvim 文本编辑操作符实战指南mini.operators 五大操作符配置与源码解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考