Remotion完全指南：用React代码生成视频的前端框架教程
相信大家对remotion这个工具，都有一定的了解。 它可以做很多酷炫的特效素材，还可以给视频添加一些好玩的效果。 有些人会认为，这是ai工具，或者这是一个大模型。 其实，这些认知都是错误。 今天这个视频，我从根上带大家梳理一下这个工具。并且分享一个简单的方法，用它来制作视频。 不用安装codex、claude code，你只要手头有 vscode、cursor 这些编程工具就可以了。 我今天分享的这个方法，简单、清晰、易于管理，熟悉之后，对这个项目增删改查都非常的方便。 1、remotion 是什么 有些朋友可能会认为，remotion 是一个 ai 工具。类似于 claude code，codex…… 还有些朋友可能会认为，它是一个模型，可以直接通过提示词生成视频。类似，seedance，sora模型。 这个观点是错误的。 它跟ai上是没有关系的。 假如说，我们时光倒流了，回到5、6年前，没有ai，那么remotion…… 我们依然可以手写代码，使用remotion框架来生成视频。 它是一个代码开发的框架，借助H5、 CSS、Canvas、SVG、WebGL 等前端技术，将图形、文字、图片等元素，通过浏览器渲染出来，让用户看到动态效果，最后，再把这些动态效果，转化为视频。 remotion 不能凭空，生成一个猫…… 它只能基于现有的素材，进行变化…… 其实，它更像是ppt。 大家仔细理解一下，好好揣摩揣摩。 那为什么它在ai赛道这么火爆呢？ 因为，ai可以写代码，代码可以通过remotion框架生成视频。所以，它火了。 2、remotion 项目介绍 我们先找一个空的文件夹，把remotion项目放到这里。 检查你的node版本是否 >= 20。 没有安装node的朋友，建议使用nvm工具进行安装，由于过于简单，我们就不多说了。 打开官网，复制粘贴指令。 npx create-video@latest 找到一个合适的文件夹，打开终端，输入指令。 一路选择默认就可以了。 使用vscode…… npm i 下载…… npm run dev 打开……studio 工作站。 此刻，我们看到的一个空的项目，视频后面，我会分享怎么使用它。 项目的根目录下，我们看到有很多文件，我们看到有很多熟悉的……claude ，codex，cursor 这些都是各种 AI 编程助手/IDE 的配置文件夹，每个对应一款不同的工具： 文件夹 对应工具 .agent / .agents VS Code Copilot Agent / 通用 agent 配置 .claude Claude Code（Anthropic） .cline Cline（VS Code 插件） .codex OpenAI Codex CLI .cursor Cursor（AI IDE） .windsurf Windsurf（Codeium 的 AI IDE） .continue Continue（VS Code 插件） .gemini Gemini CLI（Google） .roo Roo Code（VS Code 插件） .trae Trae（字节跳动 AI IDE） .goose Goose（Block/Square） .openhands OpenHands（原 OpenDevin） .kiro Kiro（AWS） .qwen 通义千问相关工具 .mcpjam MCP（Model Context Protocol）相关工具 .factory Factory .crush / .pi / .pochi 等 其他 AI 编程工具 其它目录： ...