Skip to content
framefields

framefields docs

View .mdllms.txt

framefields is a TypeScript library that renders video on the GPU, frame by frame, straight to MP4. A video is a Composition: a tree of layers with keyframed animation. It renders natively on WebGPU (Dawn → Metal / Vulkan) in Node.js — no browser, no Puppeteer, no screenshots.

It is built to be driven by coding agents. Give yours the skills, then ask for a video:

/plugin install framefields

More in framefields for agents. Or write it yourself — this is a complete film:

src/film.ts
import { Composition, FontManager, Layer, LayerAnimation } from "framefields";


export async function buildFilm() {
  await FontManager.register({ family: "Inter", source: "assets/fonts/Inter.ttf" });


  const film = new Composition({
    width: 1920,
    height: 1080,
    fps: 30,
    durationMs: 3000,
    backgroundColor: "#0e0d0c",
  });


  film.add(
    Layer.text("Hello, framefields", {
      position: "absolute",
      x: 0, y: 480, width: 1920, height: 120,
      fontFamily: "Inter", fontSize: 96, fontWeight: 700,
      fill: "#eee9e0", align: "center",
    }).animate(
      LayerAnimation.create()
        .fadeIn(0, 20, "power2.out")
        .fromTo("y", 520, 480, { start: 0, end: 30, ease: "expo.out" }),
    ),
  );


  return film;
}


// elsewhere: await (await buildFilm()).renderVideo({ outputPath: "output/hello.mp4" });

What it covers

Section titled “What it covers”
Area You get
Layout & type Flexbox (Yoga) boxes, GPU vector text (Slug), rich text, RTL, text animators
Motion Keyframes, 13 easing families, springs, wiggles, signals, scene transitions
Effects 52 GPU effects: grading, grain, blur, LUTs, keying, glass, relighting, audio DSP
3D Cameras, lights, PBR environment, shadows, bloom, primitives, glTF/OBJ/FBX/STL/PLY models
Audio Soundtracks, procedural SFX, audio-reactive signals
Data Animated line, area, bar, scatter, candlestick, pie and donut charts
Vision On-device detection, segmentation, pose and mattes driving layout and effects
Delivery PNG frames, contact-sheet grids, MP4 with built-in QA, live browser preview

Start here

Section titled “Start here”
Getting startedInstall, scaffold, and render your first MP4.
framefields for agentsInstall the skills, the agent workflow, example prompts.
Core conceptsCompositions, frames, layer trees, timing and layout.
Authoring rulesThe short list of rules that prevent most broken renders.

For agents

Section titled “For agents”

Requirements: Node.js ≥ 22, an ES module project, and a WebGPU-capable GPU (Metal on macOS, Vulkan on Linux/Windows). There is no CPU fallback. framefields is Apache-2.0 and in beta (v2.1).