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
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 Distort Hover
O Distort Hover funciona no celular?
Em telas de toque não existe hover: o Distort Hover 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 do Distort Hover?
Dá. O Distort Hover 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.
O Distort Hover respeita quem prefere menos movimento?
Sim. Com a preferência de reduzir movimento ativada no sistema, o Distort Hover 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.
