BlogRoundup
Shader backgrounds you can ship in React with zero GLSL
Moving gradients, fluid, grain and full shader components for React, Vue, Svelte and Solid. Eight sources on the board and what each one costs the bundle.
· updated Sep 7, 2026 · 3 min read · 8 products
The short answer
Shaders is the shelf: production ready web shader components for React, Vue, Svelte and Solid, with a free tier. Canvas UI is the open source alternative for canvas and WebGL effects. Shader Gradient covers the moving gradient for Framer, Figma and React, NEAT the animated 3D gradient, FluidShader the fluid with copyable code. vgpu is the WebGPU library when an agent writes the shader. Paper and Unicorn Studio are the editors.
A moving background is the cheapest way to make a landing page feel expensive, and the most common way to make it feel slow. The board has eight sources that do the first and skip the second, and they split by how much code you want to own.
Which one is a component library?
Shaders, first. Production ready web shader components for React, Vue, Svelte and Solid, freemium. Install, pick a shader, set the colours as props, done. Canvas UI is the open source answer: canvas and WebGL effects for React, Vue, Svelte and vanilla, free.
Which one is a gradient?
Shader Gradient, for moving gradients in Framer, Figma and React, free. NEAT, for an animated 3D gradient with 20 presets, free. FluidShader, for a WebGL fluid gradient with copyable shader code, free. The three cover the range from a soft drift to a liquid, and all three export something you paste.
Which one for grain and dither?
Grainrad, free WebGPU ASCII, dithering and retro effects at 60 frames. It is the pick for the film grain that a flat gradient needs to stop looking like a gradient.
Which one is an editor?
Paper is a design tool built for shaders, motion and shipping. Unicorn Studio is interactive motion and real time graphics for the web with an embed. Both are for the case where the background is the design, and both export for the web.
Which one when an agent writes it?
vgpu. The WebGPU library built for agents: one shader renders in the browser, in Node and in CI, exports to png or mp4, and ships a CLI, a skill and an MCP server. It is the one to hand Claude Code when the shader you want is still missing from every shelf.
The bundle rule
One canvas per page, paused when off screen, and a static fallback for reduced motion. Every library here supports the pause, so the cost is one prop.
The hub is dev tools on the board, the still gradients are in gradient and background generators worth a bookmark, and the animation library question is in Motion vs Anime.js.
Production ready shader components for four frameworks
Install, pick, set colours as props. The shelf for a team that wants the effect and zero GLSL.
Pros
- React, Vue, Svelte and Solid
- Props for colours
- Free tier
Cons
- The full catalogue is paid
Open source canvas and WebGL effects
The free alternative with source you can read. Vanilla as well as the frameworks.
Pros
- Free and open source
- Vanilla supported
- Readable
Cons
- Smaller catalogue than Shaders
The moving gradient for Framer, Figma and React
The most used background on this list. Framer first, React second.
Pros
- Free
- Framer component
- Soft by default
Cons
- Everyone recognises it by now
Animated 3D gradient with 20 presets
The drift with depth. Free, with presets that save the hour of tuning.
Pros
- Free
- 20 presets
- Exports code
Cons
- Heavier on the GPU than a flat gradient
WebGL fluid with copyable shader code
The liquid one. Copy the shader, paste it, tune the colours.
Pros
- Free
- Copyable code
- Real fluid
Cons
- Fluid on a phone gets warm fast
ASCII, dithering and retro effects at 60fps on WebGPU
The grain a flat gradient needs. WebGPU, so check the browser support for your audience.
Pros
- Free
- 60fps
- Retro range
Cons
- WebGPU support is still uneven
The WebGPU library built for agents
One shader in the browser, Node and CI. A CLI, a skill and an MCP server, so the agent is the caller.
Pros
- Free
- Renders in CI
- MCP server included
Cons
- A library, so the shader is yours to write or generate
Interactive motion and real time graphics with an embed
For the case where the background is the design. Embeds anywhere.
Pros
- Visual editor
- Embed anywhere
- Free to start
Cons
- An embed is a dependency on their hosting
Questions
How much does a shader background cost on load?
The library is 20 to 60 KB, the shader itself is bytes. The real cost is GPU time, which shows up as a warm phone. Pause the canvas when it leaves the viewport, cap the frame rate at 30 for a background, and serve a static image for prefers reduced motion. Every library here exposes the pause.
Which of these are free?
Canvas UI, Shader Gradient, NEAT, FluidShader, Grainrad and vgpu are free. Shaders has a free tier with the larger catalogue paid. Paper and Unicorn Studio are freemium editors, free to make and export the first scenes.
Do they work in Framer?
Shader Gradient is built for Framer, Figma and React and installs as a component. Unicorn Studio embeds anywhere including Framer. The React libraries need a code component in Framer, which is a five minute wrapper.
