用途:用 Remotion 把 React 组件渲染成视频,制作标题卡、下三分之一字幕条、Logo 动画、徽章、数据揭示等动效图形。组件通过 useCurrentFrame() 得知当前帧,动画是帧号的纯函数,无时间线与关键帧 UI,因此图形可数据驱动、可复用,并支持真实 alpha 通道。
主要能力与要点:先诊断再装饰——图形“发平”常是真实缺陷,例如 interpolate(frame,[0,60],[0,12400]) 未加 clamp,Remotion 默认外推,数字最终变成 30.793 而非 12.400。应检查第 0 帧、中间帧与 durationInFrames-1 帧的实际计算值,再美化。验证用静帧:npx remotion still <CompId> out/check.png --frame=45,检查入场中段、高潮、保持中段、退场中段,并实际看图;alpha 用 Studio 棋盘格确认。若工具链无法运行,应在总结中明确说明“从未执行过”。
制作规范:完整的进入→保持→退出,第 0 帧无内容、末帧无运动,退出时间要预留;避免线性,优先 spring(),需要 interpolate 时用 Easing;30fps 下错开 3–5 帧,进出顺序一致;保持期加入轻微浮动、缓慢辉光脉冲、扫光等“可感不可察”的细节;关键瞬间给缩放弹跳、辉光、光环、声音;用几何光效而非剪贴画式表情与粒子;注意可读性(标题安全边距 5–10%、文字加遮罩或阴影、单一焦点、长文本缩放换行);时长跟随内容,短句约 1 秒;数据驱动,文本、颜色、数字、图片作为 props 配 zod schema 与 defaultProps;用 useVideoConfig() 做画布相对尺寸、sec() 做时间,适配 4K 与竖版裁切。
音效:静音图形是常见缺口,入场轻 whoosh、关键动作 click、成功 chime、退场 swish,可用 <Sequence from={sec(0.5)}><Audio src={staticFile('audio/whoosh.mp3')} volume={0.6} /></Sequence>;源文件需裁掉开头静音,否则整体延迟;打字或计数用一段连续轻音,不要逐字逐位。若无 public/audio/,应告知用户音效是下一步最大提升并等其提供文件。
模式:无 Remotion 项目则按 references/scaffold.md 搭建;已有项目则在 src/compositions/ 写组合,导出组件、schema、defaultProps,并在 Root.tsx 用唯一 id 注册;方向开放时先做 2–3 个快速风格变体。
渲染导出:MP4 用 npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=18;带 alpha 的叠加用 npx remotion render <CompId> out/<name>.mov --codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png;PNG 序列用 npx remotion render <CompId> out/<name>/frame-%04d.png --image-format=png;实时预览用 npm run studio。
限制:资料未提供具体收费、价格、平台支持范围与效果保证;实际可用性取决于本地 Remotion 工具链能否运行。