shader-effects-inc/shaders

WebGPU components for React, Vue, Svelte, Solid, JS & Framer

Summary

The shaders npm package provides WebGPU-powered visual effects as declarative components for React, Vue, Svelte, Solid, and plain JavaScript. A <Shader> host renders a canvas and treats its children as GPU-blended layers, so effects like gradients and cursor trails compose like ordinary UI. The engine, components, and framework bindings are MIT licensed, and the package ships with a CLI and an MCP server for AI coding agents.

What it is useful for

Adding interactive, GPU-rendered backgrounds and overlays — gradients, noise, glass, metal, light, distortions, transitions, blurs, and cursor effects — to a web app without writing WebGPU boilerplate. The same component API is available across the supported frameworks, which helps design systems or multi-framework codebases share one effect model. A visual editor at shaders.com can export a designed component tree in the target framework.

Documented constraints: effects target WebGPU (no WebGL fallback is mentioned in the README), and the editor, presets, sections, and Framer plugin are paid Pro features with separate terms. For custom components, writing paint logic in WGSL directly is stable, while composing from the std primitives path is marked experimental.

How engineers can use it

Install with npm install shaders and import the framework entry you need.

React, from the README:

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

The vanilla path uses createShader with a components array of { type, props } objects. Children of <Shader> are evaluated top to bottom and blended on the GPU.

For pulling designed effects into a repo, the CLI links the codebase to a Shaders project and writes real component files:

npx shaders connect
npx shaders install
npx shaders update

For AI assistants, npx shaders@latest install-mcp configures an MCP server for Claude Code, Cursor, Codex, Windsurf, and Copilot; shaders.com/llms.txt and shaders.com/llms-full.txt expose a docs index and the full component reference. To extend the library, defineShader from shaders/std accepts a name, typed props, and a WGSL paint function, and is mounted via <CustomShader>. Contributors run pnpm install, pnpm lib:build, and pnpm test; the engine source lives in packages/core.