Shaders
3.4kShimmering gradients, glass, metal and cursor trails for your site, snapped together from ready-made pieces like a construction kit. Tune an effect with the mouse in the editor, or ask Claude Code, Cursor or Codex to drop it in for you. Free, MIT.
We have not run it ourselves: described from the docs and the repository.
In numbers
What it is
A beautiful animated background on a website is usually drawn by the graphics card from a small program called a shader, and few people know how to write those. Shaders hides that part: more than 200 effects (gradients, noise, glass, light, distortions, transitions, cursor trails) plug in as ordinary page components and stack on top of each other as layers. One package covers React, Vue, Svelte, Solid and plain JavaScript, and in the free editor on shaders.com you can build an effect on a canvas, much like a Figma mockup, and export the finished code.
What sets it apart from React Bits, its neighbour in this catalogue, is that it is not a set of separate ready-made blocks but a construction kit: layers blend, mask and nest inside one another. It is also built for working with an agent from the start: the repository ships a skill that explains the library to the agent, and an MCP server through which Claude Code, Cursor or Codex can find, install and adjust the effect you need on their own.
How it works
<Shader> component draws the canvas, and the effects inside it become layers: they are read top to bottom and blended on the GPU.connect, install, search by description, and update pulls in whatever you changed in the editor.npx shaders skill gives your agent a skill describing the library, and npx shaders@latest install-mcp sets up Claude Code, Cursor, Codex, Windsurf and Copilot. It works on a free account too.<CustomShader> alongside the others.Know before installing
onUnavailable.disableTelemetry option.
Comments