After Effects, but your agent writes the timeline

What it does

Framefields is a TypeScript library for authoring and rendering video: you build a Composition from layers — text, boxes, flex layouts, 3D scenes, shaders — animate them with After Effects-style range animators, and export hardware-encoded MP4 headlessly. It’s explicitly built for coding agents like Claude Code and Codex, which write the TypeScript, inspect rendered frame grids, and iterate. The pitch: replace the usual “drive Puppeteer and screenshot a DOM” pipeline with direct WebGPU rendering via Dawn (Metal, Vulkan, D3D12).

The interesting bit

The component system works like a shadcn registry — framefields add copies component source (mouse pointers, captions, terminals, lower thirds) into your project instead of hiding it in the package, so every curve and glyph is yours to edit. Determinism is also a design pillar: discrete sample points, absolute frame clocks, and frame-accurate audio BeatGrids instead of floating timers.

Key highlights

• Native GPU rendering via WebGPU/WGSL — no Chromium, no DOM reflows, no screenshot pipeline
• 50+ 2D VFX shaders (LUTs, film grain, glassmorphism), PBR 3D scenes with glTF support, procedural SFX and BeatGrids
• Optional AI Gateway for generating video, images, music, and voice from code via hosted models (requires an API key)
• On-device vision with Apache-2.0 ONNX models for tracking, pose estimation, and cutouts
• Live browser preview with scrubbing, waveform timeline, and frame-stepping

Caveats

• Beta status, per the project’s own badge — expect churn
• Needs Node ≥ 22 and a GPU for sane render times; CPU fallback (lavapipe/WARP) is ~10–12× slower
• The AI Gateway is a hosted, key-gated service — the offline story only applies to the rendering itself

Verdict

Worth a look if you’re building agent-driven video pipelines or want programmatic motion graphics without a browser farm. If you wanted a GUI timeline, this is the opposite of that — and proud of it.