Shaders open-sources 200+ WebGPU effects as components for React, Vue, Svelte and Solid

What shipped

An open-source project called Shaders, published by Shader Effects, Inc. on GitHub and npm, turns WebGPU effects into reusable components for React, Vue, Svelte, Solid and plain JavaScript. The repository reached the Hacker News front page on 7 October 2026.

According to the project's README, the library ships more than 200 effects — gradients, noise, glass, metal, light, distortions, transitions, blurs and cursor effects — that developers drop into a page as components, then nest, blend and mask. The engine, all components and the framework bindings are MIT licensed. The team describes the code as production-ready, written in TypeScript with typed props, reactive updates and SSR safety, and says it is already used on thousands of websites by more than 16,000 design engineers — figures the project reports itself.

One canvas, layered effects

The core idea is a single Shader component that renders a canvas. Its children are layers, evaluated top to bottom and blended on the GPU. The same component names and props work in every binding: a LinearGradient plus a CursorTrail inside Shader looks nearly identical in React, Vue, Svelte and Solid, while the JavaScript entry exposes a createShader function that takes the same layers as plain objects. The README says every one of the 200+ components ships with a live preview and fully documented props.

Design visually, sync through the CLI

Rather than hand-writing effects, most users are expected to design them. The free editor at shaders.com is an infinite canvas where components are stacked, props are tuned with real controls and driven by the cursor or a timeline, and an Export Code button produces the component tree for the chosen framework, ready to paste.

A CLI keeps that workflow connected to a codebase. npx shaders connect links a repository to a Shaders project, install writes selected effects in as real component files, and update pulls editor changes back down. The tool detects the framework, writes into the components folder and records installations in a lock file, with nothing to install globally.

AI agents and a Pro tier

The project also targets coding agents directly. An MCP server, configured with npx shaders@latest install-mcp, can hook into Claude Code, Cursor, Codex, Windsurf, Copilot and other clients so an agent can find, install and edit effects; the README notes this works on any account, including free ones. A llms.txt file indexes the documentation pages, and a llms-full.txt variant carries the full component reference with props, defaults and ranges.

Everything above is free. A Pro subscription adds 1,000+ production-ready presets organised into collections, 55+ complete website sections, watermark-free HD video and image rendering, a one-click Framer plugin, unlimited version history in the editor and access to Pro presets through the CLI and MCP. The platform at shaders.com sits outside the MIT package and carries its own terms.

Writing your own component

Custom effects do not require forking the library. A component is a plain object passed to defineShader: a name, typed props with defaults and transforms, and a pixel-level paint function written either in WGSL (the stable path) or composed from the library's std primitives (experimental). The README demonstrates a small Halo effect defined this way and mounted like any built-in. Contributions follow a monorepo layout: the engine lives in packages/core with one folder per component, and the framework packages are generated from it.

Why it matters

GPU visuals on the web have traditionally demanded shader-language skills and per-framework plumbing. By wrapping WebGPU behind typed, declarative components with identical props across five ecosystems, Shaders lowers the cost of GPU-powered design to roughly that of installing any other UI library. The editor-plus-CLI workflow and the MCP support for AI agents point at how component libraries may be distributed and consumed next, and the MIT core with a paid editor and preset marketplace is a familiar open-source sustainability model — though the adoption figures quoted are the project's own.