Vidro Embaçado Ultra

Sobre este efeito

Uma foto atrás de um vidro embaçado, com névoa, grão e gotinhas de água. Passe o mouse e o caminho por onde ele passa fica limpo, com a borda macia, como a mão passando no vidro de um banheiro depois do banho; um instante depois o embaçado volta, em manchas, até cobrir tudo de novo. Cada gota é uma lentezinha que mostra a cena de cabeça pra baixo. No celular, arrastar o dedo de lado limpa o vidro e arrastar pra cima ou pra baixo rola a página; no teclado, um botão aparece com o foco e passa a mão no vidro sozinho. O vidro é desenhado uma vez e cada quadro só recorta o caminho limpo; com tudo embaçado, fora da tela ou com a aba escondida, nada é desenhado. Com a preferência de menos movimento, a foto aparece limpa no meio e o vidro embaça só as bordas, parado. Largura do caminho, tempo limpo, tempo pro embaçado voltar, desfoque, névoa e a cor dela, gotinhas e grão ajustáveis. Sem biblioteca.

Ficha

Categoria

Hover

Onde combina

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

Alcance

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

Plano

Exclusivo do Ultra (R$ 39,90/mês) até 25/10/2026; depois entra no Plus.

Peso

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

No celular

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

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

Assuntos

• hover
• mouse
• foto
• imagem
• vidro
• embaçado
• névoa
• revelar
• toque
• canvas