Shaders：200+ 个开源 WebGPU 特效组件，编程助手可直接接 Shaders: 200+ open-source WebGPU effect components your coding agent can use

详细介绍Details

Shaders 把渐变、噪点、玻璃、金属、光效、扭曲、转场、鼠标拖尾这类 WebGPU 特效做成一个个组件，React、Vue、Svelte、Solid 和原生 JS 都能用，一层层叠起来就是一张会动的背景或首屏。官网有免费的设计编辑器，调好后导出对应框架的代码。和 Agent 最相关的一点：一行 `npx shaders@latest install-mcp` 就能把它的 MCP 服务装进 Claude Code、Cursor、Codex 等，让助手自己找、装、改你设计的特效，免费账号也能用；另有 llms.txt 给模型读。 Shaders turns WebGPU effects such as gradients, noise, glass, metal, light, distortion, transitions, and cursor trails into components for React, Vue, Svelte, Solid, and plain JS; stack a few and you have a moving background or hero. The site has a free design editor that exports code for your framework. The agent-relevant part: one `npx shaders@latest install-mcp` installs its MCP server into Claude Code, Cursor, Codex, and others so the agent can find, install, and edit the effects you designed, free accounts included, and there is an llms.txt for models.

适合怎么用How to use it

• component component

  该类型下收录的 ThreeUI Community 免费组件。 Free ThreeUI Community components listed under this type.

• shader shader

  该类型下收录的 ThreeUI Community 免费组件。 Free ThreeUI Community components listed under this type.

• 背景场 Background

  铺满画布的场：星座、结构流、传送门一类背景。 Full-canvas fields: constellations, structure flow, portals, and similar backdrops.

• agent-api agent-api

  该类型下收录的 ThreeUI Community 免费组件。 Free ThreeUI Community components listed under this type.

• library library

  该类型下收录的 ThreeUI Community 免费组件。 Free ThreeUI Community components listed under this type.

为什么推荐Why we recommend it 价格页写：免费档包含全部开源组件、设计编辑器、代码导出和 CLI/MCP；Pro（$199/年）加的是 1000+ 预设、55+ 网页区块、给 AI 的复制提示词和高清导出——这些不在本条收录范围。「16,000+ 设计工程师」是官网自述。本库没有安装 MCP。 The pricing page says the free tier includes every open-source component, the design editor, code export, and CLI/MCP; Pro ($199/yr) adds 1000+ presets, 55+ website sections, copy-paste prompts for AI, and HD export, all out of scope here. “16,000+ design engineers” is a site claim. This library did not install the MCP.

给 AgentFor the Agent 用 Shaders 的免费开源组件给首屏或背景叠两三层特效（比如 LinearGradient + CursorTrail），先装 MCP 让助手按 llms-full.txt 里的参数调；不要用 Pro 预设、Pro 网页区块或 Pro 提示词。 Stack two or three free open-source Shaders components for a hero or background (for example LinearGradient + CursorTrail), install the MCP so the agent tunes props from llms-full.txt, and do not use Pro presets, Pro sections, or Pro prompts.