framefields skill
A skill set for writing video in TypeScript and rendering it on the GPU with no browser: compositing, motion graphics, 3D.
- 519 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- The skill runs project code, renders on the GPU and writes files into `output/`.
- Cloud rendering pulls the project repository and assets over Git, which needs hosting access tokens.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/framefieldsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs project code, renders on the GPU and writes files into `output/`.
- Cloud rendering pulls the project repository and assets over Git, which needs hosting access tokens.
This is third-party code. Review the repository files before installing.
What it does
framefields is an npm package for code-first video, and `npx skills add gatewai-dev/framefields` gives an agent seven skills for working with it: a main one plus separate ones for composition, effects, styles, rendering, computer vision and cloud rendering. With them Claude Code, Cursor or Codex writes a scene in TypeScript, inspects a grid of rendered frames and exports MP4. Rendering runs directly on the graphics card through WebGPU (Dawn, Metal, Vulkan) with no Chromium or Puppeteer. Time is counted in absolute frames and audio is locked to a beat grid, so the same code yields the same frames. The package covers Photoshop-style compositing, After Effects-style typography and motion graphics, and 3D scenes with cameras. `framefields init my-film --install` creates a project with `film.ts`, `render.ts`, Git LFS for assets and the Inter, JetBrains Mono and Noto Color Emoji fonts. A desktop app for macOS and Linux lets you build a film by talking to an agent.
Who it is for. Developers and motion designers who make clips, previews and explainers with Claude Code or Cursor and want a reproducible render on their own GPU.
Good fit when
- An explainer or promo clip is needed and scenes are easier to describe in code than to assemble in an editor.
- The agent must inspect frames, tweak animation and re-render with no Chromium.
- The same film must be rebuilt repeatedly with identical frames, for example in CI.
- A clip is assembled from 3D models, titles and charts inside a single project.
Not a fit when
- There is no WebGPU-capable GPU and a local render is needed.
- A ready editor with a timeline for manual work is wanted.
- The clip is short and one-off, and installing Node.js 22 is not appealing.
Example request
Create a framefields project, build a 20-second intro with animated titles and show a grid of frames 0, 30 and 60.Limitations
Node.js 22 or newer and a GPU that Dawn supports (Metal or Vulkan) are required. The package is in beta and its interface may change, so pin the version in a project. Cloud rendering comes as a separate service with a Docker image and RunPod templates that you deploy yourself. Project assets live in Git LFS, so a film repository needs `git-lfs` installed and large files grow the storage. The last commit in the repository is from November 2026.
How to disable. Delete the `framefields*` folders from the agent skills directory (`.claude/skills` or `.agents/skills`) and run `pnpm remove framefields` in the film project.
FAQ
How do I install framefields in Claude Code?
Run `npx skills add gatewai-dev/framefields` to put the skills into the agent directory. The package itself is added to a project with `pnpm add framefields`.
Is a browser needed for rendering?
No. Rendering runs on the GPU through WebGPU, with no Chromium, Puppeteer or page screenshots. The finished video is encoded to MP4 on the graphics card.
Which Node.js version is required?
Node.js 22 or newer. The GPU side uses Dawn with Metal and Vulkan backends.
How do I start a new film?
`pnpm dlx framefields init my-film --install` creates `package.json`, a TypeScript config, `film.ts`, `render.ts`, an `assets/` folder with Git LFS and fonts. Then `pnpm frames -- 0 30 60` renders the first frames into `output/`.
Are there ready examples?
Yes, the `examples` folder holds films with source code, including a news explainer, a product film and 3D scenes. Every frame there is built from TypeScript.
Discussion
No questions or reviews yet.
Related
SkillsA skill and CLI that let Claude Code or Codex make videos as web pages, with the Studio editor to change the result
A video engine for agents in Rust: Remotion-style TypeScript code or an HTML page turns into MP4 on the GPU, no browser.
Two skills for short films where every frame and the music are computed in code on canvas, with no images or keys, rendered to MP4
The agent scripts, voices and draws a narrated documentary in code, with one continuous camera over photos, maps and cards.
A skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates
A skill for Claude Code and Codex: the agent writes animation scenes, a browser player shows them, export to MP4 and Lottie.
README in short
A code-first video framework on WebGPU: compositing, motion graphics and 3D in one npm package that an agent drives through skills. Installed with `npx skills add` and `pnpm add`.