Introduction
vshaders is a registry of composable WGSL shader effects for vgpu, the WebGPU library. It ships two kinds of things: pure WGSL modules you install from npm, and complete effects you copy into your project and own.
The two-layer model
| Layer | What it is | How you get it |
|---|---|---|
| Modules | Functions, structs and constants. No bindings, no entry points. | Installed from npm as versioned @vshaders/* packages. |
| Effects | Entry shaders with bindings and uniforms, plus a React wrapper. | Copied into your project from the registry, shadcn style. |
The split is enforced, not aspirational: vgpu's resolver rejects any imported module that declares @group or @binding (the VGPU-RESOLVE-MODULE-BINDING error). Bindings belong to the entry shader you own, so a package can never dictate your bind group layout. That one rule is what keeps the layers honest.
What exists today
- Five packages on npm at 0.2.0:
@vshaders/sdf,@vshaders/color,@vshaders/dither,@vshaders/easeand@vshaders/fluid. - Eleven effects: mesh gradient, metaballs, palette field, flow, ripple, dither, fluid, displacement, god rays, heatmap and undertones, each with a live editor at
/effects/<slug>whose tuned state encodes into a shareable permalink. Fluid is a real multi-pass simulation, driven only by the cursor. - A shadcn-compatible registry at
vshaders.com/r, sonpx shadcn addworks with no custom tooling. All eleven effects are installable registry items. - Every shader here passes
vgpu check --require-validationbefore it ships.
Where to go next
- Setup: wire the WGSL loader into Next.js or Vite and render a first shader.
- Add an effect: copy a complete effect with the shadcn CLI, then tune it in the editor.
- @vshaders/sdf, @vshaders/color, @vshaders/dither, @vshaders/ease and @vshaders/fluid: API references for the module packages.
- For agents: the machine-readable surfaces and what an agent can do today.