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
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.
