WebGPU effects · free · MIT
Give your site cinema-grade effects
More than 200 visual effects (living gradients, glass, metal, light, particles) that you drop into the page like a component.
More than 200 visual effects (living gradients, glass, metal, light, particles) that you drop into the page like a component.
Shaders is a free, open-source library (MIT license) with more than 200 visual effects for web pages. It is for people who build sites, landing pages and apps and want an animated background, a glow or a distortion without writing graphics-card code. Each effect is a component: you stack layers and the visitor's graphics card draws everything in real time, using WebGPU technology. To use it, just install the shaders package (React, Vue, Svelte, Solid or plain JavaScript) and open it in a browser with WebGPU.
Three combinations made only with free components. If your browser has no WebGPU, you see the static background, which is exactly what your site should show in that case.
The demo loads the official shaders@4.0.4 package from jsDelivr only when you reach this section and only if the browser has WebGPU (about 2.5 MB). Telemetry is turned off (disableTelemetry: true) and the animation pauses when it leaves the screen.
It is an npm package (shaders, version 4.0.4 on Oct 18, 2026) maintained by Shader Effects Inc. This repository, inematds/shaders, is a mirror with this guide; the original project is shader-effects-inc/shaders.
Gradients, noise, glass, metal, light, distortions, transitions, blurs and cursor effects. One <Shader> draws the canvas and each child is a layer.
On shaders.com you build the effect on an infinite canvas, tweak every value and export ready-made code for your framework (free, with an account).
It comes with a skill for your coding agent, an MCP server and the llms.txt with all components and props. Claude Code understands the library on its own.
| Free (MIT) | Pro (paid, on shaders.com) |
|---|---|
| Engine, the 200+ components and the React, Vue, Svelte, Solid and JS versions | More than 1,000 ready-made presets, in collections |
| Visual editor and code export (needs an account) | 55+ complete website sections |
| CLI, skill, MCP and preset search | HD video and image render without a watermark |
Write your own effect with defineShader | Framer plugin, version history, Pro presets through the CLI/MCP |
Order matters: the first layer sits at the back and the last one on top. Effects that transform the image (blur, grain, vignette, waves) act on whatever came before them.
No special graphics card: the one doing the drawing is the browser of whoever visits the site.
To install the package in a React, Vue, Svelte or Solid project.
# check node -v && npm -v
Recent Chrome and Edge have WebGPU. In other browsers, support varies by version and system: always prepare a static background.
// in the browser console !!navigator.gpu
Only for the visual editor, the connected CLI and the MCP. The npm package works without an account.
# no account, just the package npm install shaders
Commands and examples taken from the project's README and official skill.
One package works for all frameworks.
npm install shaders
The size comes from the CSS of <Shader>. The children are the layers. In Vue, Svelte and Solid it is the same, just change the import to shaders/vue, shaders/svelte or shaders/solid.
import { Shader, LinearGradient, CursorTrail } from 'shaders/react' <Shader className="w-full h-64"> <LinearGradient colorA="#0c0c10" colorB="#E2A23B" /> <CursorTrail /> </Shader>
For guides and single-file pages: import the official bundle from the CDN and pass the layers as a list. This is how the demo on this page works.
<canvas id="fx" style="width:100%;height:360px"></canvas> <script type="module"> import { createShader } from 'https://cdn.jsdelivr.net/npm/shaders@4.0.4/dist/js/bundle.js' await createShader(document.getElementById('fx'), { components: [ { type: 'MeshGradient', props: { stops: [ { color: '#0c0c10', position: 0 }, { color: '#E2A23B', position: 0.7 }, { color: '#f0c070', position: 1 }, ] } }, { type: 'FilmGrain' }, ], }, { disableTelemetry: true }) </script>
Give the container a CSS background that looks like the effect, and only load the library if the browser supports it. That way nobody sees an empty area.
.hero-fx { background: radial-gradient(circle at 20% 20%, #E2A23B88, transparent 60%), #0c0c10; }
if (navigator.gpu) {
const { createShader } = await import('https://cdn.jsdelivr.net/npm/shaders@4.0.4/dist/js/bundle.js')
// ...createShader(...) as in step 3
}
By default, the library sends performance data to shaders.com/api/telemetry on about 5% of visits (it respects the browser's "Do Not Track"). To send nothing, use the option below.
// JavaScript createShader(canvas, preset, { disableTelemetry: true }) // React / Vue / Svelte / Solid <Shader disableTelemetry> ... </Shader>
The official skill teaches Claude Code (or another agent) the components, the layer rule and the CLI. Searching presets by description is free and needs no login.
npx skills add shader-effects-inc/shaders # installs the skill in the agent npx shaders search "liquid chrome hero background" --json # searches presets npx shaders preview <name> # opens the preset running on shaders.com
Links your project to a shaders.com account: what you design in the editor becomes a component file in your code and stays in sync.
npx shaders connect # links the project to your account npx shaders install # picks the project's effects and writes the files npx shaders update # pulls in what you changed in the editor npx shaders@latest install-mcp # MCP for Claude Code, Cursor, Codex...
A new component is an object with a name, props and what to draw at each pixel (in the WGSL language). Then you use it with <CustomShader>.
import { defineShader, wgsl, transformColor, transformPosition } from 'shaders/std' export const Halo = defineShader({ name: 'Halo', props: { color: { default: '#E2A23B', transform: transformColor }, center: { default: { x: 0.5, y: 0.5 }, transform: transformPosition }, radius: { default: 0.6 }, }, paint: wgsl` let d = length((uv - center) * vec2f(aspect, 1.0)) / radius; return vec4f(color.rgb, 1.0 - smoothstep(0.8, 1.0, d)); `, })
The library shines on website pages. For video and courses, go slowly.
shaders/react.defineShader, reused everywhere.Four points we checked in the code and in the project's documentation.
disableTelemetry (step 5).