shader-effects-inc/shaders

paquete npm install shaders que expone 200+ WebGPU effects como componentes para React, Vue, Svelte, Solid y JavaScript; editor visual online en shaders.com que exporta el árbol de componentes exacto; MCP server nativo; usado por 16k+ design engineers.

Estrellas

—

Forks

—

Lenguaje

TypeScript

Licencia

MIT

Issues

—

Estado

—

Cómo funciona

Implementa sin concepto declarado

Núcleo

shader-effects-inc/shaders TypeScript · MIT clijavascriptmcpreactshaderssolidsveltevue +1

Se cruza con todavía sin cruces en el grafo

Diagrama derivado de madurez_senales (lenguaje, licencia, estado y topics) y de las relaciones que este repo tiene en el grafo de conocimiento. No es una arquitectura del proyecto: es su posición funcional tal como la registran los boletines.

Relaciones que aportó este boletín

implementswebgpu-shaders-as-componentsnuevo integrates_withmcp· 2026-09-21enablesai-generated-ui-effectsnuevocompetes_withreact-three-fibernuevo

Por qué importa

shaders es el primer paquete tipo "shadcn" para WebGPU effects: 200+ efectos (gradients, noise, glass, metal, light, distortions, transitions, blurs, cursor effects) expuestos como componentes para React, Vue, Svelte, Solid y JavaScript, todos componibles (nested + blended), con type-safety y editor visual online en shaders.com que exporta exactamente el árbol de componentes resultante. Hay además un CLI en el repo y un MCP server (protocolo que cubrimos el 2026-09-21) para que un agente AI pueda integrar shader effects directamente en componentes que diseña. Lo que lo separa de aproximaciones anteriores tipo react-shader-fiber: ya no hay que escribir GLSL inline, los shaders se tratan como props declarativas, igual que cualquier otro componente. Encuadre para CSS: para un lector que diseña interfaces o que está explorando AI-generated UI effects, esta es la pieza que baja la barrera de entrada a WebGPU — el editor visual cubre el caso "quiero probarlo sin aprender la API" y el catálogo cerrado da una base estable sobre la que iterar.

Alerta

instalando en un proyecto React/Vue existente, usar el editor shaders.com para diseñar + exportar el árbol. Vigilar la versión Pro (de pago, según el README) si la API gratuita cubre lo que necesitas.

shaders en npm install shaders con editor comercial en shaders.com y claim "16k+ design engineers": el repositorio es el escaparate, el negocio está en el SaaS

Acción concreta

shaders como componentes WebGPU encaja directo con la línea editorial de UI generativa del newsletter; es material publicable.

Apariciones · 1

2026-10-08 hallazgo principal
primera vez en el boletín

Señales de madurez (texto original)

Estrellas: 2.908 · Forks: 103 · Lenguaje: TypeScript · Último push: 2026-10-07 · Licencia: MIT · Descripción oficial: "WebGPU components for React, Vue, Svelte, Solid, JS & Framer" · Topics: cli, javascript, mcp, react, shaders, solid, svelte, vue, webgpu-shaders