framefields

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

Documentation  ·  Website  ·  Discord  ·  Examples

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:

Agent Skills

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

Claude Code

/plugin install framefields

Cursor, Codex, Hermes, Copilot & others

npx skills add gatewai-dev/framefields

Installation

pnpm add framefields

Requirements: Node.js ≥ 22. Native GPU acceleration via WebGPU / Dawn (macOS Metal, Linux Vulkan, Windows D3D12).

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

Documentation

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

• 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.