Web开发

今天的文章，分享一下remotion工具。 以下是文字内容，也请参考视频演示。 1、remotion 是什么 remotion 不是 ai 工具，不是 ai 大模型。 它是一个代码开发的框架，借助H5、 CSS、Canvas、SVG、WebGL 等前端技术，将图形、文字、图片等元素，通过浏览器渲染出来，让用户看到动态效果，最后，再把这些动态效果，转化为视频。 即便 ai 技术消失了，remotion 仍然可以做出视频。 2、remotion 项目介绍 保证系统安装的 node 版本 >= 20。 找到一个空文件夹，用命令行终端打开。 在命令行终端执行，如下指令： npx create-video@latest 如果出现报错，请在命令行输入以下指令，配置代理 $env:HTTP_PROXY="http://127.0.0.1:代理端口" $env:HTTPS_PROXY="http://127.0.0.1:代理段口" 所有选项选择默认即可。 使用 vscode 打开项目。 输入： npm i 下载三方库。 npm run dev 打开 remotion studio 工作站。 remotion项目中的文件夹对应关系如下： 文件夹 对应工具 .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 编程工具 其它目录： ...

我 vibe coding 了4个应用。 从项目梳理到上线，花了4天时间。 这些应用，具备如下优势： 1、调用ai服务。这四个应用中，有三个在后台调用了ai大模型。 2、多端均可使用。pc端，手机端都可以用。 3、成本低。开发免费，部署免费，上线免费，使用免费，无需注册appstore或者其它开发平台。 第一个应用 —— AI 智能旅游规划师 点击体验 我可以输入目的地、旅行时间、预算以及个人偏好。 这个应用就会根据我的需求，生成一份旅游规划。 无需注册，也不需要购买什么token。点开就能用。 在手机端，你同样也可以使用。两个终端的体验是一模一样的。 第二个应用 —— AI 热量计算器 点击体验 我随手拍下一个食物，把这张照片给到应用。 点击分析，它就可以帮我分析出来这个食物的热量是多少。 在电脑端、手机端都可以使用。两个终端的体验是一模一样的。 第三个应用 —— 童话故事机 点击体验 这个应用非常适合宝爸宝妈使用。 它是专门用来生成童话故事的。 你可以将童话故事的需求，放在输入框里。然后，放入一张图片。 它可以根据你的需求和图片，生成一个童话故事。 生成的故事，这里有个播放按钮，点击之后，它会把这段故事念出来。 第四个应用 —— 在线提词器 点击体验 你可以把文案放到输入框里面。 点击播放，就可以全屏滚动播出了。 按住空格或者鼠标左键，可以暂停播放。 可以调节文字的大小。 可以调节播放的速度。 转动鼠标滚动轴，可以调整播放的进度。 感谢阅读！