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 make motion graphics, type, charts, 3D scenes and audio, check its own rendered frames, and export MP4 video rendered on the GPU. The project calls itself the video engine for coding agents and positions itself against bulky creative suites: instead of assembling a timeline by hand in a desktop application, you write a composition as code, preview it in a local WebGPU player, inspect individual frames, and render the finished film deterministically, frame by frame, from the command line or from inside an agent's workflow. Installation is offered through Claude Code with a plugin command, and through Codex, Cursor, Gemini CLI and other agents with a skills command. The obvious alternative is to record a headless browser: lay out a DOM page, animate it with CSS or JavaScript, and screenshot each frame. Framefields documents why that approach struggles. In a headless browser a frame is captured by laying out the DOM and then taking a screenshot, whereas Framefields renders straight to a GPU texture. Timing in a headless browser depends on wall-clock timers that can drift, while Framefields keys everything to the frame number. Text in a browser is rasterised on the CPU, while Framefields evaluates glyph curves per pixel. Memory per worker is listed at 200–400 MB for Framefields versus 2–4 GB for headless Chromium. And 3D, effects and vision come in the package rather than having to be brought in separately. The stated goal is deterministic, frame-accurate output with no Chromium and no browser overhead, so a render produces the same frames every time it runs. The package covers type that stays sharp. Glyph outlines are solved per pixel on the GPU, so text is crisp from 10 px to 10,000 px, and it can be animated letter by letter with After Effects-style selectors and typewriter timing. That makes kinetic typography and large-scale titles practical in code, without the rasterisation softness that appears when huge text is scaled up in a browser. 3D lives in the same frame as 2D: a camera lines up 1:1 with 2D pixels, and the engine supports physically based materials, image-based light, shadows, bloom, ambient occlusion and skinned models loaded from OBJ, FBX, glTF, STL, PLY and VOX. Because the 3D camera and the 2D coordinate space are aligned, type, charts and graphics can be composed directly against 3D content rather than being layered on in a separate pass. More than 50 effects are included: curves, levels, selective colour, 3D LUTs, halftone, film grain, mesh warp, liquify, glass, track mattes and scene transitions. The site illustrates a handful of them — a portrait rendered as a CMYK halftone print, a portrait remapped to black, grey and yellow with GradientMap, hair twirled into a swirl with Liquify, and a zoom blur radiating from the face. Vision runs on the device: detection, segmentation, pose and person mattes through ONNX, which lets a composition pin graphics to a tracked object, cut a subject out of footage, or reframe 16:9 to 9:16 without sending frames to a remote service. Having tracking and mattes inside the same package means the compositing step happens in the same render as everything else. A live preview ships with the package. A local WebGPU player runs the composition itself rather than playing back a proxy, so you can scrub, step frame by frame, and pin notes on the picture for your agent to apply — closing the loop between what the agent rendered and what you want changed. Sound sits on the same clock: soundtrack layers placed to the frame, procedural sound effects on a beat grid, and signals taken from the audio that can drive any property. Charts and Lottie are first-class citizens — line, bar, scatter, candlestick and pie charts are ordinary layers, and Lottie and dotLottie files composite on the GPU with everything else. Finally, the engine includes tests for motion: 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 overall workflow is code-first and agent-first. You install the package, write a composition — the site's example is a file called film.ts, which can be opened in full — and render it. The site reports that 255 frames at 1920×1080 rendered from film.ts in 2.6 seconds on an Apple M1 Pro with framefields@2.1.1 from npm, and it offers the resulting MP4 for download. Because the composition is code, an agent can write it, run it, look at the rendered frames, and revise. That loop is the product's central idea, summarised as video your coding agent can write, check and ship. Nothing depends on a headless browser, a desktop application or a wall-clock animation timeline; each frame is captured against the frame number and rendered straight to a GPU texture, which is what makes the output deterministic. The stated benefits follow from that design: deterministic, frame-accurate output; much lower memory per worker, listed at 200–400 MB versus 2–4 GB for headless Chromium; crisp type at any scale because curves are evaluated per pixel; 3D, effects and vision available in the package instead of assembled from separate tools; and hardware-accelerated MP4 export directly from TypeScript. The project also frames the package as a replacement for bulky creative suites, with motion graphics, Photoshop-grade VFX, 3D scenes and audio DSP arriving as one npm dependency rather than a stack of applications. Rendering speed is illustrated by the 2.6-second, 255-frame example on an M1 Pro. The repository's examples folder holds longer films built with the engine, each linked to a YouTube video: the Framefields launch film, a Mac keyboard built from 3D primitives, a film called Full Circle, and a dancer that is tracked and composited. Those illustrate the range — brand and launch motion graphics, purely procedural 3D scenes, and footage-driven compositing that depends on the ONNX vision pipeline. The site also names concrete tasks: reframing 16:9 to 9:16, pinning graphics to a tracked object, cutting a subject out, animating charts as ordinary layers, placing sound effects on a beat grid, and rendering frame grids in Vitest to check easing and transitions before committing to a longer render. The product is aimed at AI coding agents and the engineers who operate them: it advertises itself as the video engine built for coding agents, and installs into Claude Code with /plugin install framefields and into Codex, Cursor, Gemini CLI and others with npx skills add gatewai-dev/framefields. The tech named on the site includes TypeScript, native WebGPU in Node.js, ONNX for on-device vision, Vitest for pixel and frame-to-frame assertions, and Lottie and dotLottie support; the package is distributed on npm, with framefields@2.1.1 cited as the version used in the demo render. The project is described as open-source and links to its GitHub repository at gatewai-dev/framefields, where the examples live. The provided content does not list pricing tiers or a paid plan. Framefields makes video something a coding agent can produce end to end: write the composition in TypeScript, preview and annotate it in a local WebGPU player, check frames and assert on motion in Vitest, and render hardware-accelerated MP4 on the GPU without a headless browser or a desktop creative suite.