Gotitas De Agua Animadas

Como criar gotitas de agua animadas para seus projetos

Acabei de sair de uma reunião de review e meu cliente pediu animações de gotículas caindo em um fundo branco para a interface de um app de clima. Eu nunca uso bibliotecas prontas para isso porque o controle é sempre ruim. Vou explicar como fiz com CSS puro e um toque de JavaScript, sem gastar dois dias inteiros como na última vez que tentei uma solução genérica. A primeira coisa que todo mundo ignora é a física. Gotas não se movem linearmente — elas aceleram por gravidade e mudam de forma levemente antes de romper. Quando eu usei keyframes simples em 2023, o resultado parecia plástico subindo ao invés de água caindo. A correção foi adicionar uma curva de velocidade com cubic-bezier(0.25, 0.46, 0.45, 0.94) no easing, mais uma variação aleatória de tamanho e tempo entre cada gotícula. O truque que eu uso agora dura cerca de 40 linhas de código e roda a 60fps em mobile. Um componente SVG com filtros de blur dinâmicos dá a impressão de profundidade, mas custa processamento extra em telas antigas. Se seu usuário está num Samsung Galaxy A10 de 2019, desliga a animação automaticamente detectando prefers-reduced-motion ou limitando a dez gotas no screen.

Eu pessoalmente perdi três horas corrigindo gotas que atravessavam o container porque o overflow estava definido como hidden em vez de calcular a trajetória até fora da viewport. A solução foi usar transform: translateY(-20px) como ponto de partida e definir o final em translateY(105%) com duração entre 800ms e 1800ms, variando aleatoriamente no JavaScript com Math.random().

A técnica que funciona na prática

Eu comecei criando cada gota como um elemento span com border-radius 50% e um gradiente radial simulando reflexo de luz no topo. O efeito de transparência varia de 30% a 70% dependendo da posição Y, porque gotas reais têm refração interna. Usei background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(circle at 70% 80%, rgba(100,150,255,0.4), transparent) para simular o brilho e o volume ao mesmo tempo. O timing é o que separa algo profissional de um wallpaper de screensaver barato. Gotas maiores caem mais rápido (lei de Stokes para esferas pequenas em ar) mas também balouçam lateralmente por turbulência do ar. Minha experiência me disse para adicionar uma fase de oscilação senoidal com amplitude de 3px e frequência de 2Hz, usando transform: translateX(calc(sin(var(--time) * 6.28) * 3px)) via variável CSS atualizada no requestAnimationFrame. Uma armadilha comum é animar apenas a propriedade top, o que causa repaints constantes e travamento em dispositivos de médio porte. Eu mudei para transform no eixo Y, que é gpu-accelerated na maioria dos browsers modernos, e a performance subiu de 18fps para 58fps no meu teste com cinquenta gotas simultâneas. O tradeoff é que transforms criam um novo contexto de composição, então elementos abaixo podem ter z-index inconsistente se você usar position absolute sem cuidado.

Para otimização extrema, eu recomendo usar canvas 2D em vez de DOM nodes quando o número de gotas ultrapassa cem. A diferença é gritante: canvas rende a cena inteira em um único draw call, enquanto DOM precisa compilar cada elemento individualmente. A desvantagem do canvas é que não há acessibilidade nativa e interagir com gotas específicas (clique, hover) exige recalcular coordenadas manualmente com ctx.isPointInPath().

Download e recursos úteis

Eu disponibilizei um repositório GitHub com o código completo em CSS, HTML e JavaScript vanilla, sem dependências de framework. O projeto usa uma estrutura de micro-task em queue para evitar jank de layout, e inclui um preset de configurações ajustáveis via data attributes. Para quem quer integrar em React, há uma versão com hook personalizado useWaterDrops() que gerencia o ciclo de vida dos elements e limpia automatically no unmount, economizando cerca de 200kb de bundle se você não usar treeshaking corretamente. A documentação explica como ajustar densidade (gotas por segundo), tamanho médio (4px a 12px no mobile, 6px a 18px no desktop), e cor base (default é #4A90D9 com opacidade variável). O preset de chuva torrencial usa 120 gotas com duração média de 600ms, enquanto o orvalho matinal mantém apenas quinze gotas com queda lenta de 3s. Eu incluí também um modo low-power que desliga as gotas menores automaticamente quando a bateria está abaixo de 15%, baseado no Battery Status API se disponível, ou fallback para localStorage com timestamp da última visita. Se você precisa de algo mais avançado, como gotas escorrendo em superfícies inclinadas ou efeito de condensação em vidro, o código base suporta variação de ângulo via variável CSS --surface-tilt, mas o cálculo de física precisa ser recalibrado. Em meus testes, ângulos acima de 45 graus causam acumulação de gotas no canto inferior em vez de fluxo contínuo, exigindo uma lógica de coalescência manual.

O projeto está licenciado sob MIT, então pode usar em produção comercial sem preocupação. A licença não cobre o uso de assets gráficos de terceiros incluídos nos exemplos, que mantêm suas próprias restrições. Para suporte técnico, abri issues no GitHub com o label bug, mas responses demoram cerca de 48h úteis porque mantenho isso como projeto paralelo sem compromisso de SLA.