Shaders.com

Shaders.com is the component-source layer for composable shader effects; Shaders MCP is its agent-native control surface.

Routing Summary

Load this through Component Library Sources, Shader Effects Libraries, or the Web 3D pack when a design needs real visual material: shader backgrounds, masked surfaces, refraction, glass, ASCII/dither effects, liquid effects, and agent-discoverable presets. Use Shaders MCP when the agent should browse/search/install/customize presets programmatically. Source: Shaders.com, https://shaders.com/; Shaders MCP docs, https://shaders.com/docs/guide/mcp, accessed 2026-06-26

Use When

• A screen needs shader-level atmosphere, not a flat gradient or decorative blob.
• A project can afford WebGPU/WebGL effect complexity and browser verification.
• The agent should search by visual description and install a preset rather than hand-writing shader code.
• A component library route should include shader components alongside React/Tailwind component registries.

Integration Rules

• Treat shader effects as progressive enhancement. Core content must stay legible without them.
• Verify performance, contrast, reduced-motion, and fallback rendering.
• Do not place heavy shader effects behind dense text or data tables unless contrast is proven.
• Route implementation details through Shader Effects Libraries, Shaders MCP, Frontend and Design Skills, or Frontend and Design Skills based on runtime shape.

---

Timeline

• 2026-06-26 | Created to separate the base Shaders.com component/effects source from the existing Shaders MCP integration page and make it visible to design/design-system packs. Source: User request, 2026-06-26; https://shaders.com/