# framefields docs

> What framefields is, a complete first composition, and where to go next.

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:

**Claude Code**

```text
/plugin install framefields
```

**Any other agent**

```bash
npx skills add gatewai-dev/framefields
```

More in [framefields for agents](/docs/agents/). Or write it yourself — this is a complete film:

```ts title="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 | 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

- [Getting started](/docs/getting-started/): Install, scaffold, and render your first MP4.
- [framefields for agents](/docs/agents/): Install the skills, the agent workflow, example prompts.
- [Core concepts](/docs/core-concepts/): Compositions, frames, layer trees, timing and layout.
- [Authoring rules](/docs/reference/rules/): The short list of rules that prevent most broken renders.

## For agents

**Machine-readable docs**

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

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