# framefields > framefields is a TypeScript library (npm: framefields) that renders video natively on WebGPU (Dawn) in Node.js — compositing, motion graphics, typography, 3D, audio and on-device vision — with no browser. A video is a Composition: a tree of layers with keyframed animation, rendered frame by frame to PNG or MP4. Requirements: Node.js >= 22, an ES module project, and a WebGPU-capable GPU (Metal, Vulkan). Import everything from "framefields". Verify cheapest first: typecheck, comp.lint(), renderFrame, renderFrameGrid, then renderVideo. Agent skills: `npx skills add gatewai-dev/framefields` or `/plugin install framefields` in Claude Code. ## Pages Each page as Markdown: - [framefields docs](https://framefields.dev/docs/index.md): What framefields is, a complete first composition, and where to go next. - [Getting started](https://framefields.dev/docs/getting-started.md): Install framefields, scaffold theme/film/render files, and verify a first render from cheapest check to final MP4. - [Core concepts](https://framefields.dev/docs/core-concepts.md): Compositions, the frame clock, layer trees, local timing, layout and coordinates — the model everything else builds on. - [framefields for agents](https://framefields.dev/docs/agents.md): Why framefields is built for coding agents, how to give your agent the skills in one command, and the loop it follows to ship a video. - [Install the skills](https://framefields.dev/docs/agents/install.md): Install the framefields agent skills in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and 70+ other agents — per project, per user, or for a whole team. - [The skills](https://framefields.dev/docs/agents/skills.md): What each of the four framefields skills teaches an agent, and the kind of request that loads it. - [The agent workflow](https://framefields.dev/docs/agents/workflow.md): The write → check → look → show → ship loop an agent should follow with framefields, with the code for each step. - [Example prompts](https://framefields.dev/docs/agents/prompts.md): Prompts that work well with framefields agents, from a first title card to data stories, 3D product shots and vision effects. - [Docs for agents](https://framefields.dev/docs/agents/llms.md): Machine-readable versions of these docs (llms.txt, full and compact text, per-page Markdown) and an AGENTS.md snippet for your project. - [Layout & text](https://framefields.dev/docs/guides/layout-and-text.md): Boxes, flex layout, shapes, fonts, GPU text, rich text, measurement, colors, gradients and track mattes. - [Animation](https://framefields.dev/docs/guides/animation.md): Keyframes with LayerAnimation, easing, composing animations, procedural drivers, kinetic typography and 3D transforms on 2D layers. - [Scenes & transitions](https://framefields.dev/docs/guides/scenes-and-transitions.md): Split a film into scene functions on a beat grid and join them with Layer.sequence and Transition. - [Effects](https://framefields.dev/docs/guides/effects.md): Attach GPU effects to layers, whole compositions, regions and media chains; order them; drive their props with signals. - [3D](https://framefields.dev/docs/guides/3d.md): Cameras and camera moves, lights and lighting rigs, physically based environments, primitives, extruded text and models. - [Audio & signals](https://framefields.dev/docs/guides/audio-and-signals.md): Soundtracks, audio effects, deterministic procedural SFX, and signals that drive any prop or effect from time, data or sound. - [Charts & media](https://framefields.dev/docs/guides/charts-and-media.md): Video, image, SVG, Lottie and caption layers, the Media chain, and animated charts built from native nodes. - [Vision](https://framefields.dev/docs/guides/vision.md): On-device detection, segmentation, pose and mattes as reactive signals — pin layers to subjects, cut them out, reframe, blur, and analyze clips. - [Rendering](https://framefields.dev/docs/guides/rendering.md): Lint, single frames, contact-sheet grids, pixel tests and MP4 export with built-in QA — in the order that wastes the least time. - [Live preview](https://framefields.dev/docs/guides/preview.md): Serve a localhost WebGPU player that runs the composition itself, with sound, scrubbing, deep links, scripting and notes pinned on the picture. - [API index](https://framefields.dev/docs/reference/api.md): Every public entry point of the framefields package on one page — what it is and where it is documented. - [Effects reference](https://framefields.dev/docs/reference/effects.md): All 52 effect classes grouped by family, with every prop name. Import from "framefields" or "framefields/effects". - [Lint & QA codes](https://framefields.dev/docs/reference/qa-codes.md): Every code comp.lint() and renderVideo({ qa }) can report, its severity, and what to do about it. - [Authoring rules](https://framefields.dev/docs/reference/rules.md): The numbered rules that prevent most broken framefields renders. Read before writing a composition. - [Troubleshooting](https://framefields.dev/docs/reference/troubleshooting.md): Symptoms, causes and fixes for install errors, blank frames, missing audio, hanging scripts, vision artifacts and preview problems. ## Documentation Sets - [Abridged documentation](https://framefields.dev/docs/llms-small.txt): a compact version of the documentation for framefields, with non-essential content removed - [Complete documentation](https://framefields.dev/docs/llms-full.txt): the full documentation for framefields ## Notes - The complete documentation includes all content from the official documentation - The content is automatically generated from the same source as the official documentation ## Optional - [Source](https://github.com/gatewai-dev/framefields): monorepo, examples and agent skills - [npm](https://www.npmjs.com/package/framefields)