我的天，剪辑被AI编程干掉了！用Claude code做视频

找俊哥领取AI编程资料

今天搞点不一样的，都是炫酷效果。

先看一波吧：

怎么样？是不是看着还不错。

黑客帝国的效果

苹果风格单词

还有产品展示视频（图片是真实的产品图哦）

还有我的世界效果。

告诉你，这些全部都是 Claude Code 给我做的，我就动了动手指。那么我是如何做的了？

什么是Remotion？

说实话，第一次听到"用React做视频"我也懵了。后来研究发现，Remotion是个神器：

• 用React写视频：就像写网页一样写视频
• 程序化生成：批量制作，数据驱动
• 导出MP4：最终输出真实的视频文件
• 完全可控：每一帧都在你的掌控中

简单说，就是把视频制作变成了编程！

传统vs程序化视频制作

传统方式：

• 打开After Effects
• 一帧帧手动调整
• 导出等半天
• 改个参数要重新来

Remotion方式：

• 写React组件
• 数据驱动内容
• 一键渲染MP4
• 参数化批量生成

这效率，完全不是一个量级！

Claude Code + Remotion的威力

当AI遇上程序化视频制作，就产生了化学反应：

1、AI理解需求，自动生成代码

我：帮我做个Claude Code的功能介绍动画

Claude：好的，我来创建一个Remotion项目...

Claude直接帮你：

• 分析视频需求
• 设计动画效果
• 生成React代码
• 配置渲染参数

2、智能优化动画效果

Claude能根据内容自动优化：

• 文字出现的时机
• 动画的缓动函数
• 颜色搭配方案
• 音效同步

3、批量生成变体

一套代码，无限可能：

• 不同语言版本
• 不同主题配色
• 不同尺寸比例
• 不同时长版本

实战案例分享

我用这套方法做了几个项目，效果惊人：

案例1：Claude Code功能演示

需求：展示Claude Code的核心功能

实现过程：

// Claude自动生成的动画组件
const ClaudeCodeDemo = () => {
  return (
    <Sequence from={0} durationInFrames={300}>
      <TypeWriter text="Claude Code演示" />
      <FeatureList features={features} />
      <CodeAnimation />
    </Sequence>
  );
};

效果：

• 打字机效果介绍
• 功能列表动画展示
• 代码执行过程模拟

案例2：产品宣传视频

需求：制作产品特性展示视频

Claude的贡献：

• 自动设计转场效果
• 生成配色方案
• 优化动画时序

结果：专业级的产品视频，完全不输专业团队！

案例3：背单词应用演示

亮点：

• 单词卡片翻转动画
• 进度条动态更新
• 成就解锁特效
• 个性化学习路径可视化

技术特色：

const WordCard = ({word, definition}) => {
  const flip = spring({
    frame,
    fps,
    config: {damping: 100, stiffness: 200}
  });
  
  return (
    <div style={{transform: `rotateY(${flip * 180}deg)`}}>
      {/* 卡片内容 */}
    </div>
  );
};

案例4：我的世界模拟视频

最复杂的案例：

• 3D方块动画
• 建筑过程模拟
• 粒子效果
• 镜头运动

Claude的表现：

• 理解3D坐标系统
• 生成合理的动画序列
• 优化渲染性能
• 添加音效同步

效果堪比专业制作！

第一步：环境搭建

安装Remotion

npm create video@latest my-video

选择模板，这里我选择的是 Blank

下一步启动服务

cd my-video
npm install
npm run dev

启动完后，就可以在浏览器访问地址：http://localhost:3000

打开看到就是下面的界面

集成Claude Code

# 安装Claude Code CLI
npm install -g @anthropic-ai/claude-code

# 在项目中启动
claude

小贴士：Claude会自动识别Remotion项目结构，提供针对性建议！

添加 CLAUDE 文件

这里有个关键就是写好动画效果的关键。

那就是 CLAUDE.md 文件

这个里面很重要的就是下面的几点：

• 项目说明 - Remotion视频应用介绍
• 组件规则 - 视频、音频、图像标签使用说明
• 动画系统 - interpolate、spring、random函数说明
• 组件对比 - Remotion组件 vs 普通React组件的区别
• 最佳实践 - 6条Remotion开发建议
• 重要提醒 - 开发注意事项

由于文件太多，可以后台滴滴我，发送给你。

第二步：让Claude理解你的需求

1、清晰描述视频目标

我想制作一个60秒的产品介绍视频，包含：
- 开场动画（5秒）
- 三个核心功能展示（每个15秒）
- 结尾Call to Action（10秒）
- 整体风格现代简约，蓝色主题

2、提供素材和要求

请使用这些素材：
- Logo: /public/logo.png  
- 产品截图: /public/screenshots/
- 背景音乐: /public/music.mp3

技术要求：
- 输出1080p MP4
- 帧率30fps
- 总时长控制在60秒内

素材小技巧，使用页面上直接上传就可以。

然后就直接上传到代码的 public 目录下

3、参考样例（如果有）

这里就是对标已经有的素材，如果没有也可以直接再提示词里面说

参考这个动画效果：[链接]
但要改成我们的品牌色彩

第三步：AI自动生成代码

这一步就是等待 Claude Code 帮你生成代码了。

第四步：智能优化和调整

生成的有时候会不尽如意。比如下面的时候，会有遮挡。

那么跟平时改 bug 一样，截个图，粘贴到终端，然后描述下问题，就可以。

第五步：一键渲染导出

这一步都不需要我们做，也交给 Claude Code。

并且我刚开始不知道能不能导出。还是提的疑问句，结果就给我咔咔导出来了。

还可以指定格式。

未来展望

Claude Code + Remotion的组合还在快速发展：

即将到来的功能

• 更智能的内容理解：Claude能更好理解视频需求
• 实时渲染优化：边写边看效果
• 模板市场：丰富的预设模板
• 协作功能：团队共同编辑视频

技术发展趋势

• WebGPU支持：更强大的渲染能力
• AI生成素材：自动生成图片、音乐
• 语音克隆：个性化配音
• 智能剪辑：AI自动优化时序

总结

Claude Code + Remotion真的改变了我对视频制作的认知：

👍

1、效率飞跃：从几天到几小时

2、成本暴降：从几千美元到几美元

3、质量提升：AI优化让效果更专业

4、批量制作：一套代码，无限可能

说实话，这就是未来视频制作的方向！

写在最后

视频内容的重要性越来越高，但传统制作门槛太高。Claude Code + Remotion为我们提供了一个全新的解决方案。

无论你是开发者、创作者还是企业主，都值得尝试这种程序化视频制作方式。它不仅能提升效率，更重要的是解放了创意。

当AI遇上代码，当创意遇上技术，未来已来！

好了，今天的分享就到这里。

安啦，各位！

最后的最后，附上价值 499 的Claude Code文档，亲手打造，祝你精通 Claude Code。

今天这份文档又升值了，加入了 MCP、Hooks 等多个文档。全部都是中英文配套。

后台回复 claude 领取资料。

如果你觉得文章还不错，记得「点赞、转发、关注」，也可以动动你的手指点点「爱心」，你的爱心是我的持续输出的动力。我们一起在 AI 爆炸时代，充实自己，迎接 AGI 的到来。