Efeitos de Shader com IA: Como Eu Criei Magia com 3JS em 4 Minutos

Efeitos de Shader com IA: Como Eu Criei Magia com 3JS em 4 Minutos

Seis horas. Foi o tempo que eu passei encarando codigo GLSL na primeira vez que tentei adicionar um efeito de distorcao no hover na pagina de galeria de um cliente.

Nao foram seis horas construindo a pagina inteira. Seis horas em uma animacao de hover que durava exatamente 0,4 segundos quando o mouse do usuario passava sobre uma imagem.

O vertex shader estava ok. O fragment shader funcionava isoladamente. Mas passar as variaveis uniform corretamente? Normalizar as coordenadas do mouse? Lidar com o redimensionamento do canvas em diferentes tamanhos de viewport? Eu ficava batendo em paredes que nao sabia que existiam — e cada resposta do Stack Overflow que encontrava ou tinha tres anos, ou usava uma versao completamente diferente do Three.js, ou assumia que eu ja sabia coisas que claramente nao sabia.

Entreguei a pagina sem o efeito de shader. Apenas uma transicao de opacidade basica em CSS. O cliente nem percebeu. Mas eu percebi — porque tinha passado seis horas falhando em algo que eu ja tinha visto desenvolvedores criativos juniores executarem perfeitamente em sites premiados, e a distancia entre o que eu conseguia imaginar e o que eu conseguia construir me incomodava pessoalmente.

Isso foi ha mais ou menos 14 meses.

Na semana passada, apliquei cinco efeitos diferentes de shader no hover — wobble, wave, aberracao cromatica, distorcao e um RGB split — em uma pagina de galeria completa e entreguei tudo em menos de 45 minutos. Um unico efeito do zero ate a pre-visualizacao funcionando? Quatro minutos.

A diferenca nao foi que eu finalmente dominei GLSL. Eu ainda nao consigo escrever um displacement shader do zero sem abrir a documentacao. A diferenca e que eu criei uma skill no Claude Code que faz isso por mim — e, mais importante, faz de forma correta, com limpeza adequada, tratamento de viewport e cobertura de casos de borda do mundo real.

Essa lacuna que acabei de criar — "como exatamente isso funciona?" — e o que vamos fechar aqui. Mas primeiro, voce precisa entender por que o caminho de "apenas aprenda shaders de verdade" e o conselho errado para a maioria dos desenvolvedores front-end.

Por Que Shaders Continuam Fora de Alcance (E Por Que Nao E Culpa Sua)

A questao sobre shaders no desenvolvimento front-end e a seguinte: a lacuna de conhecimento nao e uma curva de aprendizado. E um paredao.

Animacao CSS? Voce aprende fazendo — quebre coisas, conserte coisas, entregue coisas. Grid e flex? Uma tarde focada desbloqueia a maior parte do que voce precisa. Ate padroes complexos de JavaScript como debouncing, scroll virtual ou gerenciamento de estado complexo — voce consegue fazer funcionar com paciencia e boa documentacao.

Shaders sao diferentes de uma forma que a maioria dos tutoriais nao admite.

GLSL (OpenGL Shading Language) e uma linguagem semelhante a C que roda diretamente na GPU, processando vertices e fragmentos em paralelo com quase zero tolerancia para aquele entendimento vago de "bom o suficiente" que funciona no JavaScript. Voce nao pode dar console.log dentro de um shader. A depuracao e adivinhacao visual — mude uma variavel, recompile, aperte os olhos para o resultado, repita. O Three.js adiciona uma camada de abstracao que as vezes torna a integracao de shaders mais dificil de entender, nao mais facil.

O caminho real de aprendizado para escrever shaders customizados de producao do zero se parece com algo assim:

1. Entender algebra linear de verdade — matrizes, produtos escalares, coordenadas homogeneas
2. Aprender como o pipeline de renderizacao do WebGL funciona no nivel da GPU
3. Dominar a sintaxe GLSL e as restricoes de programas de shader (sem loops dinamicos, sem recursao, tipagem estrita)
4. Entender o ShaderMaterial do Three.js e como uniforms, attributes e varyings fluem por ele
5. Descobrir a normalizacao de coordenadas do mouse, matematica de espaco de viewport e gerenciamento de uniform de tempo
6. Depurar resultados mudando uma variavel por vez ate que algo fique mais proximo do que voce queria

Isso nao e um fim de semana. Sao meses de estudo focado se voce esta comecando do zero. E aqui esta o que a maioria dos tutoriais nao diz diretamente: a maior parte desse conhecimento nao se transfere de forma limpa para o resto do seu trabalho. E especializacao profunda — valiosa se voce esta construindo uma agencia criativa ou faz arte generativa em tempo integral. Para todo mundo que trabalha em full stack, entregando produto e gerenciando relacionamentos com clientes, o retorno sobre esse investimento de tempo e genuinamente questionavel.

A verdadeira dor nao e que shaders sao dificeis. E que shaders sao dificeis em relacao a frequencia com que voce precisa deles.

Mas — e essa e a parte que importa — eles ficam incriveis. Um efeito de aberracao cromatica bem executado no hover de uma galeria pode ser a diferenca entre um site que parece um produto premium e um que parece um template. O impacto visual e enorme. A complexidade de implementacao tambem e enorme.

E se voce pudesse ter o impacto visual sem a complexidade?

O Que Uma Skill do Claude Code Realmente E

Antes de entrar na implementacao do shader, preciso explicar o que uma "skill" no Claude Code significa na pratica — porque nao e o que a maioria das pessoas imagina quando ouve "geracao de codigo com IA".

Quando desenvolvedores imaginam IA escrevendo codigo, eles visualizam um chatbot gerando algo que voce copia e cola no seu projeto e depois passa uma hora adaptando manualmente. Esse modelo funciona para boilerplate. Ele falha para tarefas complexas e sensibilizadas ao contexto, como integracao de shaders, onde a saida correta depende fortemente de como seu projeto esta estruturado.

Uma skill do Claude Code e diferente. Pense nela como um conjunto de instrucoes versionado e reutilizavel que:

• Tem contexto persistente — ela sabe quais estruturas de projeto espera, quais opcoes estao disponiveis e como geracoes anteriores falharam
• Le seu codebase primeiro — antes de escrever uma unica linha, uma skill bem construida varre seu projeto para entender o que existe, quais padroes estao em uso e o que precisa mudar
• Aplica mudancas cirurgicamente — ela modifica apenas o que precisa ser modificado, integrando-se com seus padroes existentes em vez de sobrescreve-los
• Aceita parametros configuraveis — tipo de shader, intensidade, estilo de animacao sao passados como opcoes estruturadas em vez de descricoes em texto

A skill de shader que eu construi — vamos chama-la de apply-shader-hover — funciona exatamente assim. Quando invocada em um projeto, ela:

• Varre o arquivo HTML que eu especifico para encontrar elementos de imagem dentro de containers tipo galeria
• Identifica se o projeto usa JavaScript vanilla, um bundler como Vite, ou um framework
• Gera a configuracao apropriada do Three.js (inicializacao do canvas, WebGL renderer, scene, camera)
• Escreve o codigo-fonte GLSL especifico para qualquer efeito que foi selecionado
• Injeta event listeners de mouse com normalizacao adequada de coordenadas
• Adiciona um ResizeObserver para manter as dimensoes do canvas corretamente
• Conecta tudo com um padrao de inicializacao que nao vaza memoria

Esse ultimo ponto importa mais do que parece. Codigo WebGL gerado por IA frequentemente falha em descartar corretamente recursos do renderer, remover event listeners ou lidar com a desmontagem de componentes. Minha skill aprendeu esses modos de falha a partir de testes iterativos no mundo real e os trata explicitamente.

Mas as opcoes de shader em si sao onde as coisas ficam interessantes. Aqui esta o que realmente distingue cada um — nao apenas visualmente, mas no nivel do codigo.

Os Quatro Efeitos de Shader: O Que Realmente Acontece Por Baixo dos Panos

Distorcao — A Deformacao Fluida

O shader de distorcao deforma a geometria da imagem ao redor da posicao do mouse, criando um efeito de bolha que faz a imagem parecer que esta se afastando do seu cursor.

O mecanismo central e uma funcao de deslocamento no fragment shader que amostra a textura em uma coordenada UV levemente deslocada — o deslocamento calculado com base na distancia da posicao normalizada do mouse. Na intensidade "media", o deslocamento maximo e de cerca de 0,08 unidades UV. Na "forte", voce esta olhando para 0,15+, que comeca a parecer quase liquido.

Uniforms principais que conduzem o efeito:

• u_mouse — posicao normalizada do mouse de 0.0 a 1.0 no espaco da tela
• u_time — tempo decorrido para animacao suave de entrada/saida no hover
• u_intensity — multiplicador escalar que a opcao da CLI mapeia (0.04 para sutil, 0.08 medio, 0.15 forte)

Este funciona lindamente em galerias de tema escuro com fotografia de alto contraste. Em layouts mais claros e corporativos, pode parecer exagerado — o parametro de estilo de animacao ajuda a ajustar, mas o efeito subjacente tem personalidade forte.

Wave — A Ondulacao Elegante

Wave e mais sutil que distorcao e funciona melhor quando voce quer que o hover pareca sofisticado em vez de dramatico. Em vez de deformar ao redor do cursor, ele cria um padrao de ondulacao irradiando para fora a partir do ponto de interacao.

O detalhe de engenharia interessante aqui e o parametro de estilo de animacao. "Snappy" usa uma curva de decaimento exponencial — o efeito atinge a intensidade total quase imediatamente e volta rapidamente, como pressionar vidro. "Languid" usa uma curva mais lenta com um leve overshoot, entao a onda continua um pouco alem do evento de disparo antes de se estabilizar, como agua. "Smooth" usa interpolacao cosseno simples entre estados.

Parecem detalhes de implementacao ate voce ve-los lado a lado. A variante snappy parece digital e precisa. A variante languid parece organica e fisica. Para um portfolio de fotografia, essa escolha molda a experiencia inteira.

Aberracao Cromatica — O Que Gera Reacoes

Este e consistentemente o efeito que faz as pessoas pararem no meio do scroll. A aberracao cromatica simula a franja de cores de uma lente que nao foca todos os comprimentos de onda no mesmo ponto focal — uma leve separacao dos canais vermelho, verde e azul, especialmente nas bordas.

No fragment shader, voce amostra a textura tres vezes:

• Canal vermelho: texture2D(u_texture, uv + offset)
• Canal verde: texture2D(u_texture, uv) — sem deslocamento, este e a ancora
• Canal azul: texture2D(u_texture, uv - offset)

A direcao do deslocamento e dinamica — ela segue o vetor de movimento do mouse, entao a aberracao "arrasta" conforme voce move pela imagem, o que parece um comportamento fisicamente preciso de lente.

Na intensidade "forte" com animacao "snappy" em uma galeria escura com fotografia de alto contraste, esse efeito e quase agressivo — no bom sentido. Um dos meus clientes recebeu uma consulta espontanea de um prospect que mencionou especificamente "os efeitos legais nas imagens" do site. Isso veio deste shader. Em um layout mais claro e conservador, as mesmas configuracoes pareceriam exageradas. O julgamento de design e seu. A implementacao e da skill.

Wobble — O Que Vive no Vertex Shader

Wobble e o mais divertido dos quatro, e tecnicamente o mais distinto — ele opera no vertex shader em vez do fragment shader. Em vez de manipular como os pixels sao coloridos, ele manipula a geometria em si.

Uma distorcao senoidal se propaga pela superficie da imagem a partir do ponto de entrada do mouse e se amortece em aproximadamente 0,8 segundos, criando uma oscilacao tipo geleia. O resultado visual e como pressionar uma imagem de borracha esticada sobre uma moldura rigida. Otimo para cards de produto, imagens de avatar, qualquer coisa onde voce queira fisicalidade em uma interface que seria plana.

Este requer a configuracao mais cuidadosa — se o canvas do Three.js nao estiver configurado com o tratamento correto de pixelRatio, o wobble parece serrilhado em displays retina. A skill lida com isso explicitamente. Se voce estiver adaptando o codigo de saida manualmente em vez de usar a skill como esta, este e o primeiro lugar para verificar quando o resultado parece errado.

Construindo a Skill: O Processo Real, Nao a Versao de Demo

Quero ser direto sobre algo: essa skill nao surgiu totalmente formada de uma unica sessao de prompts. Foram necessarias 8 a 10 rodadas iterativas para chegar ao nivel de qualidade em que eu a implantaria em um projeto de cliente sem revisar cada linha.

A primeira versao era embaracosamente ingenuidade. Eu pedi ao Claude Code para "criar uma skill que aplique efeitos de shader de hover do Three.js em imagens de galeria." O que voltou foi codigo sintaticamente correto que nao rodava — porque assumia que um module bundler estava disponivel quando o projeto alvo na verdade usava JavaScript vanilla com script tags.

A rodada 2 corrigiu a deteccao de ambiente, mas quebrava quando os elementos de imagem estavam aninhados dentro de estruturas complexas de wrapper de galeria em vez de serem filhos diretos.

A rodada 3 lidou com o aninhamento, mas perdeu imagens implementadas como background-image no CSS em vez de elementos <img> — o que uma porcao significativa das implementacoes de galeria usa por razoes de controle de aspect-ratio.

Cada falha se tornou parte da base de conhecimento da skill. Eu adicionei exemplos documentados de cada padrao: "aqui esta uma galeria que usa imagens de fundo, aqui esta o que a skill deve fazer de diferente." A skill acumulou conhecimento contextual de falhas do mundo real em vez de suposicoes teoricas.

O ponto de inflexao foi quando comecei a adicionar o que chamo de "documentacao de modos de falha" — nao apenas descrevendo o que a skill deve fazer quando tudo funciona, mas documentando explicitamente o que ela deve fazer quando as coisas dao errado. O que acontece se o Three.js nao esta disponivel na pagina? O que acontece se o seletor alvo encontra zero elementos? E se o navegador nao suporta WebGL?

Uma skill que lida com falhas graciosamente e infinitamente mais confiavel em projetos reais do que uma que so funciona em condicoes limpas de demo. Esse e um principio que vale a pena manter enquanto voce constroi as suas.

O Fluxo de Trabalho Real: Da Invocacao a Pre-Visualizacao

Aqui esta exatamente como o fluxo de trabalho atual se parece — a versao de producao, nao uma demo simplificada.

Passo 1: Invocar de dentro do projeto

Do diretorio do projeto no Claude Code:

/apply-shader-hover

A skill imediatamente faz duas perguntas:

1. Qual arquivo contem a galeria? (Eu forneco o caminho)
2. Qual efeito de shader? (distortion / wave / chromatic / wobble)

Passo 2: Configurar parametros

Apos escolher o tipo de shader, a skill apresenta as opcoes relevantes. Para aberracao cromatica:

Intensity: subtle | medium | strong
Animation style: smooth | snappy | languid
Apply to: all gallery images | specific selector

Eu seleciono "strong" + "snappy" + "all gallery images." A interacao inteira — incluindo minha digitacao — leva cerca de 20 segundos.

Passo 3: Leitura de contexto do codebase

Antes de gerar qualquer codigo, a skill le:

• O arquivo HTML alvo (estrutura de imagens, includes de JavaScript existentes)
• O CSS do projeto (contexto de dimensionamento e posicionamento de elementos)
• Qualquer uso existente do Three.js (para evitar inicializacao duplicada do renderer)

Essa passagem de contexto e o que faz a saida se integrar em vez de apenas coexistir com o projeto.

Passo 4: Geracao e injecao

A skill gera:

• Inicializacao do Three.js (renderer, scene, camera, elemento canvas com pixelRatio correto)
• Strings de codigo-fonte GLSL para vertex e fragment shaders
• Gerenciamento de uniforms e loop de atualizacao
• Event listeners de mouse com normalizacao de coordenadas no espaco do viewport
• Integracao com ResizeObserver
• Limpeza/descarte no unload da pagina

A saida vai para um novo arquivo shader-hover.js (ou equivalente), com uma unica script tag adicionada ao HTML. Nao espalhada pelos arquivos existentes.

Passo 5: Revisao

A geracao em si leva 2 a 3 minutos. Revisao e quaisquer ajustes levam mais 5 a 10. Eu verifico: direcionamento correto do seletor, z-index e posicionamento do canvas, quaisquer casos de borda especificos do projeto que a skill deixou passar. Correcoes nessa etapa sao quase sempre menores.

Esse e o fluxo de trabalho. O codigo por baixo e genuinamente complexo. A camada de interacao nao e. E essa assimetria — interface simples sobre implementacao complexa — e exatamente o que uma skill bem construida deve fornecer.

A Opiniao Honesta: O Que Isso Realmente Muda (E O Que Nao Muda)

A maioria do conteudo sobre ferramentas de IA que eu vi pula os casos de falha e mostra demos que funcionam perfeitamente uma vez, em condicoes ideais, e entao declara que o futuro chegou. Essa abordagem e inutil.

Aqui esta o que realmente mudou no meu trabalho.

O que genuinamente melhorou:

A maior mudanca nao e economia de tempo — e acesso. O efeito de aberracao cromatica que descrevi? Eu nunca teria oferecido isso a um cliente antes dessa skill existir. O custo de implementacao tornava impraticavel para a maioria dos projetos. Agora posso propor como um diferencial porque o custo de implementacao e essencialmente zero. O alcance do que posso oferecer se expandiu sem uma demanda correspondente na minha especialidade.

Concretamente: uma implementacao de shader que teria me tomado 6+ horas (se eu tentasse) agora leva menos de 45 minutos incluindo revisao. Os 4 minutos de geracao e 10 a 15 minutos de revisao deixam 25 a 30 minutos para coisas que so eu posso fazer — decidir se o efeito pertence a esse contexto, testar em tamanhos reais de dispositivo, garantir que serve a experiencia geral.

O que ainda exige julgamento real:

A skill sabe como aplicar uma aberracao cromatica forte em cada imagem de uma galeria. Ela nao sabe se uma aberracao cromatica forte deveria estar naquela galeria — se combina com a marca, se serve ao publico, se o estilo de fotografia a sustenta.

Essa decisao ainda e sua. A IA lida com a complexidade mecanica. As decisoes de design continuam sendo humanas.

Onde ainda da errado:

Estruturas HTML fora do padrao — projetos que misturam JS vanilla com padroes de modulos, ou configuracoes incomuns de carregamento de assets — as vezes confundem a fase de leitura de contexto. Esses casos ficaram mais raros com a iteracao, mas nao desapareceram.

Tambem existe uma classe de erros que vem de configuracoes ambiguas de projeto: um projeto que parece usar um bundler mas na verdade nao usa, ou um onde o Three.js e carregado condicionalmente. A skill lida com esses casos melhor do que antes, mas uma passagem rapida de revisao antes de implantar em um projeto de cliente ainda vale a pena.

A previsao que vou assumir:

Os casos de falha vao diminuir significativamente nos proximos 12 a 18 meses conforme as skills ficam melhores em ler contextos complexos de projetos. Agora a skill funciona de forma confiavel em aproximadamente 80-85% das estruturas padrao de projeto sem correcao manual. Esse numero esta caminhando para 95%+.

A opiniao impopular:

Alguns desenvolvedores ouvem esse tipo de fluxo de trabalho e pensam que representa uma perda de oficio — substituindo habilidade real por dependencia de IA. Eu ouvi esse argumento aplicado a cada abstracao na historia do desenvolvimento web. jQuery abstraindo o DOM. Webpack abstraindo o empacotamento de modulos. TypeScript abstraindo a seguranca de tipos do JavaScript.

Os desenvolvedores que construiram expertise em cima dessas abstracoes sao os que avancaram. Saber quando um efeito de aberracao cromatica pertence a um design, como configura-lo para maximo impacto, como adapta-lo para diferentes contextos — isso e expertise real que vale a pena desenvolver. O fato de voce nao precisar escrever o GLSL do zero nao torna essas decisoes menos valiosas. Torna-as mais acessiveis para pessoas que as possuem.

Construa Sua Propria Versao: A Abordagem Que Eu Recomendaria

Se voce quer uma versao dessa skill no seu proprio setup do Claude Code, aqui esta a abordagem que eu tomaria agora — nao a abordagem que eu realmente tomei, que desperdicou tempo.

Nao comece fazendo prompts do zero. Encontre a melhor implementacao existente de efeito de shader com Three.js que voce puder — algo que realmente funciona em producao, lida com casos de borda adequadamente e foi testado em dispositivos reais. Use isso como o exemplo de fundacao na base de conhecimento da sua skill.

Uma skill e tao boa quanto seus exemplos. Uma implementacao excelente e testada em producao ensina a skill mais do que cinco trechos de tutorial que cortam caminhos.

Construa incrementalmente:

• Comece com um tipo de shader aplicado a uma estrutura de projeto
• Teste em 3 a 4 projetos reais (nao demos com HTML limpo)
• Documente cada caso onde a saida precisa de correcao manual — esses se tornam seus exemplos de melhoria
• Adicione o proximo tipo de shader
• Repita

Adicione tratamento de modos de falha cedo. Diga a skill explicitamente o que fazer quando o Three.js nao esta disponivel, quando o seletor nao encontra nada, quando o WebGL nao e suportado, quando o elemento alvo esta dentro de um container com scroll. Skills que degradam graciosamente sao as que voce realmente confia.

Se voce conseguir que um tipo de shader gere corretamente e lide com falhas em tres estruturas diferentes de projeto, voce ja construiu algo mais praticamente util do que a maioria dos exemplos nesse espaco. Tudo depois disso e iteracao.

A pagina de galeria que entreguei na semana passada — aberracao cromatica rodando no hover, canais RGB se separando e voltando conforme o mouse cruza cada imagem — parecia o tipo de trabalho que eu costumava descartar como "para outra pessoa construir."

A distancia entre o que voce pode imaginar e o que voce pode construir diminui quando as ferramentas mudam. Nao porque seus limites tecnicos desaparecem. Porque a complexidade mecanica que costumava ficar entre a ideia e o resultado passa a ser tratada por algo que e realmente bom em complexidade mecanica.

Seu desafio para as proximas 48 horas: identifique um efeito visual que voce admirou em outros sites e sempre descartou como complexo demais para implementar. Construa uma primeira versao de uma skill em torno dele. Mesmo uma versao rudimentar. Teste em um projeto real e documente onde ela falha.

O efeito que voce achava que exigia seis horas e expertise especializada pode estar a quatro minutos de distancia.

Vamos Trabalhar Juntos

Procurando construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura de tecnologia? Adoraria ajudar.

• Fiverr (builds personalizados e integracoes): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (solucoes empresariais): ramlit.com
• ColorPark (design e branding): colorpark.io
• xCyberSecurity (servicos de seguranca): xcybersecurity.io