小松鼠：一句话，三分钟，生成视频-最强视频Skill-Remotion

小松鼠：一句话，三分钟，生成视频 最强视频Skill Remotion 小松鼠：一句话，三分钟，生成视频 最强视频Skill Remotion Modified January 30 Audio or video is not supported Please download the file and open it with the appropriate software. embedding.mp4 · 8.20MB embedding 00:00 Code block TypeScript Copy <mesh X轴(红色)</mesh <mesh Y轴(绿色)</mesh <mesh Z轴(蓝色)</mesh {/ 三个向量点 /} <mesh position={dogPos} 绿球</mesh <mesh position={catPos} 蓝球</mesh <mesh position={carPos} 红球</mesh {/ 连线 /} <line 狗和猫之间的连线(黄色)</line {/ 粒子效果 /} {[...Array(30)].map(() = <粒子 / )} </ThreeCanvas ) } 这30行代码, 实现了: • 三维坐标系 • 三个发光球体 • 从原点到各点的连线 • 狗和猫之间的距离线 • 自动旋转的摄像机 • 30个环绕粒子 传统剪辑软件做这个效果? 至少要调半天参数。 Remotion写代码5分钟搞定。 第五步:细节调整 预览看到哪里不满意,直接改代码。 你甚至不需要懂代码，让AI帮你找， 他会非常精准的找到代码位置修改。 想改文案? 打开 EmbeddingVideo.tsx, 搜索要改的文字,直接改,保存。 浏览器自动刷新。 想改颜色? Code block TypeScript Copy color: " 1a73e8" // 改成你喜欢的颜色 想调整动画时长? Code block TypeScript Copy // 原来:标题在0 30帧(1秒)淡入 interpolate(frame, [0, 30], [0, 1]) // 改成:标题在0 60帧(2秒)淡入 interpolate(frame, [0, 60], [0, 1]) 想让3D场景转得快一点? Code block TypeScript Copy // 原来 const cameraRotation = frame 0.01 // 改成(转速加倍) const cameraRotation = frame 0.02 所有修改,你只要和AI说说话， Audio or video is not supported Please download the file and open it with the appropriate software. embedding.mp4 · 8.20MB embedding 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. embedding.mp4 · 8.20MB embedding 00:00 这30行代码, 实现了: • 三维坐标系 • 三个发光球体 • 从原点到各点的连线 • 狗和猫之间的距离线 • 自动旋转的摄像机 • 30个环绕粒子 传统剪辑软件做这个效果? 至少要调半天参数。 Remotion写代码5分钟搞定。 第五步:细节调整 预览看到哪里不满意,直接改代码。 你甚至不需要懂代码，让AI帮你找， 他会非常精准的找到代码位置修改。 想改文案? 打开 EmbeddingVideo.tsx, 搜索要改的文字,直接改,保存。 浏览器自动刷新。 想改颜色? 想调整动画时长? 想让3D场景转得快一点? 所有修改,你只要和AI说说话， 也可以命令行调用 你会看到进度条: 生成视频的整个过程我花了3分钟(看电脑配置)。 三.Remotion对比传统视频软件的优势 Remotion的核心优势不是"快", 而是"可控"和"可复用"。 快速修改只是副产品。 真正牛的是: 1. 可版本管理 视频源码能用Git管理，能多人协作修改。 而不像传统剪辑视频的MP4文件，二级制格式无法和他人同时协作。 2. 可批量生成 比如我的文章里，各个关键词，让他们全部生成短视频。 写一个模板,循环遍历数据: 注意哦，这个生成过程，个人完全不用参与， 可以晚上睡觉，早上起来收菜。 3. 可程序化控制 所有动画都是数学计算: 我想偏移几个像素就是几个像素 改一个数字,所有卡片的动画同步更新， 这就是工业化生产。 程序员的优势在这里体现得淋漓尽致。 四.尾声 Remotion + Claude Code这个组合, 本质上是把AI能力和程序化视频结合起来。 AI帮你写代码,代码生成视频。 这对我这种缺乏审美的工科人来说,简直是完美方案。 但是我要泼个冷水:别想着AI一键出片，依然不稳定 我们还是要进行二次加工。 比如配音，口播，字幕等等。 当然，这些是我们后面可能涉及的话题 Remotion不会自动生成爆款视频, 它只是让你用更高效的方式实现创意。 🥇 创意本身,还是要靠人。 创意本身,还是要靠人。 看到这里了,如果觉得不错: ✓ 点个「赞」,让我知道你在看 也可以加我的个人微信围观学习:archerqc 小松鼠爱你们! 🔗 原文链接： https://mp.weixin.qq.com/s/wrlxs 0t... https://mp.weixin.qq.com/s/wrlxs 0t... 原创 暴走的xiao松鼠 暴走的xiao松鼠 暴走的xiao松鼠2026年1月30日 01:02 上海 大家好,我是小松鼠。 一名AI时代的学习者,专注探索个体在新时代的生存模式。 这是我的第 12 篇 AIGC 文章。 前言： 有小伙伴反映，我写的通识篇知识点太多太密，没有视频结合看不懂 但是我就想，怎么能够结合我体系化的文章，快速出一些科普视频 恰好这时，我发现了个宝藏技能： Remotion 如下是我这个完全不懂视频制作的人， 为了解释 AI的名词 EMBEDDING 用Remotion，3分钟就生成了视频 还未配音，但是已经完成了百分之八十的视频工作。 内容比较硬核,建议收藏慢慢看。 一.Remotion是什么 核心原理 简单说:Remotion就是一个让你用代码生成视频的工具。 但它不是那种拖拽式的剪辑软件, 而是让你用React组件来"编程"视频。 核心原理很简单: 🥇 把视频当成网页来写。 把视频当成网页来写。 每一帧画面 = 一个React组件在特定时间点的渲染结果 你写的不是时间轴,是组件。 你调的不是参数,是Props。 最后系统把这些组件按时间顺序渲染成MP4文件。 从计算的角度: 视频是一连串静态画面的连续播放, 每秒30帧或60帧。 Remotion做的事就是: 最后把1800张图片拼成60秒的视频。 这就是程序化视频的本质。 举个例子: 想要一个文字从左飞到右的动画? 传统方式: • 打开PR/AE • 拖个文字层 • 调关键帧 • 反复预览 • 导出渲染 Remotion方式: 写完代码,一行命令渲染成视频。 二.如何使用 实操部分 我直接上干货, 用我自己做Embedding科普视频的真实案例, 手把手教你整个流程。 第一步:安装Claude Code的Remotion Skill 他会帮你按照市面上，所有主流支持Skill的ide，都装上对应的技能 所以会有一堆文件夹。 看，我们的好朋友trae中，目录结构和claude里一模一样。 这个Skill很重要。 它教会Claude: • Remotion的组件怎么写 • 动画API怎么用(interpolate、spring) • 时间轴怎么控制 • 常见特效模板 装完Skill,你就能用人话告诉Claude想要什么视频了。 第二步:用人话描述需求 我当时是这么跟Claude说的: 这个过程中我也在思考怎么能让视频效果更好。 就想到了threejs库，当你不确定什么效果好，让AI自己去找方案。 然后呢? 你需要做的，只是看着克劳德老师表演。 完美！你可以永远相信克劳德老师 最终， Claude Code直接帮我生成了: 3个核心文件: • Root.tsx 注册视频组件 • EmbeddingVideo.tsx 主视频逻辑(600多行),后续的微调都在这里 • VectorSpace3D.tsx 3D向量空间可视化 配置文件: • package.json 添加了渲染命令 • remotion.config.ts 输出格式设置 就这么简单。 第三步:预览效果 浏览器自动打开 http://localhost:3000 这就是Remotion Studio, 左边是视频列表,选"Embedding", 中间是预览画面, 下面是时间轴控制器。 到了这里，剪视频的朋友们就很熟悉了， 事实上这里可以加配乐的时间轴， 不过小松鼠是纯纯社畜，时间有限，先说声抱歉。 我们后面另外单讲。 你可以: • 拖动进度条查看任意时间点 • 点播放按钮看完整效果 • 修改代码,浏览器自动刷新（这可太方便了） 这个预览环境就是一个网页, 所有动画都是React组件在浏览器里实时渲染的。 不是视频文件,是活的代码。 你想改什么,直接改代码就行。 改个颜色? 打开 EmbeddingVideo.tsx,搜索 color: " fff", 改成 color: " ff0000", 保存,浏览器立马变红色。 这比传统剪辑软件爽太多了。 第四步:看看Claude生成了什么 让我带你看看Claude写的代码到底是什么样的。 我这里只是带大家看看结构，不需要大家真的写代码，这些全是自动生成的 8个场景的精准控制: 每个场景都对应特定的帧数范围。 30fps的视频,30帧=1秒,150帧=5秒。 通过 frame 变量控制场景的显示和隐藏。 动画效果的实现: 看到没? 🎁 所有动画都是数学计算。 给定帧数,计算出对应的值。 这就是程序化视频的本质。 所有动画都是数学计算。 给定帧数,计算出对应的值。 这就是程序化视频的本质。 3D向量空间可视化: 这是整个视频的核心, 用Three.js实现真实的3D空间。 改代码 → 保存 → 浏览器刷新 → 立即看效果 整个流程不到5秒。 第六步:渲染最终视频 预览满意了,就可以渲染成视频了。 可以点击网页中的渲染视频