Como ele é
Parece uma gota de gelatina viva vista de frente. A forma, de 420 pixels por padrão, tem um contorno arredondado e irregular que ondula aos poucos, sem nunca formar pontas. O preenchimento é um degradê diagonal do índigo ao ciano, com um brilho branco no canto superior esquerdo e uma sombra desfocada, levemente deslocada para baixo, que dá volume. Quando o mouse se aproxima, o lado voltado para ele incha e se estica em sua direção; quando o ponteiro sai, a bolha relaxa e volta a só respirar.
Você pode estar procurando isto se pediu algo assim
- bolha colorida que fica mexendo devagar no topo do site
- forma orgânica que estica na direção do mouse
- blob animado em gradiente para colocar atrás da foto de perfil
- elemento abstrato que pareça vivo na página inicial
- mancha de cor que muda de forma sozinha, meio gelatina
- ilustração leve que reage ao cursor sem usar 3D
Também chamado de
- bolha que respira
- blob animado
- forma orgânica
- SVG blob
- bolha animada
- organic shape
- liquid shape
Quando usar
- Elemento de marca ao lado do título no hero
- Fundo de avatar ou de foto de perfil numa página pessoal
- Ilustração abstrata entre as seções de uma landing page
- Páginas de bem-estar, design ou produtos criativos que pedem formas suaves
Quando evitar
- Celular com a forma ocupando a largura toda: o toque sobre ela não rola a página
- Interfaces densas e corporativas, em que uma forma viva parece fora do tom
Como pedir para a sua IA
Crie no hero uma forma orgânica em SVG que respira devagar e se estica em direção ao cursor, com gradiente nas cores da minha marca, brilho e sombra suave, animação pausada fora da tela e forma parada para quem prefere menos movimento.
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 Água-viva
Água-viva deixa o site pesado?
Pouco. Água-viva é Leve no THM Componentes: a cada quadro, recalcula um único caminho SVG de 10 pontos, sem WebGL e sem dependências. A animação não para sozinha quando a forma sai da tela, então, em páginas longas, peça à IA para pausar a forma fora da área visível.
Como troco as cores e o formato de Água-viva?
As duas cores do gradiente de Água-viva vão na prop colors, e o prompt orienta a IA a usar os tokens de cor do projeto. O contorno é ajustado por points, complexity e amplitude, a velocidade da respiração por speed, a atração pelo cursor por magnet e o tamanho em pixels por size.
Água-viva respeita quem prefere menos movimento?
Sim. Com movimento reduzido ativo, Água-viva para de respirar e mantém um contorno fixo. A forma ainda se estica quando o mouse se aproxima, porque esse movimento só acontece por ação da pessoa e acompanha o ponteiro com suavidade.
