Framefields Vibe 项目

项目简介

Framefields 是一个用 TypeScript 写成、由 AI 编程代理驱动的代码优先视频引擎。作者把通常分散在三家桌面创意套件里的能力——类 Photoshop 的合成与特效、类 After Effects 的排版与动效、类 Blender 的三维场景与摄像机——打包进一个轻量 npm 包。它的自我定位很直接：让编码代理写代码、检查渲染帧网格、无头导出硬件编码的 MP4。仓库用 Apache-2.0 协议开源，当前 447 星、26 次 fork，TypeScript 开发，2026 年 10 月初建仓，仍处于 beta 阶段。

核心功能

1. 零无头浏览器开销：不依赖 Chromium、不需要 Puppeteer、没有 DOM 重排与截图流水线，直接通过 Dawn / WebGPU / Metal / Vulkan 调用原生 GPU 硬件渲染。
2. 帧级确定性与精确：采用离散采样点与绝对帧时钟，配以帧精确的音频 BeatGrids，不存在浮点计时导致的漂移。
3. 矢量排版：Slug 解析式矢量字形按像素求解轮廓，从 10 像素到 1 万像素都保持锐利，支持 After Effects 式的区间动画选择器与打字机节奏。
4. WebGPU 二维特效：50 余款着色器，包括三维 LUT、曲线、胶片颗粒、玻璃拟态与模糊。
5. 统一三维场景：LookAt 摄像机与二维像素 1:1 对齐，基于物理的材质、基于图像的光照、阴影、泛光、环境光遮蔽，以及 OBJ、FBX、glTF、STL、PLY、VOX 模型的蒙皮支持。
6. 音频与程序化音效：BeatGrids 对齐音频，程序化生成的呼啸与撞击音，音频可驱动画面信号。
7. 本地视觉能力：基于 Apache-2.0 的 ONNX 模型做目标跟踪、姿态估计与主体抠除。
8. 实时浏览器预览：本地 WebGPU 播放器支持时间轴拖拽、波形与逐帧步进。

技术实现

底层渲染管线完全跑在 WebGPU 与 WGSL 之上，跨平台分别落到 macOS 的 Metal、Linux 的 Vulkan 与 Windows 的 D3D12，引擎本身只用 Node.js 22 以上的标准能力。排版走的是解析式矢量字形方案，字形轮廓按像素求解而不是贴图缩放，所以排版在任意字号下都保持锐利。动画体系借鉴 After Effects 的区间动画选择器，采样点离散化加上绝对帧时钟，让长时间渲染不会出现浮点计时造成的累积漂移，音频侧则以帧精确的 BeatGrids 与音频信号做对齐，保证声画同步。三维与二维共用同一套摄像机坐标，摄像机与二维像素严格 1:1 对齐，材质使用基于物理的渲染模型，光照、阴影、泛光与环境光遮蔽都在同一着色管线内完成。输出端走硬件编码直接产出 MP4，不经过浏览器截屏。

快速上手

1. 准备环境：安装 Node.js 22 及以上版本，确认机器具备 WebGPU 能力（Apple Silicon 走 Metal，Linux 走 Vulkan，Windows 走 D3D12）。
2. 安装依赖：在项目里执行 pnpm add framefields。
3. 创建合成：用 Composition 定义画布尺寸、帧率、总帧数、背景色与字体，用 LayerAnimation 编排入场动画，用 Layer.box、Layer.flex、Layer.text 组装版面。
4. 挂载图层：把构建好的图层通过 comp.add 加入合成，形成完整的画面结构。
5. 渲染输出：调用 comp.renderVideo 指定输出路径与画质等级，得到硬件编码的 MP4 文件。
6. 接入代理：Claude Code 用户执行 /plugin install framefields；Cursor、Codex、Gemini CLI、Copilot 等客户端执行 npx skills add gatewai-dev/framefields，代理即可按官方技能规范撰写与渲染。

适用人群

需要批量产出动态图、标题卡、数据可视化短片与营销素材的开发者，希望让编码代理直接接管视频生产的团队，以及偏好代码化、可复现、可版本管理的创意流水线的工作室与技术作者。

社区与许可

项目由 gatewai-dev 组织维护，托管在 GitHub，采用 Apache-2.0 协议开源，官方文档站为 framefields.dev/docs，示例工程在仓库 examples 目录内，另有 Discord 社区与 YouTube 频道展示成片。

官方链接

https://github.com/gatewai-dev/framefields