Remotion 完整使用教程

Remotion 完整使用教程 Remotion 完整使用教程 Modified January 24 这些案例覆盖宣传、数据、教程场景。社区反馈：第一发成功率80%，迭代2 3轮可达专业级。 这里给出几个实用、当前（2026年初）社区里真实在用的 Remotion Agent Skills 提示案例。这些prompt大多直接来自X上的分享、Remotion官方demo、Medium/YouTube教程，以及用户实际一两轮迭代就能出片的效果。使用前确保： • 已运行 npx create video@latest 创建项目（选TypeScript模板最好） • 然后 npx skills add remotion dev/skills 安装技能包 • 在Claude Code / Cursor / OpenCode / Antigravity 等工具里直接聊天式迭代 案例1：最经典的15秒产品宣传片（最火用法，成功率极高）Prompt（直接复制粘贴给Claude Code）： Code block Plain Text Copy 做一个 15 秒的 WaytoAGI 开源社区宣传视频 风格：科技感蓝色调 + 霓虹渐变，现代极简，带粒子背景 结构： 0 3 秒：黑色背景，社区 logo 从中心淡入 + 打字机效果出现 slogan “Build & Share AI Together” 3 8 秒：展示 3 个社区核心亮点（用占位图 / 矩形 + 文字模拟），每个从下往上滑入 + 轻微放大 + 文字说明： Open Source Projects Collaborative Workspaces AI Tools Hub 8 12 秒：数据看板动画上升（模拟社区增长曲线：Member Growth/Projects Shared/Contributions） 12 15 秒：CTA 文字 “Join Us Now → waytoagi.com” + logo + 粒子爆炸结束 全程 30fps，1080p，使用 @remotion/transitions 做平滑场景切换，加安静电子氛围音（public/bgm.mp3 优先） 用 Tailwind 类名写样式，动画用 spring easing → 很多人第一发就能出80%成品，再迭代“把粒子改成蓝色光点”“加打字光标”“把CTA放大”就接近专业级。案例2：GitHub Wrapped / 年终总结个性化视频（数据驱动型）Prompt： Code block Plain Text Copy 生成一个类似GitHub Wrapped的个性化年终总结视频，15秒。 用户数据：2025年写了1200 commits，贡献了5个开源项目，star数增长300%，最活跃语言TypeScript。 风格：暗黑赛博朋克，紫+粉霓虹。 开头：用户头像（用占位圆形）从中心放大，文字“你的2025代码之旅” 中间：依次展示 Commit计数器从0跳到1200（用useCurrentFrame做动画计数） 5个项目图标滑动出现（用简单svg或矩形） Star增长曲线图表（Remotion charts组件） 语言饼图（TypeScript 60%，其他40%） 结尾：文字“Your code shaped the future” + 粒子烟花 用Sequence和AbsoluteFill组织场景，加@remotion/google fonts加载Inter字体。 自动计算时长，确保每个部分时序对齐。 → 特别适合批量生成（改用户数据参数就能出一堆）。案例3：带字幕 + TTS 的短讲解视频（教育/教程类）Prompt： Code block Plain Text Copy 做一个30秒的Remotion讲解短视频，主题：“用Remotion + AI 一分钟做出宣传片”。 脚本： 0 5秒：标题出现“Remotion + Claude Code = 零设计做视频” 5 15秒：展示安装命令 npx skills add remotion dev/skills，命令行打字机动画 15 25秒：展示一个prompt例子，文字逐行出现 + 高亮关键词 25 30秒：渲染出MP4的画面 + 文字“试试看！门槛暴降” 全程加英文字幕（用remotion caption组件或手动<Text ），背景轻音乐。 如果可以，集成TTS读旁白（public/voice.mp3占位），或至少留位置。 颜色：深蓝+白+橙色高亮。 用transitions做淡入淡出。 → 再追问一句“把TTS换成更自然的女性声”或“字幕加底色半透明条”就能优化。案例4：纯动画粒子 + 文字 hype 启动视频（无具体产品，刷屏用）Prompt（Remotion官方demo类似风格）： Code block Plain Text Copy 做一个10秒的hype开场动画视频，无具体产品。 背景：黑色+蓝色紫色粒子场缓慢流动（用particles或Three.js简单实现）。 中心大文字从模糊到清晰逐字出现：“The Future is Code Driven”，字体粗体，带glow效果。 每个字出现时触发小粒子爆炸。 3秒后 slogan 小字淡入“Made with Remotion & AI”。 最后整体zoom out + 淡出。 用spring动画，60fps，高质量抗锯齿。 → 很多人拿这个当模板改品牌名/ slogan，几秒出片。案例5：迭代优化提示（当第一版不完美时用） Code block Plain Text Copy 上一个版本已经不错，但做这些改进： 1. 所有动画easing改成gentle spring，更丝滑 2. 文字加轻微motion blur（用remotion blur或filter） 3. 背景粒子密度增加30%，速度慢一点 4. CTA按钮加hover like脉冲动画 5. 整体调色：蓝色更深，增加对比度 6. 导出时加 codec=vp9 crf=18 更高画质 重新生成完整代码。 这些案例基本覆盖了目前最热门的用法：宣传片、数据可视化、教程、教育、社交媒体短视频。想直接试哪个？或者告诉我你想做的视频类型（比如电商商品、NFT mint、音乐可视化、 meme 生成器等） 官方宣传视频生成全过程演示 No access dl (3) 00:00 测试By 苏打白.Dev 测试了12种风格的动画效果。 1. Basic 简约白色背景、淡入动画、装饰性圆环 2. Minimal 纯黑背景、极简排版、光标闪烁效果 3. 3D 3D旋转立方体、粒子效果、打字机效果 4. Neon 霓虹灯效果、动态网格、发光文字、闪电效果 5. Tailwind 渐变文字、毛玻璃卡片、粒子动画 6. Cyberpunk 赛博朋克城市、霓虹建筑、透视网格、扫描线 7. Glass 毛玻璃效果、模糊背景、渐变光晕球 8. Retro 像素风格、复古游戏角色、星星闪烁效果 9. Gradient 动态渐变、流光文字、轨道光环、渐变流 10. Matrix 黑客帝国代码雨、垂直下落字符、十六进制数字 11. Glitch 故障艺术、RGB色彩分离、随机方块干扰 12. Particles 粒子爆发、轨道粒子、浮动粒子、爆炸光环 No access dl (1) 00:00 测试By 小互 No access dl (2) 00:00 waytoagi.com 这些案例覆盖宣传、数据、教程场景。社区反馈：第一发成功率80%，迭代2 3轮可达专业级。 这里给出几个实用、当前（2026年初）社区里真实在用的 Remotion Agent Skills 提示案例。这些prompt大多直接来自X上的分享、Remotion官方demo、Medium/YouTube教程，以及用户实际一两轮迭代就能出片的效果。使用前确保： • 已运行 npx create video@latest 创建项目（选TypeScript模板最好） • 然后 npx skills add remotion dev/skills 安装技能包 • 在Claude Code / Cursor / OpenCode / Antigravity 等工具里直接聊天式迭代 案例1：最经典的15秒产品宣传片（最火用法，成功率极高）Prompt（直接复制粘贴给Claude Code）： waytoagi.com → 很多人第一发就能出80%成品，再迭代“把粒子改成蓝色光点”“加打字光标”“把CTA放大”就接近专业级。案例2：GitHub Wrapped / 年终总结个性化视频（数据驱动型）Prompt： → 特别适合批量生成（改用户数据参数就能出一堆）。案例3：带字幕 + TTS 的短讲解视频（教育/教程类）Prompt： → 再追问一句“把TTS换成更自然的女性声”或“字幕加底色半透明条”就能优化。案例4：纯动画粒子 + 文字 hype 启动视频（无具体产品，刷屏用）Prompt（Remotion官方demo类似风格）： → 很多人拿这个当模板改品牌名/ slogan，几秒出片。案例5：迭代优化提示（当第一版不完美时用） 这些案例基本覆盖了目前最热门的用法：宣传片、数据可视化、教程、教育、社交媒体短视频。想直接试哪个？或者告诉我你想做的视频类型（比如电商商品、NFT mint、音乐可视化、 meme 生成器等） 官方宣传视频生成全过程演示 No access dl (3) 00:00 No access dl (3) 00:00 测试By 苏打白.Dev 测试了12种风格的动画效果。 1. Basic 简约白色背景、淡入动画、装饰性圆环 2. Minimal 纯黑背景、极简排版、光标闪烁效果 3. 3D 3D旋转立方体、粒子效果、打字机效果 4. Neon 霓虹灯效果、动态网格、发光文字、闪电效果 5. Tailwind 渐变文字、毛玻璃卡片、粒子动画 6. Cyberpunk 赛博朋克城市、霓虹建筑、透视网格、扫描线 7. Glass 毛玻璃效果、模糊背景、渐变光晕球 8. Retro 像素风格、复古游戏角色、星星闪烁效果 9. Gradient 动态渐变、流光文字、轨道光环、渐变流 10. Matrix 黑客帝国代码雨、垂直下落字符、十六进制数字 11. Glitch 故障艺术、RGB色彩分离、随机方块干扰 12. Particles 粒子爆发、轨道粒子、浮动粒子、爆炸光环 No access dl (1) 00:00 No access dl (1) 00:00 测试By 小互 No access dl (2) 00:00 No access dl (2) 00:00 Remotion 之所以火了，主要有以下几个原因： 1. 用熟悉的 Web 技术制作视频 • 前端开发者可以用 React、CSS、TypeScript 等已有技能创建视频 • 不需要学习 Adobe After Effects 等专业视频软件 • 降低了视频制作的门槛 2. 程序化视频生成 • 可以像写代码一样创建视频内容 • 支持动态数据驱动（如从 API 获取数据生成个性化视频） • 批量生成成千上万个变体视频变得很容易 3. 开发者友好的工作流 • 热重载、组件化、版本控制等现代开发体验 • 可以用 Git 管理视频项目，方便协作 • 时间轴用代码定义，精确可控 典型应用场景 数据可视化视频：自动生成财报、数据报告 个性化营销：批量生成包含用户名字的定制视频 社交媒体内容：批量生成各种尺寸的短视频 开发工具：技术演讲、教程视频制作 时机因素 • 短视频和 AI 生成内容的需求爆发 • 开发者寻求将代码能力扩展到创意领域 • Figma、Canva 等工具证明了开发者友好的创意工具有市场 • Remotion 本质上是把视频制作"开发化"，让程序员可以用代码创造力进入视频制作领域，这个定位很精准。 Remotion 本质上是把视频制作"开发化"，让程序员可以用代码创造力进入视频制作领域，这个定位很精准。 以下是一个从零开始的完整Remotion教程，基于2026年初的最新实践（知识更新至2026年1月23日）。Remotion是一个用React编写视频的框架，结合Agent Skills后，可以通过AI（如Claude Code）用自然语言生成视频代码，大大降低了门槛。教程分为两部分：基础手动使用（适合学习核心概念）和AI辅助使用（结合Agent Skills，最火的玩法）。我会包括前提条件、步骤、代码示例和潜在问题解决。前提条件 • Node.js 或 Bun：至少Node v16或Bun v1.0.3。推荐用Bun（更快），下载：https://bun.sh/。 • remotion.dev • 文本编辑器：VS Code 或 Cursor（支持AI编码）。 • AI工具：Claude Code（Anthropic的免费CLI工具，安装：npm i g claude code）或其他如Cursor、Gemini Code。 • 硬件：中等配置电脑（渲染视频需要CPU/GPU）。 • 可选：FFmpeg（用于高级渲染，Remotion会自动提示安装）。 如果你是初学者，从基础部分开始；如果想快速出片，直接跳AI部分。 第二部分：AI辅助使用教程（结合Agent Skills）这是2026年最火的玩法：用AI生成Remotion代码。Remotion于2025年底推出Agent Skills，让Claude Code等AI理解Remotion最佳实践，直接吐出可运行代码。 remotion.dev 步骤1：创建Remotion项目同上：npx create video@latest，选任意模板（Blank或Hello World）。 步骤2：安装Agent Skills在项目根目录运行： bash • 这会下载Remotion技能包到.skills/文件夹，包括最佳实践、API指南、动画示例。 • 验证：ls .skills 应看到remotion best practices、3d等文件。 • reddit.com reddit.com 步骤3：启动AI工具（如Claude Code）安装Claude Code（如果没）： bash 启动： bash • 这打开Claude的交互模式，AI会自动加载.skills/中的Remotion知识。 • 其他工具：Cursor（VS Code插件）、Antigravity（Google的），技能兼容。 • youtube.com youtube.com 步骤4：用Prompt生成视频在Claude聊天中描述视频，AI会生成/修改代码。示例Prompt见下文案例。 • 生成后：保存代码到src/Video.tsx，然后npx remotion studio预览。 • 迭代：不满意？追问“把背景改成粒子效果”或“加淡入动画”，AI会更新代码。 • 渲染：同上。 步骤5：高级集成 • 资产准备：放图片/音频到public/，Prompt中提到“用public/logo.png”。 • 批量生成：用参数化Composition，AI可生成动态代码。 • 自定义Skills：编辑.skills/remotion.md添加自己的最佳实践。 • youtube.com youtube.com 案例：实际应用与Prompt以下3个完整案例，从简单到复杂。每个包括Prompt、预期输出描述、潜在迭代。基于社区分享和官方示例。 youtube.com +1 youtube.com 案例1：简单文本动画（入门级，10秒视频）Prompt（复制到Claude Code）： • 预期输出：AI生成类似上面的手动代码。渲染后：平滑动画MP4。 • 迭代Prompt： “加蓝色渐变背景和粒子效果。用 • @remotion • /noise生成噪声。” 案例2：产品宣传片（中级，30秒，带媒体）Prompt： • 预期输出：复杂组件，集成动画库。适合SaaS推广。 • 迭代Prompt： “把卡片动画改成staggered出现，加阴影效果。用Tailwind样式。” 案例3：数据可视化年终总结（高级，20秒，动态数据）Prompt： • 预期输出：数据驱动组件，可传入JSON渲染不同用户视频。 • 迭代Prompt： “加TTS旁白。用remotion tts生成语音。”