# Garoa A foto fica debaixo de uma lâmina d'água que ondula com o mouse, com os cliques e com gotas de chuva. > Garoa é um componente exclusivo do THM Componentes que simula uma superfície de água sobre uma foto: o cursor deixa um rastro de ondulações, cada clique joga uma gota maior e gotas de chuva caem sozinhas. As ondas refratam a imagem e acendem reflexos. Usa WebGL2 e serve para heros de turismo, spa e clínica. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/garoa/ ## 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 ```text 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 Garoa ### Garoa funciona no celular? Garoa 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. ### Garoa respeita quem prefere menos movimento? Sim. Com a redução de movimento ativada no sistema, Garoa 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 em Garoa? Dá. Garoa 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. ## Componentes relacionados - [Nanquim](https://vibecode.thmtecnologia.com/componentes/nanquim/): Tinta colorida que escorre e gira na tela atrás do conteúdo, empurrada pelo movimento do mouse. - [Tarrafa](https://vibecode.thmtecnologia.com/componentes/tarrafa/): Reflexos de luz dançando como no fundo de uma piscina ao sol, com bordas levemente coloridas. - [Madrepérola](https://vibecode.thmtecnologia.com/componentes/madreperola/): Superfície líquida em rosa, lilás e verde-água que escorre e se dobra sem parar, como um holograma. - [Miragem](https://vibecode.thmtecnologia.com/componentes/miragem/): Uma placa de vidro arredondada desliza sobre a foto e curva a imagem nas bordas, como uma lente de verdade. - [Gongo](https://vibecode.thmtecnologia.com/componentes/gongo/): Anéis concêntricos que pulsam de dentro para fora atrás de um logo, ícone ou botão, como ondas num lago. --- 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.