Mancha que Revela Ultra

Sobre este efeito

Uma bolinha acompanha o mouse e, por onde passa, deixa uma mancha mole que abre a página e mostra outra camada por baixo: uma foto, outra cor, outro texto. Quanto mais rápido o gesto, mais grossa a mancha; ela incha devagar, fica um tempo e some sozinha, com as partes vizinhas se fundindo como gosma. O rastro é calculado por tempo, então fica igual em qualquer tela. O contorno é aplicado como recorte, sem desfoque na tela inteira; parado, não roda nada; a bolinha nasce onde o mouse entra; a camada de baixo fica fora do leitor de tela; o toque abre uma mancha; a preferência de menos movimento troca por um círculo fixo embaixo do mouse. Grossura, duração, atraso, tamanho e cor da bolinha ajustáveis. Sem biblioteca.

Ficha

Categoria

Cursor

Onde combina

topo (hero), fundo

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

6,0 KB de código comprimido. Sem biblioteca externa.

No celular

Moderado: usa 29% do processador de um celular intermediário enquanto anima.

Na loja desde

14/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-mancha-que-revela.

Assuntos

• cursor
• mouse
• revelar
• mascara
• gosma
• metaball
• mancha
• rastro
• hero
• js