Compositing, motion graphics, and 3D for code-first video — one npm package that AI agents drive with code.

Documentation  ·  Website  ·  Models  ·  Discord  ·  Examples

Add to your agent

Teach Claude Code, Cursor, Codex, Copilot, Hermes, and 70+ others how to author, animate, and render compositions:

npx skills add gatewai-dev/framefields

---

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/. Click a still to watch on YouTube:

Physics dancer 28_physics_dancer	Mac Keyboard 26_mac_keyboard_from_3d_primitives
Framefields launch 22_framefields_launch	Full Circle 21_full_circle
Dancer showcase 19_framefields_film

---

Installation

pnpm add framefields

Starting a new film? framefields init sets up the whole project: package.json, TypeScript, a film.ts to edit and a render.ts to render it, assets/ with Git LFS, and the Inter and JetBrains Mono fonts:

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

Run it inside an existing project to add framefields there; it only fills in what's missing and never overwrites your files. It asks nothing, so it works in CI and on remote servers too.

Requirements: Node.js ≥ 22. Native GPU acceleration via WebGPU / Dawn (macOS Metal, Linux Vulkan, Windows D3D12). Machines without a dedicated GPU can render on the CPU via Mesa lavapipe on Linux or WARP on Windows (~10–12× slower than GPU; suitable for headless CI and test frames).

---

Quickstart

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"],
});

// 2. Physical snap-overshoot entrance animation
const entrance = LayerAnimation.create()
  .fadeIn(0, 20, "power2.out")
  .fromTo("y", 60, 0, { start: 0, end: 35, ease: "back.out(1.5)" })
  .fromTo("scale", 0.92, 1.0, { start: 0, end: 35, ease: "back.out(1.2)" });

// 3. Assemble a responsive flex-layout card with Slug vector type
const heroCard = Layer.box({
  width: 760,
  height: 380,
  background: "#141721",
  borderRadius: 24,
  borderColor: "#262b3d",
  borderWidth: 1.5,
  padding: 40,
  children: [
    Layer.flex({
      dir: "column",
      gap: 16,
      children: [
        Layer.text("FRAMEFIELDS ENGINE", {
          fontSize: 16,
          fontWeight: 700,
          fill: "#6366f1",
          letterSpacing: 2.0,
        }),
        Layer.text("Code-First Video", {
          fontSize: 48,
          fontWeight: 700,
          fill: "#f8fafc",
          fontFamily: "SpaceGrotesk",
        }),
        Layer.text("Direct GPU rendering without headless browser overhead.", {
          fontSize: 20,
          fill: "#94a3b8",
          lineHeight: 28,
        }),
      ],
    }),
  ],
}).animate(entrance);

comp.add(heroCard);

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

---

Components

Ready-made motion pieces you own: a mouse pointer with clicks and drags, a camera that zooms to them, window and device frames, word-timed captions, text reveals, counters, terminals, code blocks, title cards, lower thirds, logo reveals, backdrops, audio waveforms and more. Like a shadcn registry, framefields add copies a component's source into your project instead of hiding it in the package, so you can change any curve, glyph or layout.

npx framefields list                           # every component, one line each
npx framefields add mouse-pointer focus-zoom   # writes src/components/<name>/

import { MousePointer } from "./components/mouse-pointer/index.js";

const pointer = MousePointer({
  path: [{ to: [400, 300] }, { to: [960, 540], click: true }],
});
comp.add(pointer);

// Every event is a cue: key a button press or a click sound to it.
const clickAt = pointer.cues.clicks[0].frame;

Installed components import only framefields and the shared toolkit in framefields/components, and bring along any component they build on. Files you've edited are never overwritten unless you pass --overwrite.

---

AI Gateway

Framefields provides built-in access to the AI Gateway, allowing agents and developers to generate cinematic video, images, music, and voiceovers directly from code using hundreds of hosted models. Explore the full model catalog in the AI Gateway or read the integration guide in the documentation.

The gateway is optional. To use it, create a key at framefields.dev/dashboard and set FRAMEFIELDS_API_KEY. In a project made with framefields init, copy .env.example to .env and put the key there; render.ts loads it.

---

Documentation

Everything else—including full API references, interactive tutorials, and guides—is available at framefields.dev/docs:

• AI Gateway & Asset Generation — Unified SDK for generating images, video clips, music, and voice via hundreds of hosted models
• Typography & Animators — Slug analytic vector text, After Effects-style range animators, and typewriter cadence
• WebGPU 2D VFX — 50+ shaders: 3D LUTs, Curves, Film Grain, Glassmorphism, and Blur
• Unified 3D Scenes — LookAt cameras, PBR materials, studio lighting, shadows, and glTF/GLB models
• Audio & Procedural SFX — BeatGrids, procedural whooshes/impacts, and audio-reactive signals
• On-Device Vision — Apache-2.0 ONNX models for object tracking, pose estimation, and subject cutouts
• Live Browser Preview — Localhost WebGPU player with scrubbing, waveform timeline, and frame-stepping

---

Community & License

• Documentation: framefields.dev/docs
• Website: framefields.dev
• Discord: discord.gg/cbqMGGme5
• YouTube: @gatewai.studio

Licensed under Apache-2.0.