video-shotcraft 镜头卡「Blur Slide」逐词入场详解：三通道同缓动收敛的默认级文字 Reveal

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点击查看免费下载导读Blur Slide模糊滑动是 video-shotcraft 仓库 typography 分类下的一张低能量默认镜头卡标题逐词入场位移 y、模糊 blur、透明度 opacity 三个通道共用同一个进度与同一条outCubic缓动同步收敛让文字从虚焦里浮出来而非滑进来顺便淡一下。本文以卡片文档 references/shots/typography/blur-slide.md 为主体结合参考实现 BlurSlide.tsx 与共享动效原语 Motion.tsx 展开读完你将掌握这套逐词 stagger 的完整参数体系、三通道绑定原理、主副标题错峰节奏以及把它集成进自己 Remotion 工程30fps / 1920×1080的完整做法。卡片定位文字 reveal 的默认解这张卡的意图非常明确没有奇观、没有机械感只是把词一个个柔和地放到位。它的专业感全部来自一件事——y、blur、opacity 三个通道共用同一个进度p、同一条缓动曲线因此观感是从虚焦里浮出来而不是滑进来顺便淡一下。卡片文档给出了三个关键定位判断适用场合几乎所有标题/副标题成对出现的场景——产品页首屏文案、章节小标题以及一切需要专业但不抢戏的默认文字 reveal能量等级低一次性收敛无峰值、无循环总时长约 3.8s114 帧 30fps职能分工这是低能量默认卡与 typography 类目下的乱码Scramble.tsx 一系、翻牌、滚轮等重手法属于不同职能。同一条片里可以也应该共存主角用重手法其余标题全用这张卡让位。从源码结构看这张卡隶属于 2026-08 并入的Motion 系 demo48 张卡之一共享依赖是_fixtures/Motion.tsx而非_fixtures/Fixtures.tsx见 demos/README.md。动效核心三通道共用一个p单词级进度与三通道绑定每个单词有一个独立的入场进度由seg分段进度原语生成const p seg(tLine, i * gap, i * gap 0.32, E.outCubic);即单词i的进度在行窗口内的[i·gap, i·gap0.32]区间从 0 归一化到 1再过E.outCubic缓动。三通道全部绑定同一个popacity: p, transform: translateY(${lerp(p, dy, 0)}px), filter: blur(${(1 - p) * 10}px),opacity p从 0 到 1translateY lerp(p, dy, 0)从dy默认 40px到 0即从下往上浮blur (1-p)·10px从 10px 到 0即从虚焦变清晰。源码级原语支撑seg与lerp、缓动表E均定义在 demos/_fixtures/Motion.tsxexport const lerp (t: number, a: number, b: number) a (b - a) * t; export const seg (t: number, t0: number, t1: number, ease E.linear) ease(Math.min(1, Math.max(0, (t - t0) / (t1 - t0))));seg把t在[t0, t1]内归一化并钳位到[0,1]后套用缓动——这是全部 Motion 系镜头卡的时间轴原语。E.outCubic的实现为1 - Math.pow(1 - t, 3)开局减速感平缓、接近结尾快速到位这正是柔和落位而非硬弹的来源。动画由useT()返回的归一化帧进度frame/(durationInFrames-1)驱动纯函数计算、无真随机满足 Remotion 逐帧确定性渲染要求demos/README.md 中有全帧 SSIM 验收说明。为什么三通道必须共用同一个 p文档的已知坑对此有硬性提醒三通道必须共用同一个p。如果分开写三条缓动哪怕曲线完全相同由于浮点路径与取整时机不同会出现位移到了但还糊着的错位柔和感立刻散掉。这是本卡与普通淡入上移组合的本质区别。主副标题时间窗与错峰节奏卡片在 114 帧总长中安排了两条时间窗行时间窗归一化 t换算帧113 帧总跨度窗口跨度词间 gap单词窗y 位移主标题seg(t, 0.06, 0.62)约 7f→71f64f0.055≈3.5f0.32≈20f40px副标题seg(t, 0.34, 0.9)约 39f→103f64f0.04≈2.5f0.32≈20f26px代码中的实际定义BlurSlide.tsx与此一一对应Line words{H1_WORDS} tLine{seg(t, 0.06, 0.62)} gap{0.055} dy{40} ... / Line words{H2_WORDS} tLine{seg(t, 0.34, 0.9)} gap{0.04} dy{26} ... /三个要点错峰而非排队副标题在约 39f 起手而主标题要到约 71f 才收完两段有32f 重叠。文档的表述很精辟——排队会读作两拍重叠才是一句话层级差靠幅度不靠时长副标题词间隔更密2.5f vs 3.5f、位移更小26px vs 40px两条窗口的跨度其实都是 64f——主副关系由位移幅度和字号字重承担而不是让副标题更慢字号对比 34px/800 对 14px/400颜色#eef1fa对#7d86a3字距-0.5px形成清晰的主次视觉层级。拆词不拆字词级 stagger 的语感来源本卡采用拆词不拆字的策略text.split( )后每词一个span行容器用gap: 0.32em撑开词距不依赖空格排版。文档给出的理由是逐字入场太碎词级才有念出来的语感。源码中Line组件的结构完全对应BlurSlide.tsxconst Line: React.FC{ words: string[]; tLine: number; gap: number; dy: number; style: React.CSSProperties } ({ words, tLine, gap, dy, style }) ( div style{{ display: flex, gap: 0.32em, ...style }} {words.map((w, i) { const p seg(tLine, i * gap, i * gap 0.32, E.outCubic); return span key{i} style{{ opacity: p, transform: translateY(${lerp(p, dy, 0)}px), filter: blur(${(1 - p) * 10}px) }}{w}/span; })} /div );组件在 480×270 的DesignStage设计坐标系下作画等比放大到合成分辨率参数表数值均以该坐标系标定改合成分辨率不需要动参数demos/README.md。因此占位文案为「主 4 词 / 副 5 词」Your headline goes here与Short supporting subtitle for placeholders换项目文案时词数要贴近。参数表完整继承与调节手感卡片文档给出的参数表是这张卡可调性的核心完整继承如下数值均在 480×270 设计坐标系下标定参数典型值调节手感词间 stagger主 0.055≈3.5f/ 副 0.04≈2.5f3–4f 是逐词的甜点2f 整行齐入没有 stagger8f 观众开始一个个数词单词入场窗0.32≈20fE.outCubic10f 读作硬弹30f 每个词都在慢慢浮整句拖沓y 位移主 40px / 副 26px主副不等幅是层级来源20px 位移无感60px 词从画外飞进来变成滑入blur 通道(1-p)·10px这一通道就是专业感删了退化成普通淡入上移18px 中间帧糊成色块主副错峰主 0.06–0.62 / 副 0.34–0.90重叠 32f 是一句话副标题起点推到 0.62 之后就读成两拍字号字重34px/800 对 14px/400差 2 倍以上才有主副关系副标题上 600 字重会和主标打架收尾 hold副标题 103f 收完尾部约 11f 静置静置 8f 观众还没读完就切了这是全片唯一的静态帧几个值得注意的手感推导blur 通道是专业感的来源删掉它本卡退化为普通淡入上移但超过 18px 时中间帧会糊成色块所以 10px 是个安全的甜点值y 位移有上下两个失效阈值低于 20px 无感高于 60px 会变成从画外飞进来的滑入——两种观感都不属于从虚焦里浮出来收尾静置是全片唯一静态帧约 11f 的完全静止让观众读完最后一词再切走低于 8f 会来不及读。已知坑换文案时的注意清单文档明确列出六个实战坑这里逐一保留参数是调校起点而非实战定稿demo 在灰阶/占位素材上调校通过首次实战必须以真实素材回验尤其注意 blur 通道在真实 UI 上可能更糊占位文案词数要贴近stagger 总长 gap × 词数。词数翻倍末词起点就往后挪一倍会被挤到窗口边缘甚至撞上收尾静置——超过 8 词应同步把 gap 压到 0.035三通道必须共用同一个p原因见上文动效核心分开写会破坏柔和感中文文案要手动切split( )在中文上得到一整块须自己按语义分段成 3–5 个 span别退化成逐字定位结构约束外层用flex居中列 gap:16px主副行高变化会带动整体重排——一次性入场场景无妨但别在这套结构上加会变宽的元素低能量卡的共存策略与本类乱码/翻牌/滚轮属于不同职能同片可以也应该共存主角用重手法其余标题全用本卡。参考实现与集成方式源码位置参考实现位于demos/typography/blur-slide/BlurSlide.tsx组件同时导出时长常量export const BLUR_SLIDE_DURATION 114; // 3800ms 30fps集成到 Remotion 工程按 demos/README.md 的使用方式把BlurSlide.tsx连同共享依赖_fixtures/Motion.tsxE 缓动表 / seg / lerp / useT / DesignStage一起 copy 进你的 Remotion 项目改好 import 路径注册成 Composition 即可运行import { BlurSlide, BLUR_SLIDE_DURATION } from ./blur-slide/BlurSlide; Composition idBlurSlide component{BlurSlide} durationInFrames{BLUR_SLIDE_DURATION} fps{30} width{1920} height{1080} /动画全部由归一化tuseT()驱动计算无真随机逐帧确定性渲染。若你的工程是 30fps / 1920×1080直接按上例注册即可若合成分辨率不同DesignStage会等比放大无需改动任何参数。验证与冒烟渲染该 demo 也纳入仓库的渲染冒烟管线assets/scripts/smoke-render-demos.py脚本扫描所有带_DURATION导出的 demo自动生成template/src/smoke-root.tsx并逐个remotion still渲染首帧断言输出非空、进程不崩。可以对单卡做子集冒烟python3 assets/scripts/smoke-render-demos.py --subset BlurSlide,Scramble--subset指向不存在的 demo 时脚本退出码为 1明确报错。此外所有 demo 需通过tsc --noEmit --strict严格编译demos/README.md。小结何时用这张卡Blur Slide 是一张存在感最低、正确性最高的默认文字 reveal三通道同缓动同步收敛、词级 stagger 短到恰好读出语感、主副标题 32f 重叠构成一句话。当一支片里已有乱码/翻牌/滚轮等重手法时其余标题都应当交给这张卡——它负责专业不负责抢戏。调参时记住四条主线词间 gap 的 3–4f 甜点、blur 通道的 10px 上限、主副不等幅的层级逻辑以及超过 8 词就把 gap 压到 0.035。赞分享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 的 BlurSlide 逐词入场动效三通道同步收敛的低能量文字 Reveal 实战指南video shotcraft 的 BlurSlide 逐词入场动效三通道同步收敛的低能量文字 Reveal 实战指南 本文以 video shotcraftAI 技能媒体生成视频video-shotcraft 镜头卡实战ring-diagram-annotation-reveal 同心环图解注释揭示动效video shotcraft 镜头卡实战ring diagram annotation reveal 同心环图解注释揭示动效 本篇以 video shotcAI 技能媒体生成视频video-shotcraft 的 skeleton-reveal 镜头卡草稿→骨架→内容三级显影的产品 UI 登场技法Remotion 实现video shotcraft 的 skeleton reveal 镜头卡草稿→骨架→内容三级显影的产品 UI 登场技法Remotion 实现 导读 skAI 技能媒体生成视频上一篇开源项目推荐cp-notebook下一篇Mindustry为什么这款开源塔防游戏能让自动化爱好者沉迷数百小时创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考