Framefields

Framefields is an open-source, code-first video engine built for coding agents and engineers. It ships as a single npm package that an agent drives with TypeScript to author motion graphics, type, charts, 3D scenes, visual effects and audio, then render the result to an MP4 on the GPU. Its stated purpose is to give a coding agent everything it needs to write video, check its own frames, and ship the finished file. The package bundles the capabilities that would otherwise require a stack of separate tools: glyph-accurate typography solved on the GPU, a 3D renderer whose camera lines up one-to-one with 2D pixels, more than 50 effects, on-device vision through ONNX, a local WebGPU preview player, and audio that runs on the same clock as the picture. It is aimed at people who prefer composing video in code rather than in a timeline application, and at the AI agents working alongside them. Framefields positions itself as an alternative to recording a headless browser. The site walks through the trade-offs directly: a headless Chromium pipeline lays out the DOM and then takes a screenshot, while Framefields renders straight to a GPU texture. Where a browser-based approach depends on wall-clock timers that can drift, Framefields times everything by the frame number. Text in a browser is rasterised on the CPU; in Framefields, curves are evaluated per pixel. Memory per worker drops from roughly 2-4 GB with headless Chromium to 200-400 MB with Framefields. And capabilities that a browser pipeline leaves you to bring yourself, such as 3D, effects and vision, are included in the package. The practical consequence is deterministic, frame-accurate output produced without Chromium or browser overhead, exported as hardware-accelerated MP4s directly from TypeScript. The typography and 3D layers are the two halves of the rendering core. Glyph outlines are solved per pixel on the GPU, so text stays crisp from 10 px up to 10,000 px, which matters when a single composition mixes small captions with oversized display lettering. Text can be animated letter by letter using After Effects-style selectors and typewriter timing. In 3D, a camera lines up 1:1 with 2D pixels, so a 3D element can be placed in the same frame as flat type and graphics without a separate coordinate system. The 3D layer supports physically based materials, image-based light, shadows, bloom, ambient occlusion, and skinned models imported from OBJ, FBX, glTF, STL, PLY and VOX. The example gallery shows this in practice with a Mac keyboard built entirely from 3D primitives. The effects library contains more than 50 options: curves, levels, selective colour, 3D LUTs, halftone, film grain, mesh warp, liquify, glass, track mattes and scene transitions, with the site also showing gradient map and zoom blur. These are the kinds of corrections and stylisations normally associated with a compositing suite, available as part of the same package. Vision runs on the device through ONNX and covers detection, segmentation, pose and person mattes. That lets a composition pin graphics to a tracked object, cut a subject out of a shot, or reframe 16:9 footage to 9:16 vertically. The site demonstrates the tracked-and-composited case with a dancer example, where graphics follow the subject through the frame. Sound is handled on the same clock as the image. Soundtrack layers can be placed to the frame, procedural sound effects can be generated on a beat grid, and signals extracted from the audio can drive any property in the composition, so motion can respond to the soundtrack. Data visualisation is treated as ordinary layers rather than a special case: line, bar, scatter, candlestick and pie charts are standard layers inside a composition. Lottie and dotLottie files composite on the GPU alongside everything else, which means existing animation assets can be mixed into a Framefields render without a separate render path. The workflow is built around the agent generating and verifying its own output. A local WebGPU player runs the composition itself, so the preview is not a proxy; you can scrub, step frame by frame, and pin notes on the picture for the agent to apply. For motion quality, compositions can be tested: render a grid of frames to check easing and transitions at a glance, and assert on pixels or frame-to-frame change in Vitest. The site reports that a 255-frame, 1920x1080 composition was rendered from film.ts in 2.6 seconds on an Apple M1 Pro using framefields@2.1.1 from npm. The skill installation is equally direct: a plugin install command inside Claude Code, or an npx skills add command for Codex, Cursor, Gemini CLI and other agents, gives the coding agent the Framefields skills it needs. The benefits follow from that architecture. Rendering straight to a GPU texture instead of screenshotting a laid-out page removes a whole layer of tooling, and timing by frame number rather than by wall-clock timers makes output repeatable and frame-accurate. Lower memory per worker of 200-400 MB, against 2-4 GB for headless Chromium, changes how many renders can run in parallel on the same machine. Because 3D, effects and vision ship in the package, the agent does not have to assemble and maintain separate dependencies. And because the agent can preview frames, step through them, read pinned notes and assert on pixel changes in tests, it can iterate on a composition and verify the result before shipping, rather than handing off an unreviewed render. Concrete uses described on the site include launch films, such as the Framefields launch film itself; product scenes built from 3D primitives, illustrated by the Mac keyboard example; longer narrative pieces such as Full Circle; and tracked compositing work such as the dancer, where a subject is tracked and graphics are composited over the footage. The vision feature set supports reframing 16:9 to 9:16 for vertical formats and cutting subjects out of a shot. The chart layers point to data-driven explainers, while soundtrack layers, procedural sound effects on a beat grid and audio-driven properties support music-synchronised motion. Each long-form example lives as a folder in the repository's examples directory. Framefields is open source, with examples hosted in the gatewai-dev/framefields repository on GitHub. The install path differs by agent: `/plugin install framefields` in Claude Code, or `npx skills add gatewai-dev/framefields` for Codex, Cursor, Gemini CLI and others. The package is published on npm, with version 2.1.1 used for the benchmarked render, and it is powered by native WebGPU in Node.js. It is written to be driven with TypeScript, so the composition file, the demo's film.ts, is the source of truth for the video. Product Hunt lists it under Design Tools, Developer Tools, Artificial Intelligence and GitHub topics, which reflects its split identity as both a design tool and a developer library. Framefields reduces video production to a TypeScript file plus a render call, and gives the coding agent the means to check its own frames along the way. One npm package covers type, 3D, effects, vision, charts, Lottie and audio; the GPU handles the render; frame numbers handle the timing; and Vitest handles the assertions. For teams already working with coding agents, that turns video from a separate application and a manual export step into something an agent can write, inspect and ship.