# Shaders

> MIT WebGPU effects as components — React, Vue, Svelte, Solid, plain JS

**Category:** Libraries  
**Pricing:** freemium  
**URL:** https://shaders.com  
**GitHub:** https://github.com/shader-effects-inc/shaders  
**Added:** 2026-10-08

---

## The Hook

Shaders makes GPU effects declarative: a `<Shader>` canvas whose children are layers — gradients, noise, glass, metal, distortions, transitions, cursor trails — blended top to bottom on the GPU, with the same props in every framework.

## What's Good

Engine, 200+ components, and framework bindings are MIT (shader-effects-inc/shaders; npm `shaders` 4.0.2, 2026-10-07). One package with React, Vue, Svelte, Solid, and JS entries; TypeScript and SSR-safe. Agent-ready: `npx shaders skill` installs a skill, `npx shaders@latest install-mcp` wires an MCP server into Claude Code, Cursor, Codex and others, and shaders.com/llms.txt indexes the docs. Free visual design editor that exports the component tree. ★~2.7k.

## The Catch

Real WebGPU, and the README does not describe a WebGL fallback — check your browser support targets before using it on critical UI. The design editor, CLI sync, and MCP need a shaders.com account, and the editor, presets, and sections are under separate platform terms, not MIT. The 1,000+ presets, ready-made sections, watermark-free renders, and the Framer plugin are paid Pro. Vs pixijs or babylonjs (full renderers you program): Shaders is drop-in effect components, not a scene graph or game engine.

## Verdict

MIT WebGPU effect components when a landing page needs GPU polish without writing WGSL — free engine, paid preset library, no documented WebGL fallback.