Video your coding agent can write, check and ship.

What's in the package

One WebGPU engine for video production, image editing and motion graphics. Driven with TypeScript, rendered straight to pixels.

• 

  Type that stays sharp

  Glyph outlines are solved per pixel on the GPU, so text is crisp from 10 px to 10,000 px. Perfect for kinetic video titles or high-resolution marketing stills. Animate letter by letter with After Effects-style selectors and typewriter timing.

• 

  3D in the same frame

  A camera that lines up 1:1 with 2D pixels. Physically based materials, image-based light, shadows, bloom, ambient occlusion and skinned models from OBJ, FBX, glTF, STL, PLY and VOX.

• Image editing & 50+ effects

  Curves, levels, selective colour, 3D LUTs, halftone, film grain, mesh warp, liquify, glass, track mattes and scene transitions. Full GPU image processing for standalone photos or video frames with Media.image.

  

  

  

  

• Vision on the device

  Detection, segmentation, pose and person mattes through ONNX. Pin graphics to a tracked object, cut a subject out, or reframe 16:9 to 9:16.

• 

  A live preview

  A local WebGPU player runs the composition itself. Scrub, step frame by frame, and pin notes on the picture for your agent to apply.

• Sound on the same clock

  Soundtrack layers placed to the frame, procedural sound effects on a beat grid, and signals from the audio that can drive any property.

• 

  Charts and Lottie

  Line, bar, scatter, candlestick and pie charts are ordinary layers. Lottie and dotLottie files composite on the GPU with everything else.

• Tests for motion & stills

  Render a grid of frames to check easing and transitions at a glance, export pixel-perfect stills, and assert on pixels or frame-to-frame change in Vitest.

  

Why not record a headless browser?

Longer films made with it

Each one is a folder in the repository's examples. They play on YouTube.

• The framefields launch film
• A Mac keyboard built from 3D primitives
• Full Circle
• A dancer, tracked and composited

$ npx framefields render film --cloud --plan
Plan: 4 workers, 1 h 50 min of render work, ready in
about 35 min, estimated $1.20.

$ npx framefields render film --cloud
Measuring frame costs on one worker to plan the split…
Rendering 4 chunks and the audio in parallel…
Rendering 62% (66960/108000 frames), about 13 min
left, $0.74 so far.
Joining 4 chunks…
Done in 34 min: output/film.mp4, 6620 GPU seconds, $1.18.

• Named renders

  "renders": { "teaser": { "entry": "src/film.ts", "export": "buildTeaser" } }. Nobody has to pick files.

• Same picture, any split

  Particles, trails and datamosh replay the frames before each chunk, so a split render matches a single one.

• Built for agents

  renderCloud() and a REST API, so your agent can plan, render, track and cancel a film by itself.

import { ai, Layer } from "framefields";

ai.config({ apiKey: "ff_live_..." });

const { data } = await ai.subscribe("flux/schnell", {
  input: { prompt: "Neon monolith rotating in mist, 35mm film" },
});

const hero = Layer.image(data.images[0].url);

• Every model documented

  Inputs, outputs and price for each endpoint, in the model catalog.

• Queue, run or stream

  subscribe() for long jobs, run() for quick calls, stream() for server-sent events.

• Readable by agents

  Your agent can look up schemas and prices itself with GET /v1/models.