# Anáglifo Ao mover o mouse sobre a página, o vermelho e o azul se descolam do conteúdo, como uma imagem 3D vista sem os óculos. > Anáglifo é um componente experimental do THM Componentes que aplica aberração cromática a um bloco de HTML real: conforme o cursor se afasta do centro, o vermelho e o azul se deslocam em sentidos opostos e criam franjas coloridas. No centro, a imagem fica limpa. Serve para heros experimentais com visual de glitch. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Experimental: usa uma API de navegador ainda em teste, com alternativa automática quando ela não existe - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/anaglifo/ ## 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 ```text 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. ## Componentes relacionados - [Crisol](https://vibecode.thmtecnologia.com/componentes/crisol/): Seu HTML de verdade passa por um efeito gráfico da placa de vídeo, como ondas de água, e segue clicável. - [Chuvisco](https://vibecode.thmtecnologia.com/componentes/chuvisco/): A imagem treme, se parte em faixas e separa as cores como um sinal de TV com defeito. - [Gralha](https://vibecode.thmtecnologia.com/componentes/gralha/): Faixas do título aparecem deslocadas para os lados com rastros vermelho e ciano, como uma tela com defeito. - [Remanso](https://vibecode.thmtecnologia.com/componentes/remanso/): O conteúdo da página parece estar sob uma lâmina d'água e solta ondas por onde o mouse passa. - [Ponto-cruz](https://vibecode.thmtecnologia.com/componentes/ponto-cruz/): O conteúdo real da página é redesenhado ao vivo como arte ASCII, com caracteres que imitam luz e sombra. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.