# Why framefields works well with coding agents

A coding agent can write a video in TypeScript, render a few frames, inspect the results and adjust the composition. Framefields gives it the tools to do that without opening a desktop editor.

The engine renders compositions with WebGPU in Node.js. You describe layers, animation and timing in code, then render a single frame or an MP4. The same source can be read and edited by a person or an agent.

## Start with a frame, not a full export

A full video takes longer to render than a still. Framefields lets an agent work through smaller checks first:

1. Type-check the project and run `comp.lint()` to find common composition problems.
2. Render a frame at a useful moment and inspect it for layout, text and color.
3. Render a frame grid to check a sequence of moments.
4. Open the [live preview](/docs/guides/preview/) for playback, scrubbing and notes.
5. Export the video, with optional QA checks.

The [rendering guide](/docs/guides/rendering/) shows the commands and code for each step. Frame grids are useful for ordinary animation, but not for render-time vision: that needs consecutive frames because its results lag by one frame.

A human can pause the preview and leave a note on the picture, such as “move the title up.” The note is saved locally, so an agent can read it and update the composition. You'll still want to check the result together. A successful render doesn't automatically mean the timing feels right.

## Give the agent useful building blocks

Framefields includes text animation, 2D layers, 3D models, effects, audio and vision. You can see the code and output in our examples:

- [Animate text letter by letter](/blog/kinetic-typography-typescript/).
- [Combine a 3D model and a title](/blog/3d-product-video-typescript/).
- [Apply a color overlay to a segmented person](/blog/track-person-attach-graphics/).

The engine is also behind [Gatewai Studio](https://gatewai.studio). Read more about [its background](/blog/six-months-building-framefields/).

## Give your agent the project instructions

For Claude Code:

```text
/plugin install framefields
```

For other coding agents that support the skills installer:

```bash
npx skills add gatewai-dev/framefields
```

Then give the agent a specific brief, including the size, duration and moments you want to inspect. For example:

```text
Create a five-second product teaser at 1080x1920 and 30 fps.
Add an animated headline and a bar chart. Render frames at the
start, middle and end so I can check the layout before export.
```

Framefields needs Node.js, project assets such as fonts, and a suitable rendering environment. CPU rendering is available on supported setups but is slower. See [getting started](/docs/getting-started/) for requirements and the [agent guide](/docs/agents/) for the workflow.