Component library for creative WebGPU effects — 100+ ready-to-use shaders for React, Vue, Svelte, and more.
Shaders is a component library for building creative WebGPU visual effects in the browser. Choose from 100+ pre-built components including gradients, distortions, particles, and color manipulations, then compose them by stacking, nesting, masking, and blending. Works with React, Vue, Svelte, Solid, and vanilla JavaScript. The visual design editor lets you create effects with drag-and-drop and export production-ready code. Includes MCP integration for AI agent workflows and curated preset collections on the Pro plan.
Shaders is a component library for building creative WebGPU visual effects in the browser. Choose from 100+ pre-built components including gradients, distortions, particles, and color manipulations, then compose them by stacking, nesting, masking, and blending. Works with React, Vue, Svelte, Solid, and vanilla JavaScript. The visual design editor lets you create effects with drag-and-drop and export production-ready code. Includes MCP integration for AI agent workflows and curated preset collections on the Pro plan.
Tags: WebGPU, Shaders, Components, Visual Effects, React
Try ShadersYes — the component library and basic editor are free. Pro unlocks curated presets and advanced features.
React, Vue, Svelte, Solid, and vanilla JavaScript.
No — effects are pre-built components you can use and customize visually without writing shader code.