# Orvalho Gotas brilhantes de cor índigo que se juntam e se separam como líquido, e uma delas segue o cursor. > Orvalho é um componente exclusivo do THM Componentes que desenha em WebGL gotas líquidas que se movem e se fundem como as bolhas de uma lâmpada de lava, com volume, brilho e sombra suave. Uma gota extra segue o cursor e se mistura às outras. Serve para heros orgânicos de saúde, bem-estar e marcas com tom lúdico. - Categoria: Fundos e atmosferas - 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 - URL: https://vibecode.thmtecnologia.com/componentes/orvalho/ ## Como ele é Lembra as bolhas de uma lâmpada de lava vistas de frente. Sobre um fundo quase branco, sete gotas índigo passeiam devagar; quando se aproximam, esticam uma ponte entre si e viram uma única forma, depois se separam de novo. Cada gota tem volume, com luz vinda do alto à esquerda, um ponto de brilho branco e uma borda mais clara, além de uma sombra discreta no fundo. Ao passar o mouse, uma gota a mais aparece sob o cursor, acompanha o ponteiro com suavidade e se funde às outras. O conteúdo fica por cima. ## Você pode estar procurando isto se pediu algo assim - “bolhas que se juntam e se separam como lâmpada de lava” - “fundo com gotas líquidas que seguem o mouse” - “efeito de líquido grudando, tipo gosma colorida, para o topo do site” - “fundo orgânico e lúdico para clínica ou marca de bem-estar” - “gotas brilhantes se fundindo atrás do título” - “algo fofo e moderno para a página de um app de saúde” - “bolinhas que se misturam quando encostam umas nas outras” ## Também chamado de gotas líquidas animadas, gotas que se fundem, lava lamp blobs, lâmpada de lava, blob animado, efeito gooey, liquid blobs ## Quando usar - Hero de clínica, saúde, bem-estar ou nutrição com tom acolhedor - Marca lúdica e sofisticada, como cosméticos, bebidas ou produtos infantis - Seção de destaque com título curto e muito respiro - Telas de boas-vindas ou de login que pedem leveza ## Quando evitar - Marcas sérias e institucionais, em que o tom brincalhão destoa - Áreas com muito texto, porque as gotas se movem por todo o espaço ## Como pedir para a sua IA ```text Crie um fundo de metaballs em WebGL para o hero: gotas líquidas na cor da minha marca que se fundem com volume e brilho, uma gota extra seguindo o cursor, pausa fora da tela, imagem parada para movimento reduzido e fallback estático no Nuxt. ``` 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 Orvalho ### Orvalho pesa no celular? É um efeito Médio no THM Componentes. Orvalho calcula as gotas num único shader, limita a densidade de pixels a 1,75 e pausa quando sai da tela. Se o celular sofrer, reduza a quantidade de gotas pela prop count, que vai de 1 a 12. A gota do cursor depende de mouse; no toque, as demais seguem se movendo. ### Dá para trocar a cor das gotas de Orvalho? Sim. Orvalho tem uma cor para as gotas e outra para o fundo, e o prompt do THM Componentes orienta a IA a usar os tokens do seu projeto. Também dá para ajustar o tamanho, a velocidade e a intensidade do brilho, ou desligar a gota do cursor com a prop followMouse. ### Orvalho respeita quem prefere menos movimento? Sim. Orvalho confere a preferência de movimento reduzido a cada quadro: quando ela está ativa, as gotas ficam paradas numa posição fixa. A gota do cursor continua acompanhando o ponteiro, já que esse movimento parte da própria pessoa. Fora da tela, o efeito pausa. ## Componentes relacionados - [Azougue](https://vibecode.thmtecnologia.com/componentes/azougue/): Uma gota de metal espelhado que pulsa devagar, muda de forma e se estica em direção ao cursor. - [Água-viva](https://vibecode.thmtecnologia.com/componentes/agua-viva/): Uma bolha em gradiente que muda de contorno devagar, como se respirasse, e se estica na direção do mouse. - [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. - [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o mouse. - [Parafina](https://vibecode.thmtecnologia.com/componentes/parafina/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas. --- 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.