Tinta na Água Ultra

Sobre este efeito

Um fundo de seção feito de água clara onde caem gotas de tinta. Cada gota entra com velocidade, afunda pelo próprio peso, abre em cogumelo e solta fios que se enrolam em redemoinhos, como nos vídeos de tinta na água. As tintas se misturam como pigmento de verdade: onde duas se cruzam, a cor escurece e mistura, onde se encostam se fundem aos poucos numa faixa com a cor do meio, como aquarela molhada, e onde a tinta está rala fica só uma aguada. O clique pinga uma gota (menos em link e botão, que continuam funcionando), o mouse mexe a água de leve sem sujar, e sozinha uma gota cai de tempos em tempos, sempre num lugar livre, longe do título e do texto. A água volta a ficar limpa devagar. É uma simulação de fluido de verdade, com velocidade, pressão, redemoinho e o peso da tinta, feita na placa de vídeo. Sem WebGL, ficam manchas de tinta paradas feitas só com CSS. Com a preferência de menos movimento, a água aparece parada, já com tinta. As três tintas, a cor da água, tamanho da gota, quanto afunda, quanto enrola, quanto o mouse mexe, de quanto em quanto cai uma gota e em quanto tempo a água clareia ajustáveis.

Ficha

Categoria

Fundo

Onde combina

topo (hero), fundo, chamada pra ação

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

9,7 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 5% do processador de um celular intermediário enquanto anima.

Placa de vídeo

Desenha com a placa de vídeo; em celular muito simples a fluidez depende dela.

Na loja desde

25/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-tinta-na-agua.

Assuntos

• fundo
• tinta
• água
• fluido
• aquarela
• webgl
• simulação
• clique
• mouse
• pigmento