Claude Code 与 Remotion 实战工作流：OCR 驱动的高亮标注 + 3D 旋转动画

TL;DR

Claude Code 与 Remotion 实战工作流：OCR 驱动的高亮标注 + 3D 旋转动画 | 触发：在 2026-04-08 的实战中，完成了将一张文章截图导入 Remotion，创作一段

触发场景

在 2026-04-08 的实战中，完成了将一张文章截图导入 Remotion，创作一段 5 秒视频的全流程。项目目标：白色全高清背景 → 开场整体模糊 → 1秒内清晰化 → 缓慢放大 + 3D 透视旋转 → rough.js 从左到右高亮文字。这次实战沉淀了完整的工作流文档。

行动步骤

1. 将图片放入 public/ 目录（Remotion 只从 public/ 读取静态文件）

1. 用 staticFile("filename.png") 引用

1. 获取图片原始尺寸：file "/path/to/image.png"

1. 安装：brew install tesseract

1. TSV 格式（表格形式，每个词有 bounding box）：

1. hOCR 格式（HTML 格式，包含更多元数据）：

1. 模糊渐显：

1. 3D 透视旋转：

1. 关键原则：

1. canvas 放在根容器，zIndex: 0，全尺寸

1. 内容放在 canvas 上方，zIndex: 1

1. 不要把 canvas 放在 transform 内部

证据

完整技术路径

图片文件 ──→ tesseract OCR ──→ 文字坐标 ──→ rough.js 高亮
        │
图片文件 ──→ Remotion <Img> ───────────────────┘
        │
3D 旋转 + 缩放 + 模糊

Step 1：准备素材

• 将图片放入 public/ 目录（Remotion 只从 public/ 读取静态文件）
• 用 staticFile("filename.png") 引用
• 获取图片原始尺寸：file "/path/to/image.png"

Step 2：OCR 提取文字位置

安装：brew install tesseract

TSV 格式（表格形式，每个词有 bounding box）：

tesseract "/path/to/image.png" - --oem 1 --psm 6 tsv

hOCR 格式（HTML 格式，包含更多元数据）：

tesseract "/path/to/image.png" - --oem 1 --psm 6 hocr

关键列：left（X坐标）、top（Y坐标）、width（宽度）、height（高度）

注意：tesseract 对中文支持需要安装中文语言包 chi_sim.traineddata

Step 3：核心动画代码

模糊渐显：

const blurAmount = interpolate(frame, [0, fps], [15, 0], { extrapolateRight: "clamp" });
<div style={{ filter: `blur(${blurAmount}px)` }} />

3D 透视旋转：

const t = interpolate(frame, [0, 5 * fps], [0, 1]);
const rotX = interpolate(t, [0, 1], [0, 15]);
const rotY = interpolate(t, [0, 1], [0, -15]);
const scale = interpolate(t, [0, 1], [1, 1.05]);

Step 4：Canvas 叠加层（rough.js）

const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
  const canvas = canvasRef.current;
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  ctx.clearRect(0, 0, CW, CH);
  if (progress <= 0) return;
  const rc = rough.canvas(canvas);
  rc.rectangle(x, y, drawnWidth, h, {
    fillStyle: "solid",
    fill: "rgba(255, 240, 50, 0.4)",
    strokeWidth: 0,
    roughness: 0,
  });
}, [progress]);

关键原则：

• canvas 放在根容器，zIndex: 0，全尺寸
• 内容放在 canvas 上方，zIndex: 1
• 不要把 canvas 放在 transform 内部

Step 5：调试原则

从最小可运行版本开始，逐步加功能，不要一次性写完再测试。

调试顺序：div Hello → 加 Img → 加 blur → 加 transform → 加 canvas

遇到的问题与解决方案

| 问题 | 原因 | 解决方案 |

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

| 画面一片空白 | position: absolute 嵌套在 transform 内部 | 外层 relative，内层独立 absolute |

| tesseract 不识别中文 | 未安装中文语言包 | chi_sim.traineddata |

| TypeScript 报错 | unused imports | npx tsc --noEmit 后删除 |

| rough.js 绘制错位 | canvas 在 transform 内部 | canvas 提到根容器，单独 absolute |

失败边界

暂无已知失败边界

易混淆场景

暂无已知混淆场景

原理

这套工作流的本质是多模态内容管道：

• 图像 → OCR → 语义坐标（把视觉信息转化为结构化数据）
• 结构化数据 → rough.js → 可视化效果（程序化绘图）
• 绘图坐标系统是 Remotion 坐标系，必须与容器的 position 体系兼容

canvas 在 transform 外部的原则，是因为 CSS transform 会改变坐标系统：当父元素有 transform 时，子元素的 absolute 定位基准从视口变为变换后的父元素，导致 canvas 绘制坐标错位。

关联与延伸

• 相关笔记：[[INDEX-vis]]
• 延伸阅读：- 相关文档：[[Remotion 思维模型与 Claude Code 协作实践]]
• 相关规则文件：rules/images.md、rules/animations.md、rules/debugging.md
• 关联工具：tesseract OCR、rough.js

使用记录

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

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