# Mergulho Ao passar o mouse, a foto se deforma como líquido e se transforma em uma segunda imagem. > Mergulho é um componente exclusivo do THM Componentes que troca uma imagem por outra quando o mouse passa por cima: um campo de ruído deforma a foto como líquido, com leve separação de cores no meio da troca, até revelar a segunda imagem. Com WebGL e sem dependências, serve para cards de portfólio e cases. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/mergulho/ ## Como ele é Imagine uma foto refletida na água que alguém agita com a mão. Quando o cursor entra na área, a imagem inicial se estica numa diagonal, ondula com um ruído orgânico e se funde na segunda imagem em pouco mais de um segundo; no meio da troca, uma franja colorida discreta aparece nos contornos. Quando o cursor sai, o caminho se desfaz ao contrário e a primeira foto volta. O mesmo acontece quando um elemento focável dentro do componente recebe foco pelo teclado. As duas imagens preenchem a área sem distorcer a proporção, e o conteúdo colocado dentro fica por cima. ## Você pode estar procurando isto se pediu algo assim - “foto que vira outra quando passo o mouse, meio derretendo” - “efeito de líquido ao trocar a imagem do card no hover” - “imagem que distorce e mostra o depois quando o mouse entra” - “card de portfólio que troca a foto com um efeito fluido” - “aquele hover de site de agência em que a imagem ondula e muda” - “mostrar antes e depois sem botão, só passando o mouse” - “deixar a galeria de projetos com cara de site premiado” ## Também chamado de displacement hover, transição por deslocamento, image distortion hover, hover com distorção líquida, WebGL image transition, troca de imagem no hover, liquid hover effect ## Quando usar - Cards de portfólio de estúdio, agência ou fotógrafo - Grade de cases em que cada projeto tem duas imagens - Antes e depois de reforma, tratamento ou edição de foto - Vitrine de produto que mostra a peça em uso ao passar o mouse ## Quando evitar - Sites acessados quase só pelo celular, onde não existe hover; ali, prefira o autoplay - Páginas com dezenas de cards, já que cada instância abre o seu próprio contexto WebGL - Imagens de outro domínio sem CORS liberado, que não carregam como textura ## Como pedir para a sua IA ```text Crie um efeito de hover com transição por deslocamento em WebGL nos cards do meu portfólio: ao passar o mouse, a foto se deforma como líquido e revela uma segunda imagem. Quero troca instantânea para quem prefere menos movimento, pausa fora da tela e uma imagem estática de reserva. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Mergulho ### Mergulho funciona no celular? Em telas de toque não existe hover: Mergulho troca a imagem enquanto o dedo fica pressionado sobre ela e volta quando a pessoa solta. Para celular, a prop autoplay alterna as duas imagens sozinha, em intervalos regulares. O efeito precisa de WebGL, e o prompt orienta a IA a prever um fallback estático no Nuxt. ### Dá para trocar as imagens e a direção de Mergulho? Dá. Mergulho recebe a imagem inicial e a revelada pelas props src1 e src2, e a força do deslocamento, o ângulo, a escala do ruído e a duração também são props. As imagens precisam vir do mesmo domínio ou com CORS liberado, como o prompt lembra, porque viram textura na placa de vídeo. ### Mergulho respeita quem prefere menos movimento? Sim. Com a preferência de reduzir movimento ativada no sistema, Mergulho faz a troca de uma vez, sem a deformação animada, e continua mostrando a segunda imagem no hover. O componente também para de desenhar quando sai da tela, o que poupa a placa de vídeo enquanto a pessoa lê outras seções. ## Componentes relacionados - [Claquete](https://vibecode.thmtecnologia.com/componentes/claquete/): Sequência de fotos que troca de imagem com ondas, pixels, redemoinho, queima, glitch ou círculo. - [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. - [Brasa](https://vibecode.thmtecnologia.com/componentes/brasa/): A foto se desfaz em poeira de baixo para cima, com uma borda laranja que brilha como papel queimando. - [Biruta](https://vibecode.thmtecnologia.com/componentes/biruta/): Card de foto que mostra um texto por cima no hover e desliza a imagem conforme o lado por onde o cursor entrou. - [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar. --- 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.