framefields docs

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. Add the skills to your agent:

npx skills add gatewai-dev/framefields

Works with Claude, Codex, Cursor, Hermes, Gemini CLI, GitHub Copilot, and 70+ others. 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

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	54 GPU effects: grading, grain, blur, LUTs, keying, glass, trails, datamosh, relighting, audio DSP
3D	Cameras, lights, PBR environment, refracting glass/acrylic, shadows, bloom, primitives, glTF/OBJ/FBX/STL/PLY models
Physics	Deterministic 2D & 3D rigid bodies (Rapier), live worlds, performer deflection, GPU compute particles
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

Examples & showcase

Explore open-source reference films in the GitHub repository:

• Physics dancer (examples/28_physics_dancer) — 3D glass word cards, live Rapier rigid-body collisions against a tracked dancer’s limbs, and silhouette-deflected GPU embers.
• Mac Keyboard (examples/26_mac_keyboard_from_3d_primitives) — Mechanical keyboard built entirely from 3D primitives, PBR materials, and camera rack focus.
• Framefields launch (examples/22_framefields_launch) — Lyric-driven launch film with tight BeatGrid audio synchronization.
• Full Circle (examples/21_full_circle) — Kinetic typography, 3D scenes, and camera trajectories.
• Dancer showcase (examples/19_framefields_film) — Multi-scene brand film with on-device vision mattes, audio reactive signals, and LUT grading.

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

Machine-readable docs

See Docs for agents. Every page has a Markdown twin: swap the trailing / for .md (/docs/guides/animation/ → /docs/guides/animation.md; this page is /docs/index.md). The whole site is in /docs/llms-full.txt, a compact version in /docs/llms-small.txt, and an index in /docs/llms.txt.

Requirements: Node.js ≥ 22, an ES module project, and a WebGPU-capable GPU (Metal on macOS, Vulkan on Linux/Windows). Without a GPU, Linux falls back to a much slower CPU driver. framefields is Apache-2.0 and in beta (v2.2).