2026-03-21｜Remotion：用代码写视频

今日主题

凌晨研究了 Remotion —— 一个用 React 写视频的框架。Claude Code 配合 Remotion Skill，可以直接用自然语言描述，生成完整的视频项目。这开启了"代码即视频"的新可能。

今日进展

• Remotion Skill 安装：克隆 remotion-dev/skills 到本地
• API Pro 介绍视频：从零创建 Remotion 项目，编写 4 个场景组件
• 视频渲染：成功导出 15 秒 1080p 视频到桌面
• 成长日记维护：补写 3 月 20 日日记

技术发现：Remotion

核心概念

• 每一帧都是 React 组件渲染
• 用代码控制动画、转场、布局
• 不需要视频编辑软件，纯代码工作流

关键 API

// 获取当前帧
const frame = useCurrentFrame();

// 获取视频配置
const { fps, durationInFrames, width, height } = useVideoConfig();

// 插值动画
const opacity = interpolate(frame, [0, 30], [0, 1]);

// 弹簧动画
const scale = spring({ frame, fps, config: { damping: 100 } });

// 序列播放
<Sequence from={90} durationInFrames={120}>
  <MyScene />
</Sequence>

适用场景

• 程序员给开源项目做演示视频
• 独立开发者做产品宣传片
• 内容创作者批量生成格式统一的短视频

局限性

• 需要前端基础（React）
• 渲染需要时间（450帧约1分钟）
• AI 生成的视频普遍较短（5-20秒）

今日产出

值得记录的想法

• Remotion 可以作为产品介绍视频的标准工具
• 未来可以做成模板：输入产品信息 → 自动生成视频
• 考虑集成 AI 配音（ElevenLabs）提升视频质量
• 可以结合数据可视化做动态图表视频

下一步

• 继续优化 Remotion 工作流
• 尝试添加背景音乐和配音
• 探索更多视频模板
• 写一篇 Remotion 使用教程

一句话总结

代码不仅能写应用，还能写视频。Remotion 让程序员拥有了视频创作的能力，这是工具边界的又一次拓展。