# shadertown

Production WebGPU shader backgrounds for the web, drawn by
[vgpu](https://vgpu.sh).

```bash
npm install shadertown
```

```tsx
import { ShaderCanvas } from "shadertown/react";

<ShaderCanvas shader="aurora" params={{ speed: 0.4 }} play="visible" />;
```

No WGSL loader, no bundler plugin: shader sources ship as strings. Every
renderer on a page shares one GPU context and one frame loop, and the loop stops
when nothing is animating.

## Alloy: metal ribbons and glass

`alloy` draws animated brushed-metal ribbons and floating glass spheres without
image assets. Its named controls update live without recompiling the shader:

```tsx
<ShaderCanvas
  shader="alloy"
  params={{ speed: 0.35, width: 1, brushing: 1, spheres: 1, warmth: 1, warp: 0.8 }}
  quality={{ dpr: [1, 1.25] }}
  trackPointer
  play="visible"
  style={{ width: "100%", height: 480 }}
/>
```

`width` changes the ribbon width; `brushing` changes the surface grooves;
`spheres` scales the glass (zero hides it); `warmth` controls the accent light;
`warp` controls twist. `colorA`, `colorB`, and `colorC` set the metal, studio,
and accent colors. The catalogue includes Champagne, Platinum, Rose gold,
and Obsidian palettes. The studio graph combines ribbon meshes, ray-traced
glass, depth of field and bloom. A modest pixel ratio is recommended for
large backgrounds.

For plain JavaScript, use `createShaderRenderer(canvas, { shader: "alloy",
params: { warmth: 1.4 }, dpr: [1, 1.25] })` and call `renderer.setParams(...)`
to tune it. `toWgslSource("alloy")` returns the complete WGSL module;
`toReadme("alloy", {})` documents its passes and bindings for custom renderers.

## Vendor the source

The `shadertown` CLI ships inside this package, so `npx shadertown` needs no
second install. It writes a shader's WGSL and your tuned preset into your own
repository, as files you own:

```bash
npx shadertown add aurora
```

## Give it to your coding agent

The CLI is also an MCP server. One command configures Claude Code, Cursor,
VS Code, Windsurf, Codex, and friends, and the agent can search the
catalogue, read every control, and vendor tuned source into the project on
its own:

```bash
npx add-mcp "npx -y shadertown@latest mcp" -n shadertown
```

## Licensing

This package is MIT, and it draws all 74 shaders. What a licence buys is the
readable source: 16 shaders hand theirs to anyone, the other 58 need
[Professional](https://www.shadertown.com/pricing). Source you have already
vendored keeps working either way.

Needs WebGPU — `ShaderCanvas` reports an `unsupported` status so you can render
a fallback.

Full documentation: https://www.shadertown.com/docs