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.
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 <Shader> con capas dentro, que se dibujan en orden de abajo hacia arriba. Da igual cuántas capas apiles: un <Shader> se renderiza en un único <canvas>. 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:
npm install shaders
Este es el ejemplo del quickstart oficial: un gradiente de oscuro a violeta con una estela que sigue al cursor.
import { Shader, LinearGradient, CursorTrail } from 'shaders/react'
export default function Hero() {
return (
<Shader className="w-full h-64">
<LinearGradient colorA="#0f172a" colorB="#7c3aed" />
<CursorTrail />
</Shader>
)
}
El canvas no tiene tamaño propio: toma el que le des a <Shader> mediante className o style. Aplica los estilos al <Shader>, no al <canvas> 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 <Shader>. 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, 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:
<Shader disableTelemetry={true}>
<LinearGradient />
</Shader>
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?
- CSS puro
- three.js o React Three Fiber
- Una librería de componentes de efectos
- Prefiero otra opción (cuéntanos cuál)
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