Remotion 完整指南：HTML-in-Canvas 渲染原理与实战

TL;DR

Remotion 用 React/TypeScript 写视频，每帧都是纯函数计算。核心优势：HTML/CSS/React 都能用在视频里，Chrome 将 DOM 绘制到 Canvas 输出像素。关键 API：registerRoot()/useCurrentFrame()/useVideoConfig()/interpolate()/spring()/AbsoluteFill/Sequence/staticFile()。陷阱：npm create video 无法自动化/必须用 .tsx/不写 registerRoot() 会报错。

触发场景

• 用代码批量生成视频时
• 需要系统弹窗动画/数据可视化/标题序列时
• 需要配合 AIGC 素材做动态包装时

行动步骤

1. 手动搭建项目：mkdir → package.json → tsconfig.json → remotion.config.ts → src/index.tsx

1. registerRoot() + Composition 定义入口：id/组件/时长/fps/分辨率

1. 核心 Hook：useCurrentFrame()获取帧号 / useVideoConfig()获取配置

1. 动画：interpolate()帧到值映射 / spring()物理弹簧动画

1. 渲染命令：remotion studio预览 / remotion still --frame=N / remotion render

1. CSS Filter + mix-blend-mode 替代 WebGL：blur/saturate/hue-rotate + multiply/screen

证据

渲染性能（Mac M5 Pro 48GB）：180帧@30fps+8x并发约45秒，输出2.9MB H264 MP4

失败边界

• npm create video 纯交互式无法自动化 → 手动搭建
• 不写 registerRoot() → CLI报错 "does not contain registerRoot"
• 入口文件 .ts 而非 .tsx → JSX 不识别
• HtmlInCanvas 需要 WebGL，Chrome headless 不支持
• Sequence from=X 是相对时间，不是绝对帧号

原理

Remotion 将 React 树交给 Chrome 渲染，Chrome 用 DOM/CSS 引擎渲染再捕获像素到 Canvas。每帧都是纯函数：frame=45 → 计算所有动画值 → 渲染完整 UI → canvas 输出 → FFmpeg 编码。HTML-in-Canvas 的本质是 Chrome 本身，Remotion 只负责帧管理、动画插值、组件树组织。

使用记录

| 日期 | 项目/场景 | 结果 | 备注 |

|------|----------|------|------|

| 2026-05-17 | Remotion完整指南 | confirmed | HTML-in-Canvas渲染原理 |