Espelho d'Água Ultra

Sobre este efeito

A foto vira uma superfície de água. O cursor arrastando deixa uma esteira de ondas, mais forte quanto mais rápido ele anda; o clique (ou o toque) joga uma pedra e sai um trem de anéis. Por baixo roda uma simulação de ondas de verdade: elas se espalham, se cruzam, batem na borda da foto e voltam, e somem aos poucos. A água entorta a foto, separa as cores num fio de arco-íris na borda das ondas e brilha nas cristas. Na primeira vez que a foto aparece na tela, cai uma gota no meio pra mostrar que é água; no teclado, um botão aparece com o foco e joga uma pedra. A onda tem a mesma velocidade em telas de 60 e 120 Hz, e com a água parada, fora da tela ou com a aba escondida, nada é calculado nem desenhado. Com a preferência de menos movimento, fica a foto parada. Refração, brilho, arco-íris, tempo pra onda sumir, força da esteira e da pedra, chuva sozinha e a gota de convite ajustáveis. WebGL sem biblioteca; sem WebGL, fica a foto.

Ficha

Categoria

Hover

Onde combina

topo (hero), recursos, 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

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

No celular

Leve: usa 9% 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-espelho-dagua.

Assuntos

• hover
• mouse
• clique
• foto
• imagem
• água
• ondas
• reflexo
• toque
• webgl