告别剪辑软件！Remotion 让 AI Agent 帮你写代码生成视频

📁 开源项目

在这个 AI 编程爆炸的时代，“Video as Code”（视频即代码） 正在成为新的创作范式。

如果你厌倦了 Premiere 或 After Effects 复杂的轨道拖拽，或者想批量生成成百上千个个性化视频，那么 Remotion 绝对是你不可错过的神器。更棒的是，现在你可以通过简单的命令，让 AI Agent 瞬间掌握 Remotion 的专家级开发技能！

今天，我们就来深度拆解如何用 React 代码生成一个专业的 GitHub 教学视频，并展示如何通过 remotion-dev/skills 让你的 AI 助手火力全开。

🎥 视频创作的范式革命

传统视频制作是线性的、手动的：剪辑师在时间轴上逐帧调整素材，一旦需求变更（比如”把所有标题颜色换成蓝色”），往往意味着巨大的重复劳动。

Remotion 彻底改变了这一切。它基于 React，让你用组件化的思维构建视频：

  • 视频 = f(帧数)：每一帧都是 React 组件的渲染结果
  • Web 技术栈：CSS 做布局，Canvas/WebGL 做特效，HTML 做内容
  • 程序化控制：变量控制内容，循环生成列表，Git 管理版本

2024年，Remotion 在 GitHub 上斩获 28k+ Stars，被 GitHub Unwrapped、Fireship 等知名项目采用，证明了其在专业领域的强大实力。

🛠️ Remotion 核心揭秘：React 如何变视频？

Remotion 的魔法源于一套精妙的架构：

  1. Chromium 渲染引擎：利用无头浏览器，以像素级精度呈现每一帧画面。
  2. React 组件驱动：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import { useCurrentFrame, AbsoluteFill } from "remotion";

    export const MyScene = () => {
      const frame = useCurrentFrame(); 
      // 甚至可以用 frame 值驱动动画
      const opacity = Math.min(1, frame / 30);
      
      return (
        <AbsoluteFill style={{ opacity }}>
          <h1>Hello Remotion!</h1>
        </AbsoluteFill>
      );
    };
  3. FFmpeg 合成：将浏览器截取的成千上万张帧图片，通过 FFmpeg 快速编码为流畅的 MP4/WebM 视频。

🤖 让 AI 成为 Remotion 专家：remotion-dev/skills

对于刚接触 Remotion 的开发者，掌握动画曲线、音频同步、3D 渲染可能需要一些时间。但现在，我们可以走捷径！

Remotion 官方推出了专为 AI Agent 设计的技能库 —— remotion-dev/skills。这个仓库包含了 29+ 个精心打磨的最佳实践规则，覆盖了视频开发的方方面面。

一键集成命令

只需在你的项目终端运行：

1
npx skills add remotion-dev/skills --skill remotion-best-practices

这条命令会让你的 AI 编程助手（如 Claude Mode, Cursor 等支持 MCP/Skills 的工具）瞬间”学会”：

  • 🎵 音频处理：自动计算波形、音量淡入淡出
  • 🏃 动画技巧：Spring 弹簧动画、缓动函数的最佳参数
  • 🧊 3D 集成：如何无缝嵌入 React Three Fiber 场景
  • 📊 图表可视化：动态数据图表的生成模式
  • 📝 字幕生成：TikTok 风格的单词高亮字幕

拥有了这些 Skills，你只需要告诉 AI：”帮我做一个带有弹簧动画的开场，背景要用 3D 粒子效果”，它就能调用最佳实践代码直接实现！

💻 实战案例：GitHub 教学视频生成

为了演示 Remotion 的威力，我们构建了一个 GitHub 教学视频项目。这个项目完全由代码生成，没有使用任何视频剪辑软件。

1. 项目预览

一段 30 秒的视频，包含四个核心场景：

  • Intro：Logo 动态展示与主题介绍
  • Concept：GitHub 核心概念卡片流
  • Demo：模拟 Git 命令行的操作演示
  • Outro：引导关注的结尾动画

2. 关键代码解析

场景编排（Sequence）
Remotion 使用 <Sequence> 组件来管理时间轴，就像剪辑软件里的轨道：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Root.tsx
export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={150}>
        <IntroScene title="GitHub 完全指南" />
      </Sequence>
      <Sequence from={150} durationInFrames={240}>
        <WhatIsGitHub />
      </Sequence>
      {/* 更多场景... */}
    </>
  );
};

弹簧动画（Spring）
让元素动起来不再生硬，使用物理模拟的弹簧动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
// IntroScene.tsx
import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: { damping: 200 }, // 像果冻一样的弹性
});

return <div style={{ transform: `scale(${scale})` }}>...</div>;

3. 本地与云端渲染

在开发时，我们可以通过 npm start 启动本地服务器，在浏览器中实时预览每一帧的变化，享受热重载带来的极速反馈。

当视频开发完成后，既可以在本地渲染：

1
npx remotion render GitHubTutorial out/video.mp4

也可以利用 GitHub Actions 或 AWS Lambda 进行云端并发渲染，将渲染时间从几分钟缩短到通过几秒钟！

🌟 为什么你应该尝试 Remotion？

  1. 无限的可复用性：写好一套模板，传入不同的 JSON 数据，就能生成 1000 个针对不同用户的个性化视频。
  2. 像素级掌控：CSS 的强大布局能力，让你对画面元素的控制精度远超传统软件。
  3. AI 时代的完美搭档：代码是 LLM 最擅长的语言。通过 remotion-dev/skills，你可以让 AI 成为你的首席视频剪辑师，从脚本到画面，全流程自动化。

🚀 立即开始

想要体验”代码生成视频”的魔力吗？

  1. 获取源码：访问我们的开源项目 github-tutorial-remotion
  2. 安装 Skills：给你的 AI 加上 Remotion 技能包
  3. 运行渲染：见证代码变为视频的时刻

关注我们，获取更多 AI + 编程的硬核实战技巧！让我们一起，用代码定义未来创作。

本文首发于公众号 [你的公众号名称]，转载请注明出处。

🏷️ GitHub 自动化 Remotion React AI 视频生成