Como ele é
É como olhar uma foto no fundo de uma piscina rasa. O cursor passa e deixa um rastro de pequenas ondas que se espalham em anéis, se cruzam e vão perdendo força; um clique faz uma ondulação bem maior, como uma pedra caindo. Gotas aleatórias pingam em intervalos curtos, como chuva fina, e mantêm a superfície viva. Onde a água se curva, a imagem por baixo se desloca, e pontos de brilho aparecem nas cristas, como sol refletido. O conteúdo colocado dentro do componente fica por cima, sem distorção.
Você pode estar procurando isto se pediu algo assim
- foto com efeito de água que ondula quando passo o mouse
- fundo de piscina que faz ondas com o cursor
- imagem que treme como água quando clico
- topo do site do spa com efeito de água de verdade
- efeito de gota caindo na água em cima da foto
- hero de hotel na praia com ondinhas interativas
Também chamado de
- water ripple
- efeito água
- ondulação na água
- ripple effect
- water simulation
- simulação de água
- WebGL water
Quando usar
- Hero de turismo, resort, pousada ou parque aquático
- Site de spa, clínica de estética ou marca de bem-estar ligada à água
- Abertura de campanha de bebida, cosmético ou produto com tema aquático
- Seção curta com uma foto forte e pouco texto por cima
Quando evitar
- Páginas que já têm outro efeito WebGL pesado; o prompt pede no máximo um por página
- Navegadores sem WebGL2, que ficam sem imagem se não houver uma reserva estática
- Áreas de leitura longa, em que a chuva contínua distrai
Como pedir para a sua IA
Crie um efeito de ondulação de água em WebGL2 sobre a foto do hero: o cursor deixa um rastro de ondas, cliques fazem ondas maiores e a imagem se refrata com brilho nas cristas. Quero chuva desligada e água parada para movimento reduzido, pausa fora da tela e imagem de reserva sem WebGL2.
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 Water Ripple
O Water Ripple funciona no celular?
O Water Ripple funciona em aparelhos com WebGL2. No celular, cada toque na imagem cria uma ondulação grande, e as gotas de chuva automáticas mantêm a água em movimento sem nenhum gesto. Por ser um efeito Pesado no THM Componentes, o prompt orienta a IA a carregar sob demanda, usar no máximo um efeito WebGL pesado por página e prever um fallback estático.
O Water Ripple respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativada no sistema, o Water Ripple desliga a chuva e para de propagar as ondas. O cursor e os toques ainda deixam marcas que distorcem a imagem, mas paradas, sem se espalhar. Fora da tela, o componente deixa de desenhar, o que poupa a placa de vídeo.
Dá para controlar a força e a duração das ondas no Water Ripple?
Dá. O Water Ripple tem props para o raio de cada gota, a altura das ondas, o amortecimento, que define quanto tempo elas duram, e a força da distorção da imagem. A chuva automática pode ser desligada com a prop rain em falso, deixando as ondas só para o cursor e os cliques.
