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 carrega o motor inteiro dentro do arquivo, então a página baixada roda offline assim que você a abre, sem etapa de build e sem buscar nada de terceiros. Você também pode expandir a prévia em tela cheia ou gravá-la 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?

A página exportada preenche a tela inteira, enquanto a prévia aqui é uma faixa estreita. A mesma quantidade de partículas espalhada por uma área bem maior parece mais rarefeita — aumente o número se quiser a densidade que viu. O resto não muda: velocidade, tamanho, cores e física chegam exatamente como você ajustou.

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