Shaders: WebGPU effects your coding agent can install

What it does

Shaders (shader-effects-inc/shaders, npm package shaders) renders a <Shader> canvas whose children are effect layers, evaluated top to bottom and blended on the GPU: gradients, noise, glass, metal, light, distortions, transitions, blurs and cursor effects, with the same props across React, Vue, Svelte, Solid and plain JavaScript. The CLI (npx shaders) links a codebase to a shaders.com project, installs effects as real component files, searches presets and pulls in editor changes. For agents there is a skill (npx shaders skill or npx skills add shader-effects-inc/shaders), an MCP server (npx shaders@latest install-mcp, for Claude Code, Cursor, Codex, Windsurf, Copilot and others) and llms.txt docs. You can also write custom components in WGSL with defineShader.

How builders use it

• npm install shaders, then drop <Shader> with layers such as <LinearGradient /> and <CursorTrail /> into a page.
• Install the skill with npx shaders skill so your agent knows the component library and how layers compose.
• Run npx shaders@latest install-mcp to let your agent find, install and edit the effects you designed on shaders.com.
• Ask the agent for an effect by description, then tune the props by hand.

What to expect

Animated, on-brand hero sections and backgrounds added by prompt, as component code you own.

# Official source: github.com/shader-effects-inc/shaders (MIT)
npm install shaders

# Agent skill and MCP server:
npx shaders skill
npx shaders@latest install-mcp

Ask your agent:
Using Shaders, add a subtle animated gradient background with a cursor trail to the hero section in app/page.tsx. Use our brand colours <hex codes>, keep it behind the text, and show me the component tree before writing it.