Framefields

What does this agent do, and when should you use it?

Framefields is an npm package that packs capabilities normally 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 package driven by coding agents. It skips Chromium, Puppeteer and screenshot pipelines entirely, rendering directly on native GPU hardware via Dawn/WebGPU (Metal on macOS, Vulkan on Linux, D3D12 on Windows) and exporting hardware-encoded MP4s. Rendering is deterministic and frame-accurate, using discrete sample points, absolute frame clocks and audio BeatGrids. Agents write TypeScript, inspect rendered frame grids and export headlessly; ready-made components like mouse pointers, terminals and lower thirds are copied into your project shadcn-style via framefields add, so every curve, glyph and layout is yours to edit. The repository is in beta, Apache-2.0 licensed, and includes an optional AI Gateway for generating images, video, music and voiceovers from hosted models.

After installation, agents author compositions in TypeScript: create a Composition (e.g. 1080p60), assemble layouts with Layer.box/Layer.flex/Layer.text, define eased animations with LayerAnimation.create() (e.g. back.out(1.5), fadeIn), then call comp.renderVideo({ outputPath, quality }) to export a hardware-encoded MP4. On the CLI, framefields init my-film --install scaffolds a complete project (film.ts, render.ts, assets/ with Git LFS, plus fonts), pnpm frames -- 0 30 60 renders the first frames, and npx framefields list / npx framefields add mouse-pointer focus-zoom copy component source into src/components/. Optionally, with a FRAMEFIELDS_API_KEY, the AI Gateway calls hundreds of hosted models to generate video, images, music and voiceovers from code. The repository also documents 50+ WebGPU 2D shaders, glTF/GLB 3D scenes, procedural SFX and BeatGrids, and Apache-2.0 ONNX vision models for tracking and cutouts.

1. Developers who want Claude Code or Codex to generate product demos and API explainer videos as version-controlled, reproducibly rendered code rather than manual timeline work.
2. Content teams batch-rendering frame-accurate tutorial videos with text animations and code blocks, run headlessly in CI.
3. Indie creators building a reusable, fully editable library of motion components (e.g. MousePointer, focus-zoom) without depending on closed suites.
4. Users with an AI Gateway API key who want to generate imagery, music or voiceover from hosted models inside the same TypeScript project and merge it into the film.
5. CI machines without a dedicated GPU (Linux/Windows) rendering test frames via the Mesa lavapipe/WARP CPU fallback.

How do you install or deploy this agent?

Requires Node.js >= 22; native GPU acceleration on macOS (Metal), Linux (Vulkan) and Windows (D3D12). Machines without a dedicated GPU can render on CPU via Mesa lavapipe (Linux) or WARP (Windows), roughly 10–12x slower — suitable for headless CI and test frames.

Start a new project:

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

Install into an existing project:

pnpm add framefields

Add the skill to your agent:

npx skills add gatewai-dev/framefields

Optional: to use the AI Gateway, create a key at framefields.dev/dashboard, copy .env.example to .env and set FRAMEFIELDS_API_KEY.

How do you use this agent?

Write a composition, then render it. Full runnable example:

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);

Common CLI commands:

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

Added components import only framefields and are fully yours to edit; edited files are never overwritten unless you pass --overwrite. Every component event is a cue — e.g. pointer.cues.clicks[0].frame lets you key a sound or animation to a click.

What are this agent's strengths and limitations?

How does this agent compare with similar options?

Key facts side by side with the most closely related agents.

How does FollowAgents rate this agent?

FAQ