Shaders is a component library and visual editor that turns WebGPU effects into drop-in UI components for the web: gradients, noise, glass, distortion, glow and cursor-reactive backgrounds. It is aimed at front-end developers who want a page to look expensive without learning WGSL, and who already work in React, Vue, Svelte, Solid, plain JavaScript or Framer. The code lives on GitHub under an MIT licence; the product and the paid tier live at shaders.com.
What it does
A developer installs the library and places an effect the way they would place any other component: <Aurora />, <Plasma />, <Glass />. The README counts 210+ free components covering React, Vue, Svelte, Solid and vanilla JS, all MIT-licensed. Alongside them there is a drag-and-drop editor in the browser that exports working component code, so tuning an effect happens visually and the result arrives as source you can commit.
The paid Pro tier, per the project's own pricing page, adds 750+ production-ready presets and 55+ ready-made website sections. The video also names HD export as a Pro feature. These counts are the project's own claims, not an independent audit, and the saved copy of the README cuts off mid-sentence inside the Pro paragraph, so treat the full Pro list as something to verify on the pricing page.
How it works
Under the hood the effects are WebGPU with WGSL shaders; the component layer is what hides the adapter, pipeline, shader-module and bind-group setup that raw WebGPU demands before a single pixel appears. The project's own slogan is "No GLSL. No WGSL."
The repository is TypeScript, organised as a pnpm and Turbo monorepo, and carries 4.3k stars and 173 forks as recorded in its README. There is also a CLI, and an MCP server so an AI coding agent can browse presets and insert them directly.
One honest wrinkle: the materials disagree about that MCP server. The pricing line in the README says CLI and MCP workflows are included for free, while the video says the MCP server is Pro-only. Check shaders.com/pricing before planning around it.
Getting started
The repository is github.com/shader-effects-inc/shaders and the open core is MIT, so the 210+ components cost nothing. Money starts at the Pro tier: $199 per year, or a one-time lifetime payment, for the presets, the website sections and HD export. Nothing here calls a hosted model or needs an API key, so there is no per-use bill sitting behind the free components.
Requirements are thin in the material: the effects render through WebGPU, so they need a browser and a GPU that support it, and the project does not list specific browser versions, operating systems, memory or other hardware requirements in anything published here. The materials also do not print an install command, so do not expect a one-liner from this page. The repo is a pnpm and Turbo monorepo and ships a CLI, and the visual editor runs in the browser at shaders.com rather than as a local build you compile yourself.
When to use it / when not
The main catch is the split. The open core is genuinely free and MIT, but the parts that make it fast to ship a polished page (the preset library, the prebuilt sections, HD export) sit behind $199 a year. If the plan was to grab the good presets for free, that plan does not work.
Use it instead of hand-written WebGPU when you want one animated background in a marketing page this afternoon and have no interest in managing a render pipeline. Don't use it if you need real 3D: the authors say themselves that it does not replace Three.js-style control over scenes and rendering pipelines, or scroll-synced shader planes.
Alternatives
- Raw WebGPU or WGSL: total control, and the adapter, pipeline and bind-group work is all yours.
- CSS gradients and box-shadows: free and universal, with what the project calls a ceiling.
- Three.js: the right tool when the page needs a scene rather than an effect.
Front-end developers shipping landing pages and product marketing sites should take this one seriously: it collapses a specialist skill into a component import, and the free MIT tier is large enough to be useful on its own. Teams building interactive 3D, and anyone who wants the preset catalogue but will not pay for it, get less out of it than the star count suggests. Read the pricing page first, decide whether the free 210 components cover the page you are building, and treat the $199 tier as the actual product rather than an optional extra bolted on the side.