shader-effects-inc/shaders

O que é?

Recursos principais

• 01Mais de 200 componentes de efeitos em WebGPU, como gradientes, ruído, vidro e transições
• 02Mesmas props e API em React, Vue, Svelte, Solid e JavaScript
• 03Editor visual de design que exporta código de componentes para frameworks
• 04CLI para sincronizar componentes escolhidos com uma base de código, usando um arquivo de lock
• 05Servidor MCP e skill para agentes de programação com IA
• 06Componentes personalizados definidos com código WGSL para pixels

Casos de uso

• Adicionar fundos animados com gradientes ou efeito de vidro a um site de marketing ou landing page
• Prototipar efeitos visuais em um editor no navegador e exportá-los para um app React ou Vue
• Permitir que um agente de programação com IA encontre e instale efeitos de shader em um projeto existente
• Criar efeitos interativos de cursor ou hover em um front-end com Svelte ou Solid

Início rápido

1. 1

   Instale o pacote

   npm install shaders
2. 2

   Importe Shader e os componentes no seu framework (por exemplo, React) e renderize-os

Antes de usar

• !Os presets Pro, as seções e alguns recursos do editor exigem um plano Pro pago.
• !O editor de design e as exportações estão vinculados a uma conta do shaders.com, separada do pacote licenciado sob MIT.
• !Os efeitos dependem do WebGPU, portanto o navegador precisa oferecer suporte.

Tópicos

Perguntas frequentes

O que é shaders?

Efeitos de shader em WebGPU empacotados como componentes prontos para React, Vue, Svelte, Solid e JavaScript puro. Shaders é uma biblioteca de componentes que transforma efeitos visuais em WebGPU, como gradientes, ruído, vidro, distorções, transições, desfoques e efeitos de cursor, em componentes para frameworks. Um elemento Shader renderiza um canvas, e seus componentes filhos são empilhados de cima para baixo e mesclados na GPU. As mesmas props funcionam nas integrações com React, Vue, Svelte, Solid e JavaScript puro.

shaders é gratuito? Qual é a licença?

shaders é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

shaders ainda é mantido?

Manutenção ativa. O último commit de shaders foi em 9 de out. de 2026.

Para que posso usar shaders?

Adicionar fundos animados com gradientes ou efeito de vidro a um site de marketing ou landing page Prototipar efeitos visuais em um editor no navegador e exportá-los para um app React ou Vue Permitir que um agente de programação com IA encontre e instale efeitos de shader em um projeto existente Criar efeitos interativos de cursor ou hover em um front-end com Svelte ou Solid

Como instalar shaders?

Instale o pacote: npm install shaders Importe Shader e os componentes no seu framework (por exemplo, React) e renderize-os

Onde consigo shaders?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/shader-effects-inc/shaders