太夸张！只用 Claude Code + Remotion 做出大神级动画？我实测给你看
第 1 章：开场
太夸张了 先来看这两支影片 竟然都是 Claude Code 做出来的动画 我们今天就来一探究竟 到底是怎么样做出来的
这个开源项目叫做 Remotion 在 GitHub 上 已经有三万六千颗星星 它主打可以用程式的方式来做动画 做影片
真的有这么神吗 这支影片看完会得到两个答案 第一 要怎么用 Claude Code 加 Remotion 来做动画 二 要怎么优化动画的品质
让它更有质感 我们开始 网路上有很多教学 甚至是官网会分享一些 prompt 他们说照著贴就能做出一样的效果
第 2 章：为什么一句 prompt 不够
左边是大神做出来的 右边是我做出来的 也差太多了吧 这时候很多人可能会说 啊 又是一个鸟工具
但我们不死心 我们决定深挖到底 一句 prompt 之所以不够好 很有可能是因为这个专案目前是空的 什么都没有
对 AI 来说就是要从零开始生成 就像给一堆乐高积木要 拼凑出高楼大厦一样困难 但如果已经有窗户
柱子 天花板 拼凑出高楼大厦就变得简单了 因此 我们第一个实验来试试看 新增一些 Skill 也就是先告诉 AI 有
第 3 章：解法：先加 Skill（效果差很多）
什么样的模组可以使用 这边官方有提供现成的 Skill 可以直接使用 我们把它复制到专案里面 我再生成一次动画
发现效果好了很多 Skill 提醒我要去申请 Mapbox 的 Token 只要注册登录就可以免费使用 所以大家一定要先做的第一件事情
就是把 Skill 复制到你的专案当中 接下来我们来挑战影片开头 这种 SaaS 的产品行销影片 我们这里选中一部影片之后
第 4 章：拆 Frame 复刻 SaaS 动画（差很大但能救）
使用 ezGIF 这种工具 生成一张又一张的 Frame 接著我把所有图片都喂 给 Claude Code 希望它能够读懂每一张 Frame
并且做出一样的动画 大家可以看到效果 左边是原版 右边是 Claude Code 生成的 其实效果可以说是差非常非常的多
因为 Claude Code 并没有真的理解这些图片 它只能依照线条 颜色 文字去做读取与重新排版
所以效果非常不好 但要在这个基础之上 去改是绝对没问题的 接下来还能怎么搞 既然都是用程式码去生成动画的
第 5 章：程式控制画面的套件地图
那有没有其他套件也是 用程式码控制画面的呢 跟 AI 讨论完后 整理出一张表 每一个套件的优势和使用场景都不同
接下来我们会挑选几个套件来做实验 来看看每一个套件的效果怎么样 首先我们来看 Remotion 加 GSAP 的效果
第 6 章：Remotion + GSAP
GSAP 是前端网页常用的套件之一 网页会边滚动边触发动画 整体动画会非常滑顺 因此我们先请 Claude Code
帮我生成一个首页 再请 Remotion 针对这个首页做成动画 可以看到效果很不错 它就像是有动画的投影片一样
会一幕一幕的展开 所以如果要做投影片效果的话 GSAP 是一个很不错的工具 接下来来介绍 Remotion 加上 D3
第 7 章：Remotion + D3.js
.js 的效果 可以做出人口统计变化图 资料我是请 Claude Code 自己去抓的 也可以请 Claude Code 生成系统架构图
用动画来取代死板的图片 我可以喂给它政府的公开资料 让它去生成捷运路线图
甚至可以让它去生成过去20年来的台风路径动画图 D3 还有更多玩法 建议可以去官网那边观看
那边有很多 example 可以参考 Remotion 加 Lottie Lottie 擅长做一些简单的动画 用 Claude Code 操作起来也简单 例如这部影片
第 8 章：Remotion + Lottie
我直接跟它说我要一个 便利商店结帐刷条码的动画 它就自动生成了 如果要生成一个马年庆祝的过年影片
也可以一个指令自动生成 可以去 Lottie 的官网那边看 有很多别人做过的动画可以参考 Remotion 加 Three
第 9 章：Remotion + Three.js
.js
Three .js 擅长处理 3D 动画的场景 例如这个塔防游戏 我下载的模型档 让 Three .js 去读取 再让 Claude Code
生成一个塔防游戏的动画 这个工厂流水线的动画 我是直接请 Claude Code 自己读取文件后生成动画 效果都很不错
Remotion 加 Canvas 类的套件 Canvas 类的套件包含 Fabric
第 10 章：Remotion + Canvas（Fabric/P5）
.js
的效果还蛮可行的 后续再做调整都可以直接拿来使用 这边就给大家做参考 Remotion 的其他使用技巧
第 11 章：Remotion 其他技巧（轨迹/透明字卡输出）
如果想要控制移动轨迹 可以在白色图片上画线 然后让 Claude Code 获取图片后 就可以用一样的轨迹运动
再来是如果想要生成字卡 然后贴到你原本的影片上的话 最后 render 影片时需要选 ProRes 4444 XQ
Picture 这边要选 PNG Format 这边选最后一项 最后按下生成 这样生出来的结果才能有透明的效果
不然透明效果会失效喔 最后来讲 Remotion 加 3D 特效的实验结果 Blender 是一套 专业级 3D 创作软体
第 12 章：Blender + MCP 控制 3D 实验
可以用来做 3D 动画 3D 建模等 很多独立动画师 Youtuber 在使用 这边我们把一台车 的模型 load 进来
并且透过 MCP 的方式让我的 Claude Code 来控制它 我想看看最后生成的效果
第 13 章：结论
以上就是今天的全部内容了 整体来说 Remotion 真的是非常的强大 非常推荐大家使用 如果喜欢的话可以按赞 订阅
开启小铃铛 我们下一集见 拜拜