TECHNOLOGY
Shaders Releases 200+ WebGPU Effect Components for React, Vue, Svelte, Solid, JavaScript and Framer
The shader-effects-inc/shaders project offers more than 200 GPU-rendered effects as components across major web frameworks. A free design editor exports ready-to-use code, and a paid Pro tier adds presets and extra tools.
Image: Shaders · Uploaded by IntraGoals — usage rights confirmed
Shaders, a project from shader-effects-inc, packs more than 200 visual effects into components that web developers can drop into their pages. It works with React, Vue, Svelte, Solid, plain JavaScript and Framer.
The idea is simple. Every effect is a component. A parent component called Shader draws the canvas, and the effects inside it act as layers. They are evaluated from top to bottom and blended on the GPU, the graphics chip in a computer or phone.
The project says it uses WebGPU, a newer browser technology for running graphics work on the GPU. The effects include gradients, noise, glass, metal, light, distortions, transitions, blurs and cursor effects. They can be nested, blended and masked. In the React example from the project, a Shader holds a LinearGradient with two colors and a CursorTrail effect.
There is also a design editor at shaders.com. Users design on an infinite canvas, then export the exact component tree for their framework. The project says this is free. It also says each framework has the same props, which are the settings passed to a component.
The project describes the library as production-ready. It lists TypeScript support, typed props with reactive updates, and safe server-side rendering (SSR). It says the library is used on thousands of websites by more than 16,000 design engineers. Those figures are the project's own claims, and the available material does not independently confirm them.
Shaders also targets AI coding tools. An MCP server, a standard way for AI agents to connect to outside tools, can be set up with the command npx shaders@latest install-mcp. The project says this configures Claude Code, Cursor, Codex, Windsurf, Copilot and others, so an agent can find, install and edit shaders. It works on any account, free included. The site also offers llms.txt files that index the docs and list every component with props, defaults and ranges.
A paid Shaders Pro tier adds more. The project lists more than 1,000 presets organized into collections, and more than 55 website sections ready to drop in. It also lists HD video and image rendering without a watermark, a one-click install through a Framer plugin, and unlimited version history in the editor. Pro presets work through the CLI and MCP. Pro buyers also get a Discord role and channel, priority support and future updates. Pricing was not given in the available material.
Developers who need something new can write their own component. It is a plain object passed to a function called defineShader. The object holds a name, its props and what to draw at each pixel. It is then mounted with CustomShader like any other component.