Efeitos WebGPU · grátis · MIT

Seu site com efeitos de cinema

Mais de 200 efeitos visuais (gradientes vivos, vidro, metal, luz, partículas) que você coloca na página como um componente.

Começar o guia Ver a demo ao vivo
Banner: Sites com Shaders, 200+ efeitos WebGPU grátis para o seu site
Em resumo

Shaders é uma biblioteca gratuita e de código aberto (licença MIT) com mais de 200 efeitos visuais para páginas web. Ela serve para quem faz sites, landing pages e apps e quer um fundo animado, um brilho ou uma distorção sem escrever código de placa de vídeo. Cada efeito é um componente: você empilha camadas e a placa de vídeo do visitante desenha tudo em tempo real, pela tecnologia WebGPU. Para usar, basta instalar o pacote shaders (React, Vue, Svelte, Solid ou JavaScript puro) e abrir num navegador com WebGPU.

Demo ao vivo

Isto aqui é a biblioteca rodando

Três combinações feitas só com componentes grátis. Se o seu navegador não tiver WebGPU, você vê o fundo estático, que é exatamente o que o seu site deve mostrar nesse caso.

Carregando…

A demo carrega o pacote oficial shaders@4.0.4 pelo jsDelivr só quando você chega nesta seção e só se o navegador tiver WebGPU (são cerca de 2,5 MB). A telemetria está desligada (disableTelemetry: true) e a animação pausa quando sai da tela.

O que é

Efeitos de GPU que se montam como camadas

É um pacote npm (shaders, versão 4.0.4 em 18/10/2026) mantido pela Shader Effects Inc. Este repositório inematds/shaders é um espelho com este guia; o projeto original é shader-effects-inc/shaders.

Banner: componentes, editor visual, CLI, MCP para agentes, shader próprio, grátis x Pro

🧩 200+ componentes

Gradientes, ruídos, vidro, metal, luz, distorções, transições, desfoques e efeitos de cursor. Um <Shader> desenha o canvas e cada filho é uma camada.

🖌️ Editor visual

No site shaders.com você monta o efeito numa tela infinita, ajusta cada valor e exporta o código pronto para o seu framework (grátis, com conta).

🤖 Feito para agentes

Traz uma skill para o agente de código, um servidor MCP e o llms.txt com todos os componentes e props. O Claude Code entende a biblioteca sozinho.

Grátis x Pro

Grátis (MIT)Pro (pago, no shaders.com)
Motor, os 200+ componentes e as versões React, Vue, Svelte, Solid e JSMais de 1.000 presets prontos, em coleções
Editor visual e exportar código (precisa de conta)55+ seções de site completas
CLI, skill, MCP e busca de presetsRender de vídeo e imagem em HD sem marca d'água
Escrever o seu próprio efeito com defineShaderPlugin do Framer, histórico de versões, presets Pro pela CLI/MCP
Como funciona

Uma tela, várias camadas, a GPU mistura

A ordem importa: a primeira camada fica no fundo e a última por cima. Efeitos que transformam imagem (desfoque, grão, vinheta, ondas) agem sobre o que veio antes deles.

<Shader> cria o canvas→ Gerador (ex.: MeshGradient)→ Efeito (ex.: FilmGrain)→ Interação (ex.: CursorRipples)→ GPU desenha a cada quadro
Pré-requisitos

O que você precisa

Nada de placa de vídeo especial: quem desenha é o navegador de quem visita o site.

Node e npm

Para instalar o pacote num projeto React, Vue, Svelte ou Solid.

# conferir
node -v && npm -v

Navegador com WebGPU

Chrome e Edge recentes têm WebGPU. Nos outros, o suporte varia por versão e sistema: sempre prepare um fundo estático.

// no console do navegador
!!navigator.gpu

Conta no shaders.com (opcional)

Só para o editor visual, a CLI conectada e o MCP. O pacote npm funciona sem conta.

# sem conta, só o pacote
npm install shaders
Guia de uso · passo a passo

Do zero ao primeiro efeito

Comandos e exemplos tirados do README e da skill oficial do projeto.

1

Instale o pacote

Um pacote só serve para todos os frameworks.

npm install shaders
2

Coloque o primeiro efeito (React)

O tamanho vem do CSS do <Shader>. Os filhos são as camadas. Em Vue, Svelte e Solid é igual, trocando o import para shaders/vue, shaders/svelte ou shaders/solid.

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0c0c10" colorB="#E2A23B" />
  <CursorTrail />
</Shader>
3

Página HTML sem build (JavaScript puro)

Para guias e páginas de um arquivo só: importe o bundle oficial pelo CDN e passe as camadas como lista. É assim que a demo desta página funciona.

<canvas id="fx" style="width:100%;height:360px"></canvas>
<script type="module">
import { createShader } from 'https://cdn.jsdelivr.net/npm/shaders@4.0.4/dist/js/bundle.js'

await createShader(document.getElementById('fx'), {
  components: [
    { type: 'MeshGradient', props: { stops: [
      { color: '#0c0c10', position: 0 },
      { color: '#E2A23B', position: 0.7 },
      { color: '#f0c070', position: 1 },
    ] } },
    { type: 'FilmGrain' },
  ],
}, { disableTelemetry: true })
</script>
4

Prepare o plano B (sem WebGPU)

Dê ao contêiner um fundo CSS parecido com o efeito e só carregue a biblioteca se o navegador suportar. Assim ninguém vê uma área vazia.

.hero-fx { background: radial-gradient(circle at 20% 20%, #E2A23B88, transparent 60%), #0c0c10; }

if (navigator.gpu) {
  const { createShader } = await import('https://cdn.jsdelivr.net/npm/shaders@4.0.4/dist/js/bundle.js')
  // ...createShader(...) como no passo 3
}
5

Desligue a telemetria

Por padrão, a biblioteca envia dados de desempenho para shaders.com/api/telemetry em cerca de 5% das visitas (ela respeita o "Do Not Track" do navegador). Para não enviar nada, use a opção abaixo.

// JavaScript
createShader(canvas, preset, { disableTelemetry: true })
// React / Vue / Svelte / Solid
<Shader disableTelemetry> ... </Shader>
6

Ensine o seu agente de código

A skill oficial ensina ao Claude Code (ou outro agente) os componentes, a regra das camadas e a CLI. A busca de presets por descrição é grátis e não pede login.

npx skills add shader-effects-inc/shaders   # instala a skill no agente
npx shaders search "liquid chrome hero background" --json   # busca presets
npx shaders preview <nome>   # abre o preset rodando no shaders.com
7

Conecte ao editor visual (opcional, com conta)

Liga o seu projeto a uma conta do shaders.com: o que você desenha no editor vira arquivo de componente no código e fica sincronizado.

npx shaders connect   # liga o projeto à sua conta
npx shaders install   # escolhe efeitos do projeto e grava os arquivos
npx shaders update    # traz o que você mudou no editor
npx shaders@latest install-mcp   # MCP para Claude Code, Cursor, Codex...
8

Crie um efeito seu

Um componente novo é um objeto com nome, props e o que desenhar em cada pixel (na linguagem WGSL). Depois você usa com <CustomShader>.

import { defineShader, wgsl, transformColor, transformPosition } from 'shaders/std'

export const Halo = defineShader({
  name: 'Halo',
  props: {
    color: { default: '#E2A23B', transform: transformColor },
    center: { default: { x: 0.5, y: 0.5 }, transform: transformPosition },
    radius: { default: 0.6 },
  },
  paint: wgsl`
    let d = length((uv - center) * vec2f(aspect, 1.0)) / radius;
    return vec4f(color.rgb, 1.0 - smoothstep(0.8, 1.0, d));
  `,
})
No INEMA

Onde isso encaixa nos nossos projetos

A biblioteca brilha em página de site. Em vídeo e em curso, vale ir com calma.

✅ Bom encaixe

  • Portal (Next.js / React): fundo animado na hero e nos banners, direto com shaders/react.
  • Guias de projeto: um fundo discreto na hero via CDN, mantendo a página num arquivo só.
  • Sites com movimento (site-movimento, filmarca, Motion Lab): efeitos de vidro, luz e cursor.
  • Efeito da marca: um brilho âmbar próprio com defineShader, reaproveitado em tudo.

⚠️ Testar antes

  • Render de vídeo (HyperFrames): o navegador sem tela que gera o MP4 pode não ter WebGPU, e render de GPU no servidor já se mostrou mais lento que o medido.
  • Cursos para iniciantes: efeito pesado atrapalha a leitura e esquenta notebook fraco. Se usar, só na abertura.
  • Celular: medir CPU/GPU e bateria antes de pôr em página longa.
Cuidados

Antes de pôr no ar

Quatro pontos que conferimos no código e na documentação do projeto.

Suporte
Nem todo navegador tem WebGPUSempre deixe um fundo estático no lugar (passo 4). Sem isso, a área fica vazia.
Privacidade
Telemetria ligada por padrãoCerca de 5% das visitas mandam dados de desempenho para o shaders.com. Use disableTelemetry (passo 5).
Peso
O bundle completo tem cerca de 2,5 MBCarregue só quando a seção aparecer na tela, ou use o pacote npm com o seu bundler, que leva só o que você importa.
Conta
Editor, CLI conectada e MCP falam com o shaders.comO pacote em si roda local. Os presets prontos e as seções de site são do plano Pro.