O que é Gerador de efeitos de partículas?

Projete e visualize animações de partículas para seu site ou aplicativo. Configure quantidade, velocidade, tamanho, cor, forma, interação e física para criar efeitos como neve, confete, vagalumes ou padrões de galáxia. Exporte a configuração como código pronto para uso.

Por baixo roda o tsParticles, então o JSON copiado entra direto num projeto React, Vue ou JavaScript puro. Interações de mouse e clique (repulse, grab, bubble, push, remove), o fade de opacidade e a animação de cor (matiz) já vêm prontas, e o export HTML inclui o motor via CDN, dá pra colar numa página estática sem etapa de build. Você também pode gravar a prévia ao vivo como um GIF animado para compartilhar o efeito em qualquer lugar.

Como usar

1. Escolha um efeito predefinido (neve, confete, vagalumes, bolhas, galáxia, rede, fogos de artifício, fogo, fumaça) ou comece do zero.
2. Ajuste as propriedades das particulas: quantidade, velocidade, faixa de tamanho, cores, formas, opacidade e fisica como gravidade e quicamento.
3. Visualize a animacao ao vivo e copie a configuracao JSON do tsParticles, exporte como um trecho HTML independente ou capture a previa como um GIF animado.

Quando usar

• Adicionar uma camada de neve ou confete numa landing de campanha sazonal ou lançamento.
• Prototipar o fundo da seção hero de um site SaaS antes de chamar a designer.
• Criar um fundo de galáxia ou vaga-lumes para portfólio ou menu de jogo.

Resultado

Um desenvolvedor web seleciona o preset de neve, aumenta a quantidade de particulas para 200, adiciona uma leve deriva de vento e copia o JSON de configuracao para adicionar um efeito de inverno a sua landing page natalina.

Perguntas frequentes

O JSON exportado funciona em qualquer framework?

Sim. A config é compatível com tsParticles, que tem bindings oficiais pra React, Vue, Svelte, Angular e JS puro. Instala o wrapper certo, passa o JSON como options e o efeito sai igual à pré-visualização daqui.

Quantas partículas dá pra usar antes de travar?

Num notebook recente, 200 a 400 partículas rodam a 60 fps. Acima de 500 começa a aparecer travamento em celular médio. Estrelas e polígonos pesam mais que círculos por causa do path. Pra mobile, fique entre 100 e 150 com interação desligada.

Por que a animação fica diferente depois que eu exporto pro HTML?

O snippet HTML estica o canvas até o tamanho do container pai. Se você cola num div minúsculo, as partículas espremem. Dá uma altura fixa pro wrapper (por exemplo 100vh ou 400px) que o canvas se ajusta.

Posso usar uma imagem minha como forma de partícula?

Pela interface não, mas o motor suporta. Exporta o JSON e edita shape.options.image apontando pro seu PNG ou SVG. A imagem é renderizada no tamanho e opacidade que a simulação atribui a cada partícula.

A animação prejudica os Core Web Vitals?

Soma uns 30 a 80 KB gzipped do motor mais o repaint contínuo do canvas. Pra não derrubar o Lighthouse, reduza partículas e desligue interação no mobile. Carregar o motor com lazy depois do hero deixa o LCP limpo.

Ferramentas relacionadas