Tela de Água Ultra

Sobre este efeito

A página inteira fica embaixo de uma camada de água. Passando o mouse em qualquer lugar, fica uma esteira de ondas, mais forte quanto mais rápido o cursor anda; o clique joga uma gota e sai um trem de anéis. As ondas se espalham, se cruzam e somem aos poucos, entortando o que está embaixo (texto, fotos, botões) com um fio de arco-íris na borda e brilhando na luz. A camada não pega clique nem rolagem: o site continua funcionando igual. Por baixo roda uma simulação de ondas de verdade, a mesma do Espelho d'Água, cobrindo a tela toda. Instalar é pôr um elemento vazio no fim da página. Com a água parada, a camada some e o custo é zero. No Chrome, Edge e parentes a água entorta o site; no Safari e no Firefox fica a luz nas cristas e a sombra nos vales. Com a preferência de menos movimento, a água não aparece. Refração, brilho, arco-íris, tempo pra onda sumir, força da esteira e da gota do clique ajustáveis. WebGL e SVG, sem biblioteca.

Ficha

Categoria

Cursor

Onde combina

topo (hero), fundo, utilitário

Alcance

Página inteira: depende da rolagem ou do cursor da página toda.

Plano

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

Peso

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

No celular

Leve: usa 11% 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-tela-de-agua.

Assuntos

• cursor
• mouse
• clique
• água
• ondas
• página inteira
• refração
• reflexo
• toque
• webgl