Documentation
Local-first creative engineering for AI coding agents. Motion, Lottie, WebGL, canvas effects, dither charts, and 128 hand-built blocks you copy into your repo and ship.
Pax is an MIT-licensed toolkit that helps coding agents produce production-ready motion, Lottie and dotLottie animation, kinetic typography, interactive WebGL experiences, graph worlds, and scenes using prepared Gaussian-splat assets. Directly from a developer's editor.
Your agent can build anything. Pax makes it worth looking at.
What is Pax?
A local-first creative engineering system built for the age of AI coding agents. Pax ships a CLI (paxfx), library packages, recipes, preview and export pipelines, an MCP server, editor integrations, and copy-into-your-repo creative assets. Everything runs on your machine unless you opt into your own inference endpoints.
Pax is not a hosted renderer, design marketplace, or subscription service. There is no Pax cloud account, no Pax-managed GPU, and no telemetry by default.
What you get
| Surface | What it does |
|---|---|
CLI (paxfx) | Init projects, run recipes, validate and repair Lottie, preview and refine locally, export artifacts, rendered visual QA, blocks and effects install |
| Scenes | Versioned JSON documents that compile to Lottie, DOM, React, WebGL, and other targets without changing the source model |
| Recipes | Reusable creative instruments that turn parameters into reproducible scenes |
| Blocks | 128 hand-built components, page blocks, and templates via shadcn-style copy into your repo |
| Components | 25 canvas and WebGL effects in six framework flavors: React, Vue, Svelte, Solid, Preact, and vanilla TypeScript |
| Charts | Composable canvas charts with ordered dither fills from @pax-sh/charts |
| WebGL and spatial | Three.js and React Three Fiber runtimes, shader vocabulary, graph worlds, prepared Gaussian-splat playback |
| Agents | Skills, MCP tools, and installers for Cursor, Claude Code, Codex, and OpenCode |
| Critic | Visual QA, responsive checks, performance budgets, and repair suggestions |
Framework agnostic components
Every canvas effect ships in six flavors. Each one is a single standalone source file, built on the same engine with the same options. Pick your framework once in the docs and every install command follows.
Components install through the shadcn registry. Running npx shadcn@latest add @pax-sh/liquid-react drops the file into your project where you can read it, change it, and version it like anything else you wrote. There is no opaque package to update and nothing to lock you in.
Real HTML under canvas effects
Most Pax components render live HTML inside a canvas element with WebGL effects running over it. Your buttons, links, and forms stay interactive underneath.
The html-in-canvas API is an experimental Chrome capability that lets a canvas lay out and paint live DOM content. Your interface becomes a texture that shaders can sample and distort, without screenshots, iframes, or DOM-to-image hacks. Some effects skip the API entirely and are pure 3D and shader work that runs everywhere today.
Components detect support at runtime and degrade gracefully. Without html-in-canvas, your content renders as normal HTML and the parts of the effect that can still run, still do. Nothing breaks for users on other browsers.
Local-first by design
Pax does not require authentication, a database, Stripe, Supabase, Clerk, hosted inference, Pax-managed API keys, or Pax-managed GPU infrastructure.
You may use Pax through Claude Code, Codex, Cursor, OpenCode, MCP-compatible agents, direct local workflows, your own API keys, or local models. Pax never incurs inference costs on your behalf.
Reduced-motion fallbacks are required for every motion feature. Accessibility is part of the product, not a follow-up ticket.
Honest capability boundaries
Pax supports and documents Lottie JSON, dotLottie, interactive state machines, kinetic typography, deterministic motion, WebGL shaders and particles, scroll and pointer interactions, graph-galaxy worlds, and prepared Gaussian-splat import and playback.
Pax does not claim arbitrary 3D reconstruction, Gaussian-splat training, NeRF training, diffusion training, GAN training, or perfect unrestricted output from vague prompts. Compilers and recipes document what they support honestly.
You own the code
Blocks, components, and templates copy into your repository as plain source. Pax publishes skills and MCP tools so agents install the right asset, bind brand tokens, respect performance tiers, and validate before export.
Browse all 162 live items in the workspace: effects, components, blocks, templates, and charts, each with a prop tuner wired to the real runtime.
Next steps
Start here
Common workflows
Complete the production loop
Brief, direct, design, build, render, critique, repair, and ship with proof.
Add a canvas effect to an app
Copy one standalone source file into your repo, tune it, then budget it.
Ship an animation from a scene
Author a scene document once and compile it to the format you need.
Let a coding agent drive Pax
Install the MCP server and skills so your editor uses the right asset.
Render a launch film
Compose a seekable HTML film, then render a deterministic mp4.
Browse by area
Was this page helpful?
Answers are not recorded or transmitted. Pax has no telemetry.