Shaders, WebGPU Components for React, Vue, Svelte, Solid, JavaScript and Framer

Shaders is a library of WebGPU effects delivered as framework components for React, Vue, Svelte, Solid and plain JavaScript, with a single package that exposes first-class entries for each framework. It provides 200+ drop-in effects (gradients, noise, glass, metal, lights, distortions, transitions, blurs, cursor effects) that compose as GPU-blended layers, is TypeScript-ready, SSR safe and optimized for production. A visual design editor on shaders.com lets designers stack components on an infinite canvas, tune props, drive animations from cursor/timeline and export the exact component tree for a chosen framework. Framework usage is simple (e.g., import { Shader, LinearGradient, CursorTrail } from 'shaders/react') and the CLI keeps designs synchronized with codebases via npx shaders connect / install / update.

The project supports advanced workflows: a Pro tier adds 1,000+ presets, site sections, HD rendering, Framer integration and unlimited editor history; AI tooling integrates through an MCP server and indexed docs (llms.txt) for agent-assisted installs and edits. Developers can author custom components by calling defineShader with typed props and WGSL or std primitives for pixel logic. The engine and bindings are MIT licensed, the editor and presets have separate terms, and the mono-repo includes build, test and contribution guidance for extending or generating framework packages.