Como ele é
Lembra uma foto 3D antiga vista sem os óculos de lentes coloridas. Com o cursor parado no meio da superfície, o conteúdo aparece normal. Ao levar o mouse para uma borda, o canal vermelho desliza na direção do ponteiro e o azul no sentido oposto, abrindo franjas coloridas nos contornos do texto e das formas, e a separação cresce quanto mais longe do centro ele está. O movimento segue o mouse com um leve atraso suave. Quando o cursor sai, as cores voltam a se encaixar aos poucos. A força máxima da separação é ajustável.
Você pode estar procurando isto se pediu algo assim
- efeito de cores separadas quando passo o mouse no título
- texto com borda vermelha e azul, tipo glitch de TV
- aquele efeito de imagem 3D sem óculos no site
- deixar o hero com cara de falha digital que reage ao cursor
- efeito de aberração cromática no HTML
- visual de VHS ou de tela com defeito controlado pelo mouse
Também chamado de
- aberração cromática
- chromatic aberration
- RGB split
- RGB shift
- efeito glitch
- HTML em canvas
- color channel split
Quando usar
- Heros experimentais de estúdios, agências e marcas de moda
- Protótipos de sites de música, games ou cultura digital
- Demos de conceito em apresentações de design ou de tecnologia
Quando evitar
- Produção de cliente: depende de API experimental do navegador, como o próprio prompt alerta
- Textos que precisam ser lidos com o mouse por perto, porque as franjas cansam a vista
Como pedir para a sua IA
Crie um protótipo de hero com aberração cromática em WebGL2 sobre o HTML ao vivo: o vermelho e o azul se separam conforme o cursor se afasta do centro, com pausa fora da tela, versão estática para movimento reduzido e HTML normal sem suporte.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Anáglifo
Anáglifo funciona no celular?
Funciona de forma limitada. Anáglifo usa eventos de ponteiro, então tocar e segurar a superfície separa as cores na direção do dedo, e soltar faz tudo se encaixar de novo. Sem um cursor passeando, porém, o efeito aparece menos. O componente precisa de WebGL2, e o prompt do THM Componentes pede teste em mobile.
Posso usar Anáglifo em produção?
Não é recomendado. Anáglifo depende de uma API experimental do navegador para desenhar HTML num canvas, com uma captura do conteúdo como alternativa automática. O prompt do THM Componentes orienta usar só em protótipo, nunca em produção de cliente, e o efeito também precisa do componente base Crisol no projeto.
Anáglifo respeita quem prefere menos movimento?
Em parte, já no código. O renderizador compartilhado de Anáglifo pausa o laço de animação quando o sistema pede menos movimento e quando sai da tela, mas um quadro novo ainda é desenhado quando o ponteiro se mexe. O prompt do THM Componentes pede à IA uma versão estática completa para esse caso.
