framefields | Blog

Add a color overlay to a person in video with TypeScript

Wed, 28 Oct 2026 00:00:00 GMT

Use Framefields to segment a dancer and add a translucent blue overlay that moves with her, while keeping the background visible.

The blue overlay follows the dancer and her dress as she turns. The video has no audio. Open the MP4 or view a still frame.

Segment the dancer

This example uses Framefields 2.6.2 and a three-second clip at assets/footage/person.mp4. Start with a Framefields project, create an output directory, and adjust the dimensions and duration to match your clip.

import { Composition, Layer } from "framefields";

const comp = new Composition({
  width: 1920,
  height: 1080,
  fps: 30,
  durationMs: 3000,
  backgroundColor: "#000000",
});

// Both copies need the same size and fit so the matte lines up with the footage.
const video = () => Layer.video("assets/footage/person.mp4", {
  position: "absolute", x: 0, y: 0,
  width: 1920, height: 1080, fit: "cover", muted: true,
});

comp.add(video());

const personMatte = video().withVision({
  mode: "matte",
  enableSegmentation: true,
  classes: ["person"],
});

comp.add(
  Layer.box({
    position: "absolute", x: 0, y: 0,
    width: 1920, height: 1080,
    background: "#1458ed", opacity: 0.55,
  }).withMatte(personMatte),
);

console.log(comp.lint());
await comp.renderVideo({ outputPath: "output/segmented.mp4" });

The first video is the untouched footage. The second is used as a matte, so it isn’t drawn as another visible copy. It limits the blue box to the detected subject. Change the box color or opacity to try a different look.

Check the edges

Segmentation can miss hands or loose fabric, and the matte can spill onto the background. Watch the full clip, especially around fast movements and objects crossing in front of the subject. In this example, you can see some edge lag as the dress moves.

Render-time vision uses the previous rendered frame, so frame 0 has no segmentation result. renderVideo processes frames in order. For stills, render at least two consecutive frames with the same renderer and inspect the last one. A frame grid jumps around and can give misleading results for vision layers. The vision guide has more on timing.

Models download on first use and inference takes resources. Framefields uses WebGPU when available and can fall back to CPU. See the vision guide for model options, masks and other ways to use them.

Animate text letter by letter with TypeScript

Wed, 28 Oct 2026 00:00:00 GMT

Animate a title letter by letter in TypeScript, then render it to MP4 with Framefields. Change the words and the same animation works with the new text.

The finished title, rendered from the code below. A white title reading “Make something move” appears letter by letter on a dark blue background. The video has no audio. Open the MP4 or view a still frame.

Make a title

Start with a Framefields project. The example uses Framefields 2.6.2 and a local font file at assets/fonts/Inter.ttf. Register the font before creating the text layer: Framefields doesn’t ship fonts or pick one from your system for headless rendering.

import { Composition, FontManager, Layer, LayerAnimation, TextAnimator } from "framefields";

await FontManager.register({ family: "Inter", source: "assets/fonts/Inter.ttf" });

const comp = new Composition({
  width: 1920,
  height: 1080,
  fps: 30,
  durationMs: 3000,
  backgroundColor: "#102450",
});

const title = Layer.text("Make something move", {
  position: "absolute",
  x: 160,
  y: 420,
  width: 1600,
  height: 240,
  fontFamily: "Inter",
  fontSize: 120,
  fill: "#ffffff",
  animators: [TextAnimator.waveRise({ y: 60, rotationX: 45 })],
}).animate(LayerAnimation.create().kineticSweep(-1, 1, 0, 40));

comp.add(title);
console.log(comp.lint());
await comp.renderVideo({ outputPath: "output/title.mp4" });

Create the output directory before running the script. At 30 frames per second, the sweep takes 40 frames, or about 1.3 seconds. Try a shorter sweep for a snappier entrance. If your title wraps, give it more width or reduce the font size.

Check the in-between bits

A title can look fine at the start and end but clip halfway through. Before a full export, render a contact sheet:

await comp.renderFrameGrid({
  frames: [0, 10, 20, 30, 40, 60],
  columns: 3,
  outputPath: "output/title-grid.png",
});

Look for cropped letters and awkward line breaks. If you want words or lines to move together, pass unit: "word" or unit: "line" to waveRise. The default is "character". There are also presets for blur, flips, color sweeps and word pops in the animation guide.

This is useful when the same title treatment needs to work across many names, headlines or languages. You still need to check the result: different text takes up different space, and fonts need to cover the characters you use.

For font registration and text layout, see the text guide. For more ways to inspect a composition before export, see rendering.

Framefields is the engine behind Gatewai Studio

Wed, 28 Oct 2026 00:00:00 GMT

Framefields is the engine behind Gatewai Studio, and it has been running there in production for six months. That experience has made it mature enough to use for real video projects today.

Gatewai Studio is a visual workspace for building media workflows and compositions. People can bring together video, images, text and audio, then render the result. Framefields comes from the engine behind that work. It isn’t a brand-new rendering experiment we put together for a launch.

From a visual studio to code

With Framefields, you can build a composition in TypeScript and render it with WebGPU. That makes the engine accessible to developers and coding agents as well as people working in a visual studio.

You can animate text, combine 2D graphics with 3D models, apply effects, work with audio and use vision models. If you’d like to see the output before reading the API, start with our examples: animated titles, a 3D scene and a segmented video.

A practical way to work

We know that making a video is rarely a one-render job. A title wraps, an asset is the wrong size, or the timing just feels a little off. Framefields lets you check a composition with lint(), render a single frame or a contact sheet, and use a live preview before exporting the full video. The rendering guide covers the workflow.

Six months in production gives the engine a real history. It doesn’t mean every composition or machine will behave perfectly. You’ll still need to register fonts, check your assets and inspect your output. Vision masks, for example, can miss parts of a subject or lag at moving edges. We think it’s better to show those details than pretend they don’t exist.

If you’re curious, the getting started guide will take you through your first render. The source is on GitHub, too.

Make a 3D product video with TypeScript

Wed, 28 Oct 2026 00:00:00 GMT

A spinning product and a title: a small scene, but a useful starting point for a launch video. With Framefields, you can put a 3D model and 2D text in the same composition and describe the animation in TypeScript.

The finished scene uses a simple faceted gem as the model. An orange faceted 3D gem turns beside the title “Made to move” on a dark blue background. The video has no audio. Open the MP4 or view a still frame.

Build the scene

This example uses Framefields 2.6.2, a GLB model at assets/models/product.glb, and a font at assets/fonts/Inter.ttf. Use a model you have permission to publish. Model dimensions vary, so expect to adjust the position and scale for yours.

import { Composition, FontManager, Layer, LayerAnimation, Lighting } from "framefields";

await FontManager.register({ family: "Inter", source: "assets/fonts/Inter.ttf" });

const comp = new Composition({
  width: 1920,
  height: 1080,
  fps: 30,
  durationMs: 4000,
  backgroundColor: "#102450",
});

comp.add(Lighting.studio({ target: [960, 540, 0] }));

comp.add(
  Layer.glb("assets/models/product.glb", {
    x: 1250, y: 540, z: 0, scale: 2,
  }).animate(
    LayerAnimation.create().fromTo("rotateY", -20, 20, {
      start: 0, end: 119, ease: "sine.inOut",
    }),
  ),
);

comp.add(
  Layer.text("Made to move", {
    position: "absolute", x: 120, y: 420, width: 700, height: 180,
    fontFamily: "Inter", fontSize: 100, fill: "#ffffff",
  }).animate(LayerAnimation.create().fadeIn(0, 20, "power2.out")),
);

console.log(comp.lint());
await comp.renderVideo({ outputPath: "output/product.mp4" });

Create the output directory first. The lighting rig sets up an environment and lights; the model turns while the title fades in. If the model is tiny, enormous, or facing the wrong way, adjust its scale and rotation. 3D assets have a knack for arriving with their own ideas about size.

Check the scene before exporting

Render a few frames first with comp.renderFrameGrid(). Check that the model stays in frame and that the title remains readable. You can also change the lighting rig or add bloom, but it’s worth getting the basic placement right first.

Framefields supports several model formats, including GLB, glTF, OBJ and FBX. The 3D guide lists the loaders and documents glTF material and skeletal animation support. Shadows have a constraint: only the first shadow-casting directional or spot light casts a shadow. The same guide covers lighting, bloom and other settings.

For setup and export options, start with getting started and rendering.

Why framefields works well with coding agents

Wed, 14 Oct 2026 00:00:00 GMT

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:

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

The rendering guide 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:

The engine is also behind Gatewai Studio. Read more about its background.

Give your agent the project instructions

For Claude Code:

/plugin install framefields

For other coding agents that support the skills installer:

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:

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 for requirements and the agent guide for the workflow.