Fumaça que Revela Ultra

Sobre este efeito

Um cartão com foto que troca de imagem com fumaça. Quando o mouse entra, a fumaça nasce do ponto por onde ele entrou e se espalha pela foto com a borda irregular, com uma faixa de fumaça animada na frente que avança e a imagem de trás ondulando de leve perto da borda. Atrás aparece a segunda imagem, a sua ou, se você não tiver, a mesma foto sem cor, escurecida e desfocada, gerada sozinha. O título entra desfocado, esticado e inclinado, e assenta. Quando o mouse sai, a fumaça recua na direção da saída. No teclado, o foco revela a partir do meio; no celular, o toque revela e a foto volta sozinha. Sem WebGL, ou com imagem de outro site sem permissão, a troca vira um esmaecer. Com a preferência de menos movimento, também. Cor e quantidade de fumaça, tempo pra cobrir e pra recuar e brilho da imagem gerada ajustáveis. WebGL puro, sem biblioteca.

Ficha

Categoria

Hover

Onde combina

recursos, prova social

Alcance

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

Plano

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

Na loja desde

03/11/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-fumaca-que-revela.

Assuntos

• hover
• mouse
• foto
• imagem
• fumaça
• névoa
• revelar
• webgl
• shader
• cartão
• portfólio
• projetos