Framefields

这个 Agent 能做什么，适合哪些场景？

Framefields 是一个 npm 包，把通常分散在三类桌面创意软件中的能力——Photoshop 式合成与 VFX、After Effects 式文字排版与动效、Blender 式 3D 场景与相机——打包给编码智能体使用。它不依赖 Chromium、Puppeteer 或截图流水线，而是通过 Dawn/WebGPU（macOS Metal、Linux Vulkan、Windows D3D12）直接在 GPU 上渲染，并导出硬件编码的 MP4。渲染采用离散采样点、绝对帧时钟和帧级精确的音频 BeatGrid，保证确定性且不漂移。智能体编写 TypeScript，检查渲染出的帧网格，并无头地完成导出；内置组件如鼠标指针、代码块、字幕条可通过 framefields add 以 shadcn 风格复制源码到项目中，由用户完全掌控。仓库状态为 beta，Apache-2.0 许可，附带 AI Gateway（可选）用于以托管模型生成图像、视频、音乐与配音。

安装后，智能体用 TypeScript 编写合成：创建 Composition（如 1080p60），用 Layer.box/Layer.flex/Layer.text 组装布局，用 LayerAnimation.create() 定义缓动动画（如 back.out(1.5)、fadeIn），然后调用 comp.renderVideo({ outputPath, quality }) 导出硬件编码的 MP4。CLI 方面，framefields init my-film --install 生成完整项目（film.ts、render.ts、带 Git LFS 的 assets/ 及字体），pnpm frames -- 0 30 60 渲染首帧，npx framefields list 与 npx framefields add mouse-pointer focus-zoom 将组件源码写入 src/components/。可选地配置 FRAMEFIELDS_API_KEY 后，AI Gateway 可从代码调用托管模型生成视频、图像、音乐与配音。仓库还提供文档化的 50+ WebGPU 2D 着色器、glTF/GLB 3D 场景、程序化音效以及 Apache-2.0 的 ONNX 视觉模型。

1. 开发者想让 Claude Code 或 Codex 自动生成产品演示与 API 文档视频，作为可版本控制、可重复渲染的代码而非手工时间线工程。
2. 内容团队需要批量、帧级精确地渲染带文字动画与代码块的教学视频，并在 CI 中无头运行。
3. 独立创作者想构建可复用、可自行修改的动效组件库（如 MousePointer、focus-zoom），而不依赖闭源套件。
4. 有 AI Gateway API Key 的用户想从同一份 TypeScript 代码中调用托管模型生成配图、音乐或配音并合入成片。
5. 没有独立显卡的 CI 环境（Linux/Windows）需要渲染测试帧时，可使用 Mesa lavapipe/WARP 的 CPU 回退路径。

如何安装或部署这个 Agent？

要求 Node.js ≥ 22；macOS（Metal）、Linux（Vulkan）、Windows（D3D12）可获原生 GPU 加速，无独显的 Linux/Windows 机器可通过 Mesa lavapipe 或 WARP 用 CPU 渲染（约慢 10–12 倍，适合无头 CI）。

新建项目：

pnpm dlx framefields init my-film --install
# 或: npx framefields init my-film --install
cd my-film && pnpm frames -- 0 30 60

在现有项目中作为依赖安装：

pnpm add framefields

将其技能加入你的智能体：

npx skills add gatewai-dev/framefields

可选：如需使用 AI Gateway，在 framefields.dev/dashboard 创建密钥，将 .env.example 复制为 .env 并填入 FRAMEFIELDS_API_KEY。

如何使用这个 Agent？

先写合成，再渲染。完整可运行示例：

import { Composition, Layer, LayerAnimation } from "framefields";

const comp = new Composition({
  width: 1920,
  height: 1080,
  fps: 60,
  durationFrames: 180,
  backgroundColor: "#090a0f",
  fonts: ["assets/fonts/Inter.ttf", "assets/fonts/SpaceGrotesk.ttf"],
});

const entrance = LayerAnimation.create()
  .fadeIn(0, 20, "power2.out")
  .fromTo("y", 60, 0, { start: 0, end: 35, ease: "back.out(1.5)" });

const heroCard = Layer.box({
  width: 760,
  height: 380,
  background: "#141721",
  borderRadius: 24,
  children: [
    Layer.flex({
      dir: "column",
      gap: 16,
      children: [
        Layer.text("FRAMEFIELDS ENGINE", { fontSize: 16, fill: "#6366f1" }),
        Layer.text("Code-First Video", { fontSize: 48, fill: "#f8fafc" }),
      ],
    }),
  ],
}).animate(entrance);

comp.add(heroCard);

const { filePath } = await comp.renderVideo({
  outputPath: "output/hero.mp4",
  quality: "high",
});
console.log(`Rendered to: ${filePath}`);
process.exit(0);

常用 CLI 命令：

npx framefields list
npx framefields add mouse-pointer focus-zoom

添加的组件只导入 framefields，你可自由修改其源码；已编辑的文件不会被覆盖，除非传入 --overwrite。组件的每个事件都是 cue，例如 pointer.cues.clicks[0].frame 可用来对齐音效或动画。

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

常见问题