Pontos que Abrem Caminho Plus

Sobre este efeito

Seção coberta por uma grade densa de pontos coloridos. Passando o mouse, os pontos se afastam para os lados e deixam um caminho limpo por onde o cursor passou; as paredes do caminho ficam um instante no lugar e depois cada ponto volta sozinho, numa mola, até o caminho se fechar. Com o mouse parado abre-se um círculo em volta dele, sem tremer. No celular, arrastar o dedo na horizontal abre o caminho, e na vertical a página rola normalmente. O título, o texto e os botões ficam numa clareira que nenhum ponto invade, então o conteúdo continua legível o tempo todo. Quando todos os pontos voltaram ao lugar o efeito para de desenhar, e fora da tela ou com a aba escondida também não desenha; a volta leva o mesmo tempo em telas de 60 e de 120 Hz. Na primeira vez que a seção aparece, os pontos surgem em onda a partir do meio. Com a preferência de menos movimento, a grade aparece inteira e parada. Espaço entre os pontos, tamanho, alcance e força do cursor, quanto tempo o caminho fica aberto, tempo e balanço da volta, folga da clareira, entrada e até seis cores ajustáveis. Sem biblioteca; sem JavaScript fica a grade parada em CSS.

Ficha

Categoria

Cursor

Onde combina

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

Alcance

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

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

11 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 15% 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-pontos-que-abrem-caminho.

Assuntos

• cursor
• mouse
• pontos
• grade
• caminho
• partículas
• colorido
• fundo
• hero
• toque
• canvas