# framefields

> Open-source TypeScript library that renders motion graphics, 3D and audio on the GPU straight to MP4, built to be driven by coding agents.

framefields is an open-source TypeScript library from Gatewai that renders video frame by frame on the GPU and writes it directly to MP4. It is designed to be driven by coding agents such as Claude Code, Codex and Cursor, which write the composition code, inspect rendered frames and ship the result. The project is currently at version 2.2 and in beta, licensed under Apache-2.0.

## What It Is

A video in framefields is a `Composition`: a tree of layers with keyframed animation. It renders natively on WebGPU (Dawn to Metal or Vulkan) in Node.js, with no headless browser, Puppeteer or screenshot pipeline. Timing is based on the frame number rather than wall-clock timers, so output is deterministic and frame-accurate.

The docs describe it as bringing together compositing and VFX, typography and motion graphics, and 3D scenes in a single npm package.

## What You Can Build

- Typography: GPU vector text that stays sharp across sizes, flexbox layout via Yoga, rich text, RTL support, and After Effects-style text animators and typewriter timing.
- Motion and effects: keyframes, easing families, springs, scene transitions, and 54 GPU effects including grading, LUTs, grain, blur, keying, glass and halftone.
- 3D: cameras, lights, PBR materials, shadows, bloom, primitives, and models in glTF, OBJ, FBX, STL, PLY and VOX formats.
- Physics and particles: deterministic 2D and 3D rigid bodies and GPU compute particles.
- Audio: soundtracks, procedural sound effects on a beat grid, and audio-reactive signals.
- Data and vision: animated charts, Lottie files, and on-device ONNX detection, segmentation, pose and mattes.

## Agent Workflow

Agent skills install in Claude Code with `/plugin install framefields`, or in Codex, Cursor, Gemini CLI and others with `npx skills add gatewai-dev/framefields`. The agent writes TypeScript, renders contact-sheet grids of frames to check easing and transitions, and exports MP4 with built-in QA. A local WebGPU preview player supports scrubbing, frame stepping and pinned notes for the agent to apply. Motion can also be tested in Vitest by asserting on pixels or frame-to-frame change. Documentation pages have Markdown twins and llms.txt files for machine reading.

## Setup Path

Install with `pnpm add framefields`. It requires Node.js 22 or newer, an ES module project, and a WebGPU-capable GPU (Metal on macOS, Vulkan on Linux and Windows). Without a GPU, Linux falls back to a much slower CPU driver. The site compares memory use with headless Chromium rendering, stating 200-400 MB per worker for framefields versus 2-4 GB.

## Features
- GPU rendering straight to MP4 without a headless browser
- Deterministic frame-number-based timing
- GPU vector text with letter-by-letter animators
- 3D scenes with PBR materials, shadows and bloom
- 54 GPU effects including LUTs, halftone, glass and keying
- Rigid-body physics and GPU particles
- Soundtracks, procedural SFX and audio-reactive signals
- Animated charts and Lottie support
- On-device vision via ONNX (detection, segmentation, pose, mattes)
- Live WebGPU preview with notes for agents
- Contact-sheet frame grids and Vitest motion tests
- Agent skills for Claude Code, Codex, Cursor and others

## Integrations
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Hermes, ONNX, Vitest, Lottie, npm

## Platforms
WINDOWS, MACOS, LINUX, API, DEVELOPER_SDK, CLI

## Pricing
Open Source

## Version
2.2

## Links
- Website: https://framefields.dev
- Documentation: https://framefields.dev/docs
- Repository: https://github.com/gatewai-dev/framefields
- EveryDev.ai: https://www.everydev.ai/tools/framefields