Os efeitos WebGPU do Shaders agora são gratuitos em qualquer projeto, inclusive comercial: a partir de 6 de outubro de 2026, seu motor e componentes são MIT. A Shader Effects Inc. liberou sob licença MIT o motor de renderização, todos os componentes de efeitos e os bindings para React, Vue, Svelte, Solid e JavaScript puro, e também tornou gratuita a exportação de código do seu editor visual.
O que antes era uma ferramenta criativa paga agora é uma biblioteca que você instala com npm install e leva para produção. Gradientes animados, vidro, cromo, neon, distorções, estilização halftone e ASCII, e efeitos que reagem ao cursor: tudo como componentes que você compõe igual a qualquer outra parte da sua UI.
O que é um shader e o que é Shaders?
Um shader é um pequeno programa que roda na GPU e calcula a cor de cada pixel; Shaders é uma biblioteca que te dá centenas deles já prontos, como componentes. Além disso inclui um editor de design para construir efeitos visualmente. Os efeitos são renderizados em tempo real no navegador sobre WebGPU e, de acordo com sua documentação, você não precisa saber WGSL, GLSL nem programação gráfica: se sabe fazer layout de página com CSS ou empilhar camadas no Figma, você já tem o modelo mental.
Um efeito é um componente <Shader> com camadas dentro, que são desenhadas em ordem de baixo para cima. Não importa quantas camadas você empilhe: um <Shader> é renderizado em um único <canvas>. A documentação fala de quase 200 componentes entre texturas, efeitos de forma, distorções, estilização, efeitos interativos, ajustes, desfocagens e transições; as próprias páginas do fabricante não coincidem no número exato.
O que é gratuito e o que continua sendo pago em Shaders?
O motor e os componentes são MIT; o editor e a biblioteca curada não. A divisão completa, em 8 de outubro de 2026:
| Gratuito | Open source (MIT) | |
|---|---|---|
| Motor de renderização |  |
|
| Todos os componentes de efeitos | |
|
| Bindings para React, Vue, Svelte, Solid e JS | |
|
| Editor de design, incluindo exportação de código | |
 |
| CLI e servidor MCP (as ferramentas em si) | |
|
| Presets Pro e seções pré-designer | (Pro) |
|
| Renderização de vídeo e imagem sem marca d’água | (Pro) |
|
| Instalar presets e seções via CLI ou MCP | (Pro) |
|
O anúncio é explícito: trabalhos comerciais para clientes, produtos SaaS e ferramentas internas não precisam de licença. Também foi tornado público o defineShader, a linguagem que o time usa para construir seus próprios componentes, então você pode escrever os seus e enviá-los como pull request. A documentação marca as primitivas subjacentes como experimentais e sujeitas a mudanças entre versões.
Como adicionar um efeito WebGPU a uma app React?
Instale um único pacote e importe da sua entrada para React:
npm install shaders
Este é o exemplo do quickstart oficial: um gradiente de escuro para violeta com um rastro que segue o 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>
)
}
O canvas não tem tamanho próprio: toma o que você dá ao <Shader> através de className ou style. Aplique os estilos ao <Shader>, não ao <canvas> interno, cuja marcação pode mudar entre versões. As props funcionam como qualquer prop React e aceitam estado; de acordo com a documentação, mudar um valor como o angle de um gradiente o atualiza na GPU no próximo frame, sem recompilar o efeito.
Funciona com Next.js e renderização no servidor?
Sim, mas apenas no cliente. Shaders precisa de um navegador com GPU, então não pode ser renderizado no servidor. No App Router do Next.js, adicione 'use client' no início de qualquer arquivo que renderize um <Shader>. O guia oficial de SSR também cobre o Pages Router e outras configurações.
E com Vue, Svelte, Solid ou JavaScript puro?
É o mesmo pacote com outra entrada: shaders/vue, shaders/svelte, shaders/solid ou shaders/js. A árvore de componentes é idêntica entre frameworks, e cada um tem seu próprio quickstart na documentação.
Shaders ou React Three Fiber?
Depende se você quer efeitos 2D sobre sua UI ou uma cena 3D completa. React Three Fiber é um renderizador React para three.js: você constrói cenas com câmera, luzes, malhas e materiais, e sua própria documentação recomenda dominar React e three.js antes de começar. Shaders aponta para outro problema: camadas de efeitos (fundos, texturas, distorções, estilização de imagens e vídeo) que você empilha sem pensar em geometria nem câmeras.
Há outra diferença que importa hoje: no momento de publicar esta nota, o suporte de WebGPU no React Three Fiber chega com sua versão 10, que ainda está em alfa; Shaders é WebGPU desde a base. Se você precisa de modelos 3D, física ou realidade virtual, React Three Fiber e seu ecossistema continuam sendo a opção. Se quer um hero animado ou um efeito de vidro em sua landing sem aprender three.js, Shaders é o caminho mais curto.
WebGPU funciona em todos os navegadores?
Ainda não em todos, mas a falha é elegante: em um dispositivo sem WebGPU, o canvas do Shaders fica transparente, você vê o que há atrás e o resto da página funciona normalmente. Na prática, uma cor de fundo sólida atrás do efeito é seu fallback.
De acordo com a página de status de implementação de WebGPU (atualizada em 13 de agosto de 2026):
- Chrome e Edge: ativado no Windows, macOS e ChromeOS, e no Android 12+ para a maioria das GPUs. No Linux, apenas com Intel Gen12+ e drivers NVIDIA recentes sobre Wayland; no resto, atrás de uma flag.
- Safari: ativado no macOS, iOS e iPadOS 26.
- Firefox: ativado no Windows e macOS. No Linux e Android continua apenas em Nightly ou atrás de uma flag.
Para testar uma máquina específica, Shaders executa uma verificação real do renderizador em Browser check — Shaders, sem enviar nada.
Shaders envia telemetria?
Sim, por padrão em produção. De acordo com sua documentação, Shaders coleta dados de uso anônimos: o domínio onde o efeito está instalado e os FPS em tempo de execução. Afirma que não captura informações pessoais, e a telemetria é desativada automaticamente em localhost e em desenvolvimento. Para desativá-la em produção, basta uma prop:
<Shader disableTelemetry={true}>
<LinearGradient />
</Shader>
Se você entregar para clientes, coloque essa decisão em sua checklist em vez de descobri-la em uma revisão de privacidade.
Pode ser usado com Claude Code ou Cursor?
Sim, através do servidor MCP do Shaders, que de acordo com a documentação permite que um agente como Claude Code ou Cursor instale e edite efeitos para você. O MCP e a CLI são gratuitos; para trazer presets e seções Pro através deles você precisa de assinatura.
Está pronto para produção?
O pacote sim: a versão 4.0.2 está em npm, publicada com atestações de procedência do GitHub Actions. O número de mais de 16.000 design engineers que usam a ferramenta é do próprio fabricante, não está verificado de forma independente, e o repositório público é recente. Fixe a versão, mantenha o fundo de fallback e trate as primitivas personalizadas como experimentais, assim como faz a documentação.
E você? Qual efeito do Shaders você colocaria primeiro em sua landing: um fundo animado, vidro ou algo que siga o cursor?
- CSS puro
- three.js ou React Three Fiber
- Uma biblioteca de componentes de efeitos
- Prefiro outra opção (conta pra gente qual)
Comente abaixo ou, se este artigo chegou para você por email, responda diretamente ao email: sua resposta é publicada aqui.
Relacionado: Arte ASCII animada para sua web: 191 peças gratis para HTML, React e Astro