shader-effects-inc / shaders

Shaders 
 WebGPU effects as components for React, Vue, Svelte, Solid and JavaScript
 [code] 
## Table of Contents
1. Why Shaders?
2. 🧩 Components
3. 🎨 Design visually, export code
4. ⌨️ CLI
5. 🤖 Using Shaders with AI
6. ⚡️ Shaders Pro
7. 🧪 Build your own component
8. 👩🏻‍⚖️ License
9. 💎 Contribute
## Why Shaders?
- **Real WebGPU, declarative API:** 200+ effects you drop in as components. Gradients, noise, glass, metal, light, distortions, transitions, blurs, cursor effects. Nest them, blend them, mask them.
- **A design editor that writes your code:** design on an infinite canvas at shaders.com, then export the exact component tree for your framework. Free.
- **Every framework, one package:** first-class React, Vue, Svelte, Solid and JavaScript entries, with the same props everywhere.
- **Production-ready:** TypeScript, extensively optimized, typed props with reactive updates, SSR safe. Used on thousands of websites by 16,000+ design engineers.
## 🧩 Components
Every effect is a component. ` ` renders the canvas; its children are layers, evaluated top to bottom and blended on the GPU.
### React
 [code] 
Get started with Shaders for React.
### Vue
 [code] 
Get started with Shaders for Vue.
### Svelte
 [code] 
Get started with Shaders for Svelte.
### Solid
 [code] 
Get started with Shaders for Solid.
### JavaScript
 [code] 
Get started with Shaders for JavaScript.
Browse all 200+ components, each with a live preview and every prop documented.
## 🎨 Design visually, export code
Most people don't write their effects by hand. They design them.
The design editor at shaders.com is an infinite canvas where you stack components, tune every prop with real controls, drive props from the cursor or a timeline, and see the result live. When it looks right, **Export Code** gives you the component tree in your framework, ready to paste.
Design and export are free with an account. Your work is saved as projects you can come back to.
Open the design editor
## ⌨️ CLI
The CLI connects a codebase to your Shaders account, so the effects you design land in your project as real component files and stay in sync.
 [code] 
It detects your framework, writes to your components folder, and records what it installed in a lock file. Nothing to install globally.
Read the CLI guide.
## 🤖 Using Shaders with AI
Give your coding agent the same tools you have:
- **Agent skill:** `npx shaders skill` (or `npx skills add shader-effects-inc/shaders`) installs a skill that teaches your agent the component library, how layers compose, and the CLI workflow. `npx shaders connect` adds it for you. Skill guide.
- **MCP server:** `npx shaders@latest install-mcp` configures Claude Code, Cursor, Codex, Windsurf, Copilot and others. Your agent can find, install and edit the shaders you design. Works on any account, free included. MCP guide.
- **llms.txt:** shaders.com/llms.txt indexes every docs page, and shaders.com/llms-full.txt carries the full component reference with props, defaults and ranges.