Visualize o efeito do cursor
Menor = as particulas duram mais
Copie e cole este codigo antes de </body> no seu site.
| Efeito | Visual | Ideal Para | Comportamento |
|---|---|---|---|
| Brilho | ✦ Pontos coloridos | Uso geral, landing pages SaaS | Particulas explodem radialmente do cursor com gravidade leve |
| Bolha | 🫧 Aneis expansivos | Portfolios criativos, sites infantis | Bolhas flutuam para cima com um brilho lustroso |
| Estrela | ⭐ Estrelas de 5 pontas | Sites de jogos, entretenimento | Estrelas giram enquanto se afastam do cursor |
| Coracao | ❤️ Formas de coracao | Sites de namoro, paginas de casamento, Dia dos Namorados | Coracoes giram e caem, reduzindo ao desaparecer |
| Rastro de Neon | 💫 Aneis brilhantes | Startups de tecnologia, sites em modo escuro | Aneis se expandem com sombra difusa, deixando um brilho de neon |
| Floco de Neve | ❄️ Cristais de 6 bracos | Temas de inverno/festivos, paginas sazonais | Flocos giram suavemente enquanto flutuam em direcoes aleatorias |
O codigo cria um elemento <canvas> fixado na janela de visualizacao com pointer-events: none — ou seja, renderiza particulas visuais sobre o seu conteudo sem bloquear cliques, links ou interacoes. A cada evento mousemove, gera uma quantidade configuravel de particulas na posicao do cursor com vetores de velocidade aleatorios. O loop requestAnimationFrame atualiza as posicoes das particulas (adicionando gravidade leve para efeitos de brilho/rastro), reduz a opacidade com base na velocidade de desaparecimento e remove particulas mortas. Um limite de 300 particulas previne o crescimento de memoria. O canvas se redimensiona automaticamente ao redimensionar a janela, mantendo-se sempre em tela cheia.
| Plataforma | Metodo de Instalacao | Dificuldade |
|---|---|---|
| WordPress | Aparencia → Editor de Arquivos do Tema → footer.php, ou use o plugin "Insert Headers and Footers" | Facil |
| Shopify | Loja Online → Temas → Editar Codigo → theme.liquid, colar antes de </body> | Facil |
| Wix | Configuracoes → Codigo Personalizado → Adicionar Codigo, colar na secao Body - End | Facil |
| Squarespace | Configuracoes → Avancado → Injecao de Codigo → Footer | Facil |
| Webflow | Configuracoes do Site → Codigo Personalizado → Antes da tag </body> | Facil |
| HTML Estatico | Colar diretamente antes de </body> em qualquer arquivo .html | Facil |
O efeito foi criado para desempenho: toda a renderizacao usa um unico elemento <canvas> com contexto 2D — sem sobrecarga de WebGL, sem manipulacao DOM por particula. Com as configuracoes padrao (3 particulas por quadro, limite de 300), o efeito adiciona aproximadamente 1-2% de uso de CPU em hardware moderno. Reduzir a Quantidade de Particulas para 1 e aumentar a Velocidade de Desaparecimento ao maximo produz a configuracao mais leve. O script tem aproximadamente 2KB minificado — menor que a maioria dos snippets de rastreamento analitico.
Apos colar o codigo, voce pode personaliza-lo ainda mais diretamente: altere o valor cfg.type para alternar entre efeitos sem regenerar, ajuste cfg.count para mais ou menos particulas, ou modifique o parametro cfg.spread para alterar a distancia que as particulas percorrem. O codigo e JavaScript vanilla — sem etapa de compilacao, sem necessidade de minificacao. Usuarios avancados podem estender a declaracao switch para adicionar formas personalizadas: o contexto 2D do canvas suporta arcos, curvas Bezier, linhas e sprites de imagem.
Selecione o efeito desejado (brilho, bolha, estrela, coracao, rastro de neon ou floco de neve), personalize as cores e a dinamica nos controles, depois clique em Copiar Codigo. Cole o script gerado antes da tag </body> de qualquer pagina HTML. O codigo e completamente autonomo — ele cria um elemento canvas, monitora o movimento do mouse e renderiza particulas. Nao sao necessarias dependencias externas nem links CDN.
O efeito monitora eventos mousemove, que nao sao disparados em dispositivos touch. Em moveis, a camada canvas permanece presente mas e invisivel (devido ao pointer-events: none), por isso nao interfere com toques, rolagem ou quaisquer interacoes da pagina. O efeito e puramente decorativo e se degrada corretamente — seu site funciona normalmente no movel sem o rastro do cursor.
O efeito usa requestAnimationFrame e um limite de 300 objetos de particulas, tornando-o muito leve. Cada particula e uma unica chamada de desenho no canvas. Em dispositivos modernos, o impacto no desempenho e insignificante (aproximadamente 1-2% de CPU). Voce pode reduzir a Quantidade de Particulas e o Tamanho nos controles para um uso de recursos ainda menor em hardware mais antigo.
Sim — o codigo gerado e JavaScript vanilla sem dependencias. WordPress: cole no footer.php ou use um plugin "Insert Headers and Footers". Shopify: adicione em Tema → Editar Codigo → theme.liquid antes de </body>. Wix: use Configuracoes → Codigo Personalizado. Squarespace: Configuracoes → Injecao de Codigo → Footer. Funciona em qualquer plataforma que permita JavaScript personalizado. Consulte a tabela de compatibilidade acima para instrucoes detalhadas.
Use os seletores de Cor Primaria e Cor Secundaria no painel do gerador. Cada particula seleciona aleatoriamente uma das duas cores, criando um efeito dinamico e combinado. Para um visual monocromatico, defina ambas as cores com o mesmo valor. O codigo gerado incorpora diretamente as cores escolhidas — sem necessidade de editar o script apos colar.