# Água-viva

Uma bolha em gradiente que muda de contorno devagar, como se respirasse, e se estica na direção do mouse.

> Água-viva é um componente exclusivo do THM Componentes: uma forma orgânica desenhada em SVG que muda de contorno devagar, como se respirasse, e se estica na direção do cursor. Usa gradiente de duas cores, brilho e sombra suave, sem WebGL e sem dependências, e serve como elemento de marca no hero, ilustração de seção ou fundo de avatar.

- Categoria: Interação e física
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript
- Interação: Mouse, Toque
- URL: https://vibecode.thmtecnologia.com/componentes/agua-viva/

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

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

## Componentes relacionados

- [Orvalho](https://vibecode.thmtecnologia.com/componentes/orvalho/): Gotas brilhantes de cor índigo que se juntam e se separam como líquido, e uma delas segue o cursor.
- [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.
- [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.
- [Enguia](https://vibecode.thmtecnologia.com/componentes/enguia/): Uma fita colorida, grossa na cabeça e fina na ponta, que persegue o mouse como uma serpente.
- [Lusco-fusco](https://vibecode.thmtecnologia.com/componentes/lusco-fusco/): Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme.

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