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

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.