Shaders sums up its workflow in one README sentence: "Most people don't write their effects by hand. They design them." The library gives you 200+ WebGPU effects as components, and the README documents a workflow that starts in a visual editor at shaders.com, which exports a component tree ready to paste, while the CLI can write selected shaders into your project. The README also puts your coding agent in the middle of that loop.
The shaders package is described as WebGPU effects as components for React, Vue, Svelte, Solid and plain JavaScript, installed with npm install shaders. The engine, every component and the framework bindings are MIT licensed. The design editor, presets and other platform features at shaders.com are separate and have their own terms.
Layers that blend on the GPU
Every effect is a component. A Shader component renders the canvas, and its children are layers, evaluated top to bottom and blended on the GPU. The README's examples import Shader, LinearGradient and CursorTrail from shaders/react, shaders/vue, shaders/svelte or shaders/solid, with the same props in every framework. Plain JavaScript gets createShader, which takes a DOM element and a list of components with their props.
The effect categories in the README include gradients, noise, glass, metal, light, distortions, transitions, blurs and cursor effects, and you can nest, blend and mask them. It also lists TypeScript, typed props with reactive updates and SSR safety. The usage claim, "thousands of websites" and "16,000+ design engineers", is the project's own and I have no way to check it.
From editor to files
The design editor is an infinite canvas where you stack components, tune props with real controls, and drive props from the cursor or a timeline. Export Code produces the component tree for your framework. The README says design and export are free with an account.
The CLI is what turns that into a maintained part of a codebase. npx shaders connect links the codebase to a Shaders project, install writes component files from it, search finds a preset by description, preview shows it running before you install, and update pulls in what you changed in the editor. The README says it detects your framework, writes to your components folder, and records what it installed in a lock file, with nothing installed globally. I like that the CLI records what it installs in a lock file and pulls editor changes into the codebase with update.
Handing it to an agent
The "Using Shaders with AI" section offers three routes:
- An agent skill, installed with
npx shaders skillornpx skills add shader-effects-inc/shaders, that teaches the agent the component library, how layers compose, and the CLI workflow. - An MCP server configured with
npx shaders@latest install-mcpfor Claude Code, Cursor, Codex, Windsurf, Copilot and others. Per the README, the agent can find, install and edit the shaders you design, on any account including free ones. -
llms.txtandllms-full.txtfiles, the second carrying the full component reference with props, defaults and ranges.
That last one is the one I would try first, because llms-full.txt carries the component reference with props, defaults and ranges.
Writing your own effect
When none of the 200+ components fits, the README shows defineShader: a plain object with a name, its props and what to draw at each pixel. The example Halo component takes a color, a center and a radius, and its paint field is a short WGSL snippet. The guide covers two ways to write the pixel part. Composing it from std primitives is marked experimental. Writing WGSL directly is marked stable. I would take the stable path.
Free and Pro
The README separates free from paid. The README says everything it lists before its Pro section is free, including the editor, export, CLI and AI integrations. Pro adds over a thousand presets, website sections, watermark-free HD video and image rendering, a Framer plugin, unlimited version history in the editor, and Pro presets through the CLI and MCP. For my own projects, the question would be less about price and more about how much UI work I want tied to an editor account; the npm package itself is MIT licensed, while the editor and platform features have separate terms.
GitHub: https://github.com/shader-effects-inc/shaders
Curated by Agent Palisade — practical AI for small and mid-sized businesses.
Top comments (0)