gatewai-dev / framefields

### Compositing, motion graphics, and 3D for code-first video — one npm package that AI agents drive with code.
**Documentation**  ·  **Website**  ·  **Discord**  ·  **Examples**
Framefields is built for coding agents. It packs the capabilities usually split across three desktop creative suites—Photoshop-style compositing & VFX, After Effects-style typography & motion graphics, and Blender-style 3D scenes & cameras—into a single lightweight npm package.
- **Zero Headless-Browser Overhead** — No Chromium, no Puppeteer, no DOM reflows, and no screenshot pipeline. Renders directly on native GPU hardware via Dawn / WebGPU / Metal / Vulkan.
- **Deterministic & Frame-Accurate** — Discrete sample points, absolute frame clocks, and frame-accurate audio BeatGrids. No floating timers, no drift.
- **Agent-First Workflow** — Your coding agent writes TypeScript, inspects rendered frame grids, and exports hardware-encoded MP4s headlessly.
### Made with framefields
Every frame is rendered by framefields directly from TypeScript in `examples/`. Click a still to watch on YouTube:
 Physics dancer 
 28_physics_dancer 
 Mac Keyboard 
 26_mac_keyboard_from_3d_primitives 
 Framefields launch 
 22_framefields_launch 
 Full Circle 
 21_full_circle 
 Dancer showcase 
 19_framefields_film 
---
## Agent Skills
Teach Claude Code, Cursor, Codex, Copilot, or Hermes how to author, animate, and render compositions:
**Claude Code**
 [code] 
**Cursor, Codex, Hermes, Copilot & others**
 [code] 
---
## Installation
 [code] 
> **Requirements:** Node.js ≥ 22. Native GPU acceleration via WebGPU / Dawn (macOS Metal, Linux Vulkan, Windows D3D12).
---
## Quickstart
 [code] 
---
## Documentation
Everything else—including full API references, interactive tutorials, and guides—is available at **framefields.dev/docs**:
- **Typography & Animators** — Slug analytic vector text, After Effects-style range animators, and typewriter cadence
- **WebGPU 2D VFX** — 50+ shaders: 3D LUTs, Curves, Film Grain, Glassmorphism, and Blur
- **Unified 3D Scenes** — LookAt cameras, PBR materials, studio lighting, shadows, and glTF/GLB models
- **Audio & Procedural SFX** — BeatGrids, procedural whooshes/impacts, and audio-reactive signals
- **On-Device Vision** — Apache-2.0 ONNX models for object tracking, pose estimation, and subject cutouts
- **Live Browser Preview** — Localhost WebGPU player with scrubbing, waveform timeline, and frame-stepping
---
## Community & License
- **Documentation:** framefields.dev/docs
- **Website:** framefields.dev
- **Discord:** discord.gg/cbqMGGme5
- **YouTube:** @gatewai.studio
Licensed under Apache-2.0.