# 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); without one, it renders on the CPU (Mesa lavapipe on Linux, WARP on Windows), slower. 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): Create a framefields project with one command (or by hand), and verify a first render from the cheapest check to the 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. - [Physics & particles](https://framefields.dev/docs/guides/physics.md): Deterministic 2D and 3D rigid-body simulation with Rapier, live performer collision, force fields, and WebGPU compute particles. - [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. - [Render on a server](https://framefields.dev/docs/guides/render-service.md): Render a framefields project straight from git on a GPU worker (Docker, RunPod pod or serverless). Project checklist, job JSON, outputs and error codes. - [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. - [Generative AI (ai)](https://framefields.dev/docs/guides/ai.md): Generate images, videos, sound and assets directly within framefields compositions using the AI gateway. - [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 54 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. - [Why framefields for your AI agents](https://framefields.dev/docs/blog/why-framefields-for-your-ai-agents.md) ## Components Added with `npx framefields add `, which copies the source into the project. Each as Markdown: - [Annotate](https://framefields.dev/docs/components/annotate.md): Marks that draw on to point at something: underline, circle, box, highlight, strike, cross, bracket, arrow or squiggle, clean or hand-drawn with a boil, with an optional label. - [AppFrame](https://framefields.dev/docs/components/app-frame.md): Window chrome around any content — desktop window, browser with a typed URL, terminal, or bare frame — and the coordinate system for pointing into it. - [Backdrop](https://framefields.dev/docs/components/backdrop.md): The surface behind a scene: a drifting mesh gradient, a grid or a dot field, with vignette and film grain, looping exactly. - [BeforeAfter](https://framefields.dev/docs/components/before-after.md): Two versions of one picture split by a moving divider with a grip and labels: a clip with and without an effect, a redesign, a cleanup. - [Callout](https://framefields.dev/docs/components/callout.md): A label with a leader line pinned to a point, node, text or a moving tracked object; picks the open side and stays inside the frame. - [Captions](https://framefields.dev/docs/components/captions.md): Word-timed captions from words or a transcript (SRT, WebVTT, word JSON) in eight published styles, highlighting each word on its exact frame, optionally tucked behind the speaker. - [CardStack](https://framefields.dev/docs/components/card-stack.md): Cards in a depth stack that shuffle: the front card flies, drops, zooms or flips away and returns to the back; cards are dealt onto the pile; or the stack fans out into a hand. - [ChatThread](https://framefields.dev/docs/components/chat-thread.md): A messaging conversation: bubbles that spring in from either side, typing dots before replies, names, avatars, timestamps, reactions, images and auto-scroll. - [CodeBlock](https://framefields.dev/docs/components/code-block.md): Code that reads like an editor and moves like an explanation: syntax colours, typing, a focus band that walks the lines, and diffs where kept lines glide to their new places. - [Confetti](https://framefields.dev/docs/components/confetti.md): Celebration bursts of paper, ribbons and sparkles on the GPU that arc up, flutter down and can settle on a floor; bursts can follow cues. - [Counter](https://framefields.dev/docs/components/counter.md): A number that counts to its value on odometer reels (or stepping digits), with format-aware separators, affixes and multi-step values. - [DeviceFrame](https://framefields.dev/docs/components/device-frame.md): A phone, tablet or laptop around a screen; content is authored in device points and `at(x, y)` maps them for pointers and touches. - [FocusZoom](https://framefields.dev/docs/components/focus-zoom.md): A camera over 2D content that pushes in on each burst of pointer clicks (or on given shots) and eases back out, clamped to the content. - [LogoReveal](https://framefields.dev/docs/components/logo-reveal.md): The end-card lockup: a mark and a wordmark arriving as one move, drawn on, popped or wiped, with a glint across the name; names can be extruded in 3D. - [LowerThird](https://framefields.dev/docs/components/lower-third.md): The name-and-role bar of interviews and talks: measured plates in the safe area that slide in and leave on their own. - [Meter](https://framefields.dev/docs/components/meter.md): Progress and scores as a ring, arc gauge, bar, lit segments or star rating, filling on the same timeline as its counter. - [MousePointer](https://framefields.dev/docs/components/mouse-pointer.md): An animated pointer that travels between targets, clicks, drags and changes shape, reporting every click as a cue. - [Selection](https://framefields.dev/docs/components/selection.md): A text selection or a marquee driven by a MousePointer drag: it follows the pointer glyph by glyph, and lights up covered items. - [Spotlight](https://framefields.dev/docs/components/spotlight.md): Dims the frame except a region that glides between targets, as a crisp rounded rect or a soft pool of light. - [Terminal](https://framefields.dev/docs/components/terminal.md): A scripted shell session: commands typed with a human rhythm, streaming output, spinners that resolve to check marks, progress bars and scrolling, with a cue for every keystroke. - [TextReveal](https://framefields.dev/docs/components/text-reveal.md): Headlines and body copy that animate in and out by character, word or line: rise, blur, track, mask, slam, scatter, scramble, type, stream, wipe and flip, each ending on exactly the static text. - [TitleCard](https://framefields.dev/docs/components/title-card.md): Kicker, headline, rule and sub-line in designed layouts (center, left, stack, split), the headline in any reveal style, on one timeline. - [Toasts](https://framefields.dev/docs/components/toasts.md): Notifications arriving into a corner stack that pushes older ones away and compresses as it grows; each slides out when dismissed. - [TouchPoint](https://framefields.dev/docs/components/touch-point.md): Fingers on glass: taps, double taps, long presses and swipes as soft discs with ripples, for mobile demos in a DeviceFrame. - [Waveform](https://framefields.dev/docs/components/waveform.md): An audiogram: bars, mirrored bars, dots or a ring that move with a track's spectrum, analysed offline and bound as signals. - [WordCycle](https://framefields.dev/docs/components/word-cycle.md): One slot in a line cycles through words: rolled, faded, slid or retyped, while the slot resizes to each word and the line glides to fit. ## 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)