# ¿Cómo añadir efectos WebGPU gratis a React, Vue o Svelte? Shaders ya es open source **URL:** \ **Category:** Desarrollo\ **Tags:** webgpu, frontend, react, open-source, shaders, react-three-fiber\ **Created:** [8 Octubre, 2026 16:34 UTC](https://www.yodev.dev/t/como-anadir-efectos-webgpu-gratis-a-react-vue-o-svelte-shaders-ya-es-open-source/5593 "2026-10-08T16:34:38Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\ **Post date:** [8 Octubre, 2026 16:34 UTC](https://www.yodev.dev/t/como-anadir-efectos-webgpu-gratis-a-react-vue-o-svelte-shaders-ya-es-open-source/5593/1 "2026-10-08T16:34:38Z")
Los efectos WebGPU de Shaders ya son gratis en cualquier proyecto, incluso comercial: desde el 6 de octubre de 2026, su motor y componentes son MIT. Shader Effects Inc. liberó bajo licencia MIT el motor de renderizado, todos los componentes de efectos y los bindings para React, Vue, Svelte, Solid y JavaScript puro, y además hizo gratuita la exportación de código desde su editor visual. > **[GitHub - shader-effects-inc/shaders: WebGPU components for React, Vue, Svelte, Solid,...](https://github.com/shader-effects-inc/shaders)** > > WebGPU components for React, Vue, Svelte, Solid, JS & Framer Lo que antes era una herramienta creativa de pago ahora es una librería que instalas con `npm install` y llevas a producción. Gradientes animados, vidrio, cromo, neón, distorsiones, estilizado halftone y ASCII, y efectos que reaccionan al cursor: todo como componentes que compones igual que cualquier otra pieza de tu UI. ## ¿Qué es un shader y qué es Shaders? Un shader es un pequeño programa que se ejecuta en la GPU y calcula el color de cada píxel; Shaders es una librería que te da cientos de ellos ya hechos, como componentes. Además incluye un editor de diseño (_design editor_) para construir efectos visualmente. Los efectos se renderizan en vivo en el navegador sobre WebGPU y, según su documentación, no necesitas saber WGSL, GLSL ni programación gráfica: si sabes maquetar una página con CSS o apilar capas en Figma, ya tienes el modelo mental. Un efecto es un componente `` con capas dentro, que se dibujan en orden de abajo hacia arriba. Da igual cuántas capas apiles: un `` se renderiza en un único ``. La documentación habla de casi 200 componentes entre texturas, efectos de forma, distorsiones, estilizado, efectos interactivos, ajustes, desenfoques y transiciones; las propias páginas del fabricante no coinciden en la cifra exacta. ## ¿Qué es gratis y qué sigue siendo de pago en Shaders? El motor y los componentes son MIT; el editor y la biblioteca curada no. El reparto completo, al 8 de octubre de 2026: | | Gratis | Open source (MIT) | | --- | --- | --- | | Motor de renderizado | ✅ | ✅ | | Todos los componentes de efectos | ✅ | ✅ | | Bindings para React, Vue, Svelte, Solid y JS | ✅ | ✅ | | Editor de diseño, incluida la exportación de código | ✅ | ❌ | | CLI y servidor MCP (las herramientas en sí) | ✅ | ❌ | | Presets Pro y secciones prediseñadas | ❌ (Pro) | ❌ | | Renderizado de video e imagen sin marca de agua | ❌ (Pro) | ❌ | | Instalar presets y secciones vía CLI o MCP | ❌ (Pro) | ❌ | El anuncio es explícito: trabajos comerciales para clientes, productos SaaS y herramientas internas no necesitan licencia. También se hizo público `defineShader`, el lenguaje que el equipo usa para construir sus propios componentes, así que puedes escribir los tuyos y enviarlos como pull request. La documentación marca las primitivas subyacentes como experimentales y sujetas a cambios entre versiones. ## ¿Cómo añadir un efecto WebGPU a una app de React? Instala un solo paquete e importa desde su entrada para React: ```bash npm install shaders ``` Este es el ejemplo del _quickstart_ oficial: un gradiente de oscuro a violeta con una estela que sigue al cursor. ```jsx import { Shader, LinearGradient, CursorTrail } from 'shaders/react' export default function Hero() { return ( ) } ``` El canvas no tiene tamaño propio: toma el que le des a `` mediante `className` o `style`. Aplica los estilos al ``, no al `` interno, cuyo marcado puede cambiar entre versiones. Las props funcionan como cualquier prop de React y aceptan estado; según la documentación, cambiar un valor como el `angle` de un gradiente lo actualiza en la GPU en el siguiente frame, sin recompilar el efecto. ### ¿Funciona con Next.js y renderizado en servidor? Sí, pero solo en el cliente. Shaders necesita un navegador con GPU, así que no puede renderizarse en el servidor. En el App Router de Next.js, añade `'use client'` al inicio de cualquier archivo que renderice un ``. La guía oficial de SSR cubre también el Pages Router y otras configuraciones. ### ¿Y con Vue, Svelte, Solid o JavaScript puro? Es el mismo paquete con otra entrada: `shaders/vue`, `shaders/svelte`, `shaders/solid` o `shaders/js`. El árbol de componentes es idéntico entre frameworks, y cada uno tiene su propio _quickstart_ en la documentación. ## ¿Shaders o React Three Fiber? Depende de si quieres efectos 2D sobre tu UI o una escena 3D completa. React Three Fiber es un renderizador de React para three.js: construyes escenas con cámara, luces, mallas y materiales, y su propia documentación recomienda dominar React y three.js antes de empezar. Shaders apunta a otro problema: capas de efectos (fondos, texturas, distorsiones, estilizado de imágenes y video) que apilas sin pensar en geometría ni cámaras. Hay otra diferencia que importa hoy: al momento de publicar esta nota, el soporte de WebGPU en React Three Fiber llega con su versión 10, que sigue en alfa; Shaders es WebGPU desde la base. Si necesitas modelos 3D, física o realidad virtual, React Three Fiber y su ecosistema siguen siendo la opción. Si quieres un hero animado o un efecto de vidrio sobre tu landing sin aprender three.js, Shaders es el camino más corto. ## ¿WebGPU funciona en todos los navegadores? Todavía no en todos, pero el fallo es elegante: en un dispositivo sin WebGPU, el canvas de Shaders queda transparente, se ve lo que haya detrás y el resto de la página funciona con normalidad. En la práctica, un color de fondo sólido detrás del efecto es tu _fallback_. Según la página de estado de implementación de WebGPU (actualizada el 13 de agosto de 2026): - **Chrome y Edge:** activado en Windows, macOS y ChromeOS, y en Android 12+ para la mayoría de las GPU. En Linux, solo con Intel Gen12+ y drivers NVIDIA recientes sobre Wayland; en el resto, detrás de un flag. - **Safari:** activado en macOS, iOS e iPadOS 26. - **Firefox:** activado en Windows y macOS. En Linux y Android sigue solo en Nightly o detrás de un flag. Para probar una máquina concreta, Shaders ejecuta una verificación real del renderizador en [Browser check — Shaders](http://shaders.com/check), sin subir nada. ## ¿Shaders envía telemetría? Sí, por defecto en producción. Según su documentación, Shaders recopila datos de uso anónimos: el dominio donde está instalado el efecto y los FPS en tiempo de ejecución. Afirma que no captura información personal, y la telemetría se desactiva automáticamente en localhost y en desarrollo. Para desactivarla en producción, basta con una prop: ```jsx ``` Si lo entregas a clientes, pon esa decisión en tu checklist en lugar de descubrirla en una revisión de privacidad. ## ¿Se puede usar con Claude Code o Cursor? Sí, mediante el servidor MCP de Shaders, que según la documentación permite que un agente como Claude Code o Cursor instale y edite efectos por ti. El MCP y la CLI son gratuitos; para traer presets y secciones Pro a través de ellos necesitas suscripción. ## ¿Está listo para producción? El paquete sí: la versión 4.0.2 está en npm, publicada con atestaciones de procedencia desde GitHub Actions. La cifra de más de 16.000 _design engineers_ que usan la herramienta es del propio fabricante, no está verificada de forma independiente, y el repositorio público es reciente. Fija la versión, mantén el fondo de respaldo y trata las primitivas personalizadas como experimentales, tal como hace la documentación. * * * **¿Y tú?** ¿Qué efecto de Shaders pondrías primero en tu landing: un fondo animado, vidrio o algo que siga al cursor? _Poll ([view on site](https://www.yodev.dev/t/como-anadir-efectos-webgpu-gratis-a-react-vue-o-svelte-shaders-ya-es-open-source/5593/1))_ Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí. Relacionado: [Arte ASCII animado para tu web: 191 piezas gratis para HTML, React y Astro](https://www.yodev.dev/t/arte-ascii-animado-para-tu-web-191-piezas-gratis-para-html-react-y-astro/5586)