Remotion

本篇文章讲解hyperframes用法，并从多个角度跟 remotion 工具进行对比。 1、项目安装与初始化 hyperframes 环境要求 node 版本≥ 22 ffmpeg 版本 ≥ 7 node安装，使用nvm工具。 ffmpeg安装，使用如下指令： winget install ffmpeg hyperframes 安装，使用如下指令，安装过程选择默认选项即可。 npx hyperframes init remotion 要求 node 版本大于等于 20，无需单独安装 ffmpeg 。 只需要如下指令，即可安装成功。 npx create-video@latest 总结：remotion项目初始化更加方便。 2、结合 ai 制作视频 codex 打开，选择 gpt 5.5 模型。 打开上一步骤创建的 hyperframes 项目目录。 打开之后，输入如下提示词： 请先浏览当前的项目，了解技术框架。然后实现一个视频效果： 一行银灰色的文字 - hi there！This is demo! 逐渐放大，放大到一定程度之后，变一种颜色。 你只需要创建代码即可，不需要执行任何指令，我自己来验证效果。 总结：经测试，同样的 ai 工具，同样的 ai 大模型，同样的提示词。 hyperframes 做出的视频更有质感, 视频时间较长 10s 左右。 remotion 做出的视频粗糙，视频时间较短 2s 左右。 3、操作界面 hyperframes 的界面，内容丰富。 ...

今天分享：使用ai工具的时候，如何节省token。 文章以 remotion 工具为例，进行讲解。 这个节省token方法的核心理念 —— 通过加载配置项或者读取文件目录的方式，动态地获取素材，避免更换素材之后，依然借助ai产出内容，进而引起token的浪费。 请看下面的案例。 图片铺满效果 提示词如下： 请用remotion框架，实现一个视频效果： 1、项目中有一个 public/images 文件夹，它是图片库，里面有多张图片（jpg、png等格式），它们尺寸不相同。你需要读取这个目录，遍历一下图片的数量，并把图片放在画布上。 2、图片的位置随机地散落在画面上，角度也是随机倾斜的。要保证随机性，每次启动工作台的时候，图片的位置都是不相同的。 3、视频中，这些图片从小到大出现，有弹出来那种感觉，然后，会很有弹性的晃动一下。 4、画面上展示的图片，请按照图片的原尺寸，进行适当缩小，放在画面上。 按照上述提示词生成的remotion代码，会优先加载images文件夹中的图片。 即便更换图片、增删图片，也没有关系。 remotion工作台启动的时候，会重新加载images文件夹中的图片。 这样就不会因调整素材而重复使用ai，达到节省token的目的。 进度条 提示词如下： 请帮我实现一个进度条效果。 配色：深蓝色科技感。 章节名称放在对应进度的上方。 进度条上，不同的章节，有分隔线隔开。 请创建一个ini文件，我会把进度条的时间，放在这个配置文件中，配置文件中会给出帧率、章节标题、起始时间（分:秒），结束时间(分:秒)格式如下： fps=30 [chapters] 1=开场介绍,00:00,00:35 2=主要话题,00:35,00:47 3=详细说明,00:47,01:28 4=总结,01:28,01:50 按照上述提示词生成的remotion代码，会先读取ini文件中的内容。 根据具体配置，例如：篇章标题、起始时间、终止时间……动态地制作出进度条效果。 避免每次制作新的进度条，仍需要问ai的不利情况，节省token的使用。 开源链接 以上视频效果，已开源至 github 平台。请点击项目链接，自行浏览。 以上就是本期分享，可以根据自身需求，并参考一下提示词的写法，写出自己想要的提示词。

今天分享一下 remotion 面板功能，以及如何通过代码微调视频元素。 建议先看之前的视频，视频介绍了 remotion 初级使用方法。 以下为文档内容，也可以点击视频观看讲解。 1、面板介绍和关键帧。 “- +” - 调整轨道的大小。 “fit” - 放大、缩小画布。 “1x” - 调整播放速度。 “[ ]” - 隐藏当前位置的左、右区域，会影响导出视频。 “棋盘格” - 显示透明区域。 “方块” - 选中画布中的元素。 当我们选中画布中的元素之后，可以对其进行调整。 右侧是调整面板。 layout - 自动填充、自定义调整。 transform origin - 圆心位置调整位移。 offset - 移动。 scale - 放大缩小、是否按照比例。 rotation - 旋转。 Opacity - 透明度。 Premount For - 预加载。 预加载的意思是，提前挂起这个组件。瑜伽在功能，可避免： 开头几帧黑屏 图片闪烁一下才出现 字体跳变 effects - 添加特效。例如，uvTranslate() 移动特效。通过关键帧，看到实际效果。 点击菱形，可以添加关键帧和取消关键帧。 下半部可以选择视频轨道和视频片段。 小眼睛 - 隐藏/显示视频。 ...

今天的文章，分享一下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 编程工具 其它目录： ...