gatewai-dev/framefields

选用指南

AI 根据 README 整理 · 2026/10/16 21:31:36

适用场景

适用于需要代码驱动视频生成的场景，如 AI 代理自动生成视频、程序化动态图形和 3D 场景渲染。

查看 README 依据

Framefields is built for coding agents. It packs the capabilities usually split across three desktop creative suites—Photoshop-style compositing & VFX, After Effects-style typography & motion graphics, and Blender-style 3D scenes & cameras—into a single lightweight npm package. - **Zero Headless-Browser Overhead** — No Chromium, no Puppeteer, no DOM reflows, and no screenshot pipeline. Renders directly on native GPU hardware via Dawn / WebGPU / Metal / Vulkan.

- **Deterministic & Frame-Accurate** — Discrete sample points, absolute frame clocks, and frame-accurate audio BeatGrids. No floating timers, no drift. - **Agent-First Workflow** — Your coding agent writes TypeScript, inspects rendered frame grids, and exports hardware-encoded MP4s headlessly. ### Made with framefields Every frame is rendered by framefields directly from TypeScript in [`examples/`](examples). Click a still to watch on YouTube: <table> <tr> <td width="50%" align="center">

使用方式

通过 npm 安装，使用 TypeScript 编写代码创建合成、图层和动画，并渲染为 MP4 文件。

查看 README 依据

npx skills add gatewai-dev/framefields ``` --- ## Installation ```bash pnpm add framefields ``` > **Requirements:** Node.js ≥ 22. Native GPU acceleration via WebGPU / Dawn (macOS Metal, Linux Vulkan, Windows D3D12). --- ## Quickstart ```typescript import { Composition, Layer, LayerAnimation } from "framefields"; // 1. Create a 1080p60 composition const comp = new Composition({ width: 1920, height: 1080, fps: 60, durationFrames: 180, // 3 seconds backgroundColor: "#090a0f", fonts: ["assets/fonts/Inter.ttf", "assets/fonts/SpaceGrotesk.ttf"], });

// 4. Render to hardware-encoded MP4 const { filePath } = await comp.renderVideo({ outputPath: "output/hero.mp4", quality: "high", }); console.log(`Rendered to: ${filePath}`); process.exit(0); ``` --- ## Documentation Everything else—including full API references, interactive tutorials, and guides—is available at [**framefields.dev/docs**](https://framefields.dev/docs): - **[Typography & Animators](https://framefields.dev/docs)** — Slug analytic vector text, After Effects-style range animators, and typewriter cadence

部署要求

需要 Node.js ≥ 22，以及支持 WebGPU 的 GPU（macOS Metal、Linux Vulkan、Windows D3D12）。

查看 README 依据

npx skills add gatewai-dev/framefields ``` --- ## Installation ```bash pnpm add framefields ``` > **Requirements:** Node.js ≥ 22. Native GPU acceleration via WebGPU / Dawn (macOS Metal, Linux Vulkan, Windows D3D12). --- ## Quickstart ```typescript import { Composition, Layer, LayerAnimation } from "framefields"; // 1. Create a 1080p60 composition const comp = new Composition({ width: 1920, height: 1080, fps: 60, durationFrames: 180, // 3 seconds backgroundColor: "#090a0f", fonts: ["assets/fonts/Inter.ttf", "assets/fonts/SpaceGrotesk.ttf"], });