Framefields：用 TypeScript 代码生成视频

Framefields 是一个面向开发者和 AI 编程助手的开源视频引擎，用 TypeScript 描述画面、动画与时间，再通过 GPU 渲染成视频。它把动态图形、图像处理、三维场景和音频放进同一个可修改的项目，适合希望把视频制作纳入代码工作流的创作者与团队。

通俗解释：Framefields 这个网站是干什么用的？

你可以把 Framefields 理解为“把视频设计稿写成程序，再把程序变成视频”的工具。比如制作一段产品介绍：先出现标题，然后柱状图增长，接着展示旋转的三维物体，最后切到结束画面。代码负责说明每个元素放在哪里、何时出现、怎样运动，Framefields 负责把这些说明渲染成一帧帧画面和最终视频。

网站本身提供产品入口、官方文档、安装方式与作品示例。真正使用时，需要在电脑或自己部署的渲染环境中建立项目。你可以自己写 TypeScript，也可以给 AI 编程助手安装官方技能，让助手根据需求编写和调整代码。因此，评估它时，重点是能否接受代码项目、环境配置和画面检查这套流程。

从动态文字到三维场景，可以制作哪些内容？

标题与动态图形。 Framefields 支持矢量文字、逐字符动画、关键帧和弹性布局。制作片头、功能介绍或解释型动画时，可以把文字、位置、颜色与运动写进组合场景，并在下一版修改文本或时间，而不必重新搭建整个项目。

图像与视频合成。 图片和视频图层可以结合调色、模糊、颗粒、LUT、遮罩与转场，既能处理单张图片，也能参与完整视频。效果是否合适仍需要结合真实素材检查，功能列表不等于自动完成视觉设计。

三维与数据展示。 相机、灯光、材质和导入的三维模型可以与二维元素同场合成。图表、Lottie 动画也能加入画面，适合产品演示、动态数据讲解和重复使用的品牌版式。

声音与画面配合。 音轨、程序化音效和音频反应信号可用于协调运动与声音。创作者仍需提供适当的素材、节奏与叙事安排，不能仅凭代码运行成功就判断成片质量。

怎样完成一次从需求到 MP4 的制作？

1. 准备运行环境。 按官方快速开始文档配置 Node.js 22 或更新版本、ES 模块项目和兼容的图形后端；安装前遵循文档对原生依赖脚本的授权要求。
2. 说明要做的视频。 如果使用 AI 编程助手，安装官方技能后，把受众、画面文字、时长、横竖屏比例、已有素材和输出要求写清楚。首次尝试可以先做短标题卡，再逐步加入图表、三维和音频。
3. 组织项目与素材。 官方示例把公共主题、场景构建和渲染脚本分开。字体需要真实文件，图片、视频和音频也必须能被项目找到；通过 Git LFS 管理的素材要先拉取完整文件，不能只留下指针文件。
4. 先检查，再完整渲染。 执行类型检查，输出几个关键时刻的 PNG，检查文字、位置和透明度，再用帧网格观察运动变化。在本地预览里播放声音、拖动时间位置，必要时直接在画面上留下修改标记。
5. 导出并验收。 启用 QA 渲染 MP4，阅读检查结果，再实际播放导出文件，确认文字可读、转场合理、音画衔接正确。

本地预览支持逐帧查看和画面标注，能够把“这个标题挡住了主体”“这段动画太快”等反馈落到具体位置。让测试、预览和导出共用同一个场景构建函数，也有助于减少不同版本之间的偏差。

本地视觉识别能做什么，检查时要注意什么？

Framefields 的 ONNX 视觉模型可以执行对象检测、实例分割、人体姿态估计和人物遮罩。实际用途包括让标签跟随物体、把主体从背景中分离，或辅助调整构图。

这里有一个重要的操作边界：渲染时的 withVision 使用前一个已渲染画面的分析结果，第 0 帧没有结果。检查这一路径时，应查看连续帧或导出视频；直接用相隔较远的帧组成网格，可能无法正确反映视觉效果。官方另有按需分析源素材的路径，两者的时序不要混用。具体规则见视觉处理文档。

硬件要求、部署方式与当前限制

原生导出采用 WebGPU 渲染，不依赖逐张截取无头 Chromium 页面。它仍然需要合适的图形后端；受支持环境可以使用软件渲染，但速度会更慢。官网的某台设备演示成绩不能直接视为所有电脑、分辨率和场景的速度保证。

截至 2026 年 10 月 21 日，官网仍将项目标记为 beta。实际项目应固定版本，并用自己的字体、模型和视频素材测试关键场景。它适合愿意使用开发工具、需要可修改视频源码的人；如果期待打开网页就拖放剪辑，环境搭建本身就是需要考虑的使用门槛。

官方还提供可自行部署的渲染 worker，从 Git 项目和锁定版本构建视频，再把输出送往配置的存储。这属于另行配置的基础设施，不代表已提供免费托管渲染额度。

免费与开源边界，以及文件会在哪里处理

核实日期为 2026 年 10 月 21 日：Framefields 采用 Apache-2.0 开源许可。本地库的使用不是官网展示的月度积分订阅；AI 编程助手订阅、计算资源、存储和素材授权需要分别考虑。未核实到统一的托管服务价格或免费云端月额度，因此不作这类承诺。项目许可也不替你取得音乐、字体、图片或导入模型的权利。

视觉模型在首次使用时下载，并在本地缓存。官方技能本身是说明文档，不包含主动发送数据的执行程序；但这不能推导为整套工作流“绝不联网”或“所有数据永不离开电脑”。你选择的 AI 编程助手、远程渲染服务器和存储服务有各自的数据处理边界，分享项目素材前应分别确认。

常见问题

不想自己写每一行代码，可以使用吗？

可以让具备相应能力的 AI 编程助手按官方技能编写和修改 TypeScript。不过仍需准备运行环境、提供可用素材，并检查最终画面；助手写完代码不代表视频已经可以交付。

最终能得到什么文件，怎样检查效果？

官方流程包含 PNG 单帧、帧网格和 MP4 视频。普通动画可通过关键帧、网格和带声音的预览检查；使用 withVision 的视觉效果应重点查看连续帧或成片。

开源是否意味着制作视频完全没有成本？

不意味着。软件许可、AI 服务、硬件或云端算力，以及字体和音乐授权是不同事项。先用短项目测试自己的环境，再评估持续制作的成本更实际。

官方资源与开发者社区

• AI 编程助手技能与工作流：查看安装方式和编写、检查、预览、交付步骤。
• GitHub 源码与示例：阅读项目、参考作品和提交问题。
• 官方 Discord 社区：参与使用讨论。
• Gatewai 官方 YouTube 频道：观看参考作品。