Remotion 程序化视频动画引擎

你要解决什么问题

用代码生成视频这件事，最容易翻车的地方不是「画不出来」，而是「时间轴对不上」。一个 10 秒的开场动画，帧率写成 25 而合成声明 30，结尾就凭空少一段；字幕从 .srt 导进来没和音频对齐，逐词高亮永远慢半拍；字体没等加载完就开始渲染，标题第一帧就是方框。这些坑的共同点是：它们不会报错，只会安静地产出一版不能用的片子。

@kunlungrowth/kg-remotion 想解决的就是这件事——把 Remotion 的惯用法前置成一套约束，让你在写下第一行 <Composition> 之前，就已经把时长、帧率、资源加载、文本溢出这些变量想清楚了。

它怎么工作

这个技能把自己定位成一个 Remotion 视频工程师，而不是一个代码片段生成器。核心做法是把流程拆成几个必须过的步骤：

• 先识别项目，再动手：确认目录里有 remotion.config.ts 或 remotion-videos/，否则整套假设都不成立。
• 先定义合成，再写动画：id、durationInFrames、fps、width/height 四要素确定后，时间轴才有基准。时长需要按 props 推导时，走 calculateMetadata 动态计算，而不是拍脑袋写死。
• 动画先定起止帧：插值曲线用 linear / easeInOut，弹性效果用 spring，每段动画的起始帧、结束帧、延迟显式声明，避免出现「看起来动了但说不清动了多少」的中间态。
• 资源加载前置：图片走 <Img>，音视频组件要处理裁剪、音量、倍速、循环；字体必须在渲染文字前加载完成。
• 文本先测量再排版：渲染前先量尺寸，做自适应与溢出检查，打字机、逐词高亮这类文本动画才有可靠基础。
• 序列与转场显式编排：用 delay / trim 控制素材出场顺序，场景衔接用转场模式而非隐式堆叠。
• 字幕走专用管线：.srt 导入后由 @remotion/captions 渲染 TikTok 风格的分页与逐词高亮；没有字幕文件时先转写音频再生成。
• 参数化用 Zod 收口：propsSchema 校验输入，合成才能被复用；最后用解码检查确认浏览器能否解码目标视频，并用取帧、取尺寸工具核对素材。

它的输出分两部分：一段结构化的 RemotionComposition，包含合成参数、序列规划和是否含字幕；后面跟一份改进建议，专门挑时长合理性、文字溢出风险、资源预加载、字幕同步这几类问题。

适用边界

这套方法的前提是「程序化」——视频由代码和参数生成，改一个 prop 就能产出新版本。如果你的需求是拿起一段现成素材做裁剪、调色、拼接，用常规剪辑软件更直接，套这套流程反而重。另外，涉及第三方素材时版权以官方授权为准，技能本身不处理授权问题。

典型场景

• 为产品发布做一个参数化开场动画，标题和日期由 props 注入
• 给播客或访谈音频批量生成带逐词高亮字幕的切片
• 在 Remotion 里画数据图表、地图或 3D 场景，并和叙事时间轴绑定

注意点

• 不要跳过 calculateMetadata 直接写死帧数，动态时长的合成一旦写死，改 props 就对不上
• 字幕不是「贴上去」的，它依赖音频时间轴，没有音频或没有转写结果时，逐词高亮无从谈起
• 字体加载是异步的，<Img> 和字体没就绪就开始渲染，产出的是缺字画面而不是错误信息