Playground de particles.js: editor e gerador de config ao vivo

Edite uma config do particles.js com controles ou JSON puro, veja o resultado ao vivo e copie o JSON ou um trecho HTML pronto para colar.

Encontrou um problema ou algo que poderia ser melhor? Lemos todas as mensagens e corrigimos rápido.

Este playground de particles.js é um editor e gerador ao vivo de configs do particles.js. Mude a quantidade de partículas, as cores e formas delas, as linhas de ligação, o movimento e os efeitos ao passar o mouse e ao clicar usando os controles, ou edite a config JSON completa diretamente, e a prévia roda de novo enquanto você digita. As duas visões editam a mesma config, então você pode fazer o esboço com controles deslizantes e o ajuste fino no JSON. Quando estiver do jeito certo, copie o JSON ou um trecho HTML completo com a tag script e a chamada particlesJS().

A prévia roda a biblioteca real particles.js 2.0.0, não uma imitação, então o que você vê é o que sua página vai mostrar, inclusive as manias dela: só cores em hex são aceitas, a quantidade de partículas acompanha o tamanho do canvas quando a densidade está ativada, e as linhas de ligação ficam pesadas rapidamente. O indicador de FPS ajuda a avaliar uma config antes de mandá-la para celulares. O particles.js não é atualizado desde a 2.0.0, de 2015; ainda funciona nos navegadores atuais, e as notas abaixo explicam quando o tsParticles, seu sucessor mantido, é a melhor escolha.

Como usar

Escolha uma predefinição como ponto de partida ou cole sua própria config no editor JSON (um particlesjs-config.json, uma chamada particlesJS("particles-js", {...}) ou um objeto simples funcionam). Você também pode soltar um arquivo .json na ferramenta.
Ajuste a config na aba Controles: quantidade e densidade de partículas, cores, forma, opacidade, tamanho, linhas de ligação, movimento e interatividade. Ou edite o JSON diretamente; os erros aparecem abaixo do editor e a prévia mantém a última config válida.
Defina a cor ou a imagem de fundo da prévia para combinar com sua página, e passe o mouse e clique na prévia para testar a interatividade. Use Expandir ou Tela cheia para ver em tamanho real e acompanhe o indicador de FPS.
Escolha uma saída: o trecho HTML, a variante com particlesJS.load, um componente React ou a config JSON. Escolha se o contêiner é um fundo de página inteira ou se preenche um elemento pai.
Copie ou baixe e cole o trecho HTML logo antes da tag de fechamento </body> da sua página.

Perguntas frequentes

Como adiciono o particles.js ao meu site?

Adicione um elemento vazio com um id, como <div id="particles-js"></div>, dê um tamanho a ele com CSS, carregue a biblioteca com uma tag script (o jsDelivr a serve em cdn.jsdelivr.net/npm/ seguido de particles.js@2.0.0/particles.min.js) e chame particlesJS("particles-js", { ...config }) com esse id e a sua config. O script precisa rodar depois que o elemento existe, então coloque-o logo antes de </body>. O motivo mais comum para um resultado em branco é um contêiner sem altura: o particles.js dimensiona o canvas a partir do elemento, então uma div com altura 0 gera um canvas com altura 0. O trecho HTML desta ferramenta inclui o CSS para um fundo de página inteira ou para preencher um elemento pai.

Como uso o particles.js em React ou Next.js?

Instale com npm install particles.js e importe dentro de useEffect para que rode só no navegador (ele usa window, então importá-lo no nível superior quebra a renderização no servidor do Next.js). Chame window.particlesJS("particles-js", config) depois que o elemento for renderizado e faça a limpeza quando o componente for desmontado: chame pJS.fn.vendors.destroypJS() em cada entrada de window.pJSDom e redefina window.pJSDom como um array vazio, senão o loop de animação continua rodando e a próxima montagem falha. A saída React / Next.js daqui é um componente que faz isso. Para um projeto React novo, o pacote mantido @tsparticles/react é a escolha mais natural.

O particles.js ainda é mantido? particles.js vs tsParticles

Não. O particles.js de Vincent Garreau parou na versão 2.0.0, lançada em 2015, e o repositório não teve nenhum lançamento desde então. Ele ainda funciona nos navegadores atuais porque usa só canvas e requestAnimationFrame, e muitos sites o utilizam. O tsParticles, de Matteo Bruni, começou como um port em TypeScript e é o sucessor mantido ativamente: tem mais formas e efeitos, componentes oficiais para React, Vue, Angular e Svelte, melhores opções de desempenho, e consegue ler a maioria das opções do particles.js. Use o particles.js para um fundo rápido e sem dependências numa página estática; escolha o tsParticles para um app com framework ou qualquer coisa que você vá manter por anos.

O particles.js deixa o site lento no celular?

Pode deixar. Cada partícula é redesenhada a cada quadro e, com as linhas de ligação ativadas, a distância de cada partícula é verificada em relação a todas as outras, então o custo cresce com o quadrado do número de partículas. O retina_detect dobra ou triplica os pixels desenhados em celulares de alta densidade. Para manter tudo fluido: deixe a densidade ativada para telas pequenas receberem menos partículas, fique abaixo de umas 100 partículas com as linhas ativadas, desative as linhas ou o retina_detect se o FPS cair e não inicialize o particles.js quando o visitante tiver prefers-reduced-motion configurado. Os navegadores pausam o requestAnimationFrame em abas em segundo plano, então não há custo quando a aba está oculta.

Por que meu fundo do particles.js não aparece?

Verifique nesta ordem: o contêiner tem uma altura real (height: 100% só funciona se o pai também tiver altura, e é por isso que o trecho usa position: fixed ou absolute); a chamada particlesJS roda depois que o elemento existe; a cor das partículas é diferente do fundo; nenhum outro conteúdo está cobrindo-o com um fundo opaco; e o console do navegador não mostra erros. Com particlesJS.load, a página precisa ser servida por http(s), já que carregar o arquivo JSON via file:// é bloqueado. Uma cor escrita como nome ou rgb() em vez de hex também impede o particles.js de desenhar; esta ferramenta avisa sobre isso.

O particles.js pode usar uma imagem ou uma forma personalizada?

Sim. Defina shape.type como "image" e shape.image.src como a URL da imagem; width e height definem a proporção, e a opção size define o tamanho em que ela é desenhada. PNG, JPG, GIF e WebP carregam como imagens comuns. Arquivos SVG são baixados com XMLHttpRequest para que a cor possa ser substituída, o que significa que o servidor que hospeda o SVG precisa permitir requisições cross-origin. Além de imagens, as formas embutidas são circle, edge (um quadrado), triangle, polygon e star, com polygon.nb_sides definindo o número de lados ou de pontas da estrela. Um array de formas dá uma forma aleatória a cada partícula.

Referência da config do particles.js: as opções que importam

Uma config do particles.js tem três chaves de nível superior: particles (o que é desenhado e como se move), interactivity (como reage ao mouse) e retina_detect. Qualquer chave que você omitir volta ao padrão da biblioteca, e esses padrões são pesados: 400 partículas de raio 20 com linhas ativadas. Por isso, uma config que define só uma cor não fica parecida com a demo.

• particles.number.value e density: com density.enable ativado, value é a quantidade para uma área de value_area × 1000 pixels quadrados, e a quantidade real acompanha o canvas. 80 partículas com value_area 800 dão cerca de 200 numa tela de 1920×1080 e algumas dezenas num celular.

• particles.color.value: uma string hex, um array de strings hex (cada partícula escolhe uma), "random" ou um objeto {r, g, b}. Nomes de cores e strings rgb() não são aceitos e travam a animação.

• particles.shape.type: circle, edge, triangle, polygon, star ou image, ou um array deles. stroke adiciona um contorno; polygon.nb_sides define os lados do polígono e as pontas da estrela.

• opacity e size: value é o máximo, random sorteia um valor entre 0 e ele para cada partícula, e anim faz pulsar entre opacity_min / size_min e o value na velocidade indicada.

• line_linked: linhas entre partículas mais próximas que distance pixels, que esmaecem com a distância. O color dela precisa ser um único valor hex.

• move: speed, direction (none ou uma de oito direções), random (velocidades variadas), straight (sem desvio), out_mode (out faz a partícula reaparecer do outro lado, bounce rebate nas bordas), bounce (as partículas colidem entre si) e attract.

• interactivity.events: os modos de onhover são grab (desenha linhas até o cursor), bubble (cresce ou esmaece perto dele) e repulse (empurra para longe); os modos de onclick são push (adiciona partículas), remove, bubble e repulse. A intensidade deles é definida em interactivity.modes. detect_on é canvas por padrão; window faz reagir mesmo quando há conteúdo cobrindo o canvas, usando as coordenadas da viewport.

Instalando o particles.js: CDN, npm ou auto-hospedado

Por CDN: uma tag script cujo src é cdn.jsdelivr.net/npm/ seguido de particles.js@2.0.0/particles.min.js (o trecho HTML acima tem a tag completa). Fixe a versão desse jeito em vez de usar @latest. O pacote npm contém só o particles.js não minificado; o jsDelivr gera o arquivo .min.js (cerca de 23 KB) sob demanda e, como ele é gerado, o jsDelivr não recomenda adicionar um hash de integridade SRI a ele.

Com npm: npm install particles.js@2.0.0 e depois import "particles.js" no código do lado do cliente. O pacote não exporta nada; importá-lo define window.particlesJS e window.pJSDom. Ele não traz tipos TypeScript, então projetos TypeScript precisam de uma linha declare module "particles.js" e devem chamá-lo por window.

Auto-hospedado: copie o particles.js do pacote npm (ou o arquivo minificado do jsDelivr) para os seus arquivos estáticos e aponte a tag script para ele. A biblioteca não usa eval, então funciona sob uma Content-Security-Policy restrita que permita seus próprios scripts; uma forma de imagem precisa do host em img-src, e imagens SVG ou o particlesJS.load também precisam do host em connect-src.

O particles.js tem licença MIT, então você pode usá-lo em projetos comerciais desde que o aviso de licença continue no arquivo.

Como deixar um fundo de partículas rápido e acessível

Um fundo em movimento é decoração, então nunca deve atrapalhar. Respeite a preferência por movimento reduzido iniciando-o só quando o visitante não pediu menos movimento: if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). Outra opção é mantê-lo, mas definir move.enable como false, o que desenha um único quadro parado.

Mantenha o texto legível: confira a cor do texto contra o fundo e contra as cores das partículas e linhas, e adicione uma camada semitransparente sob o texto se precisar. Coloque o conteúdo acima do canvas com position: relative e um z-index maior e, se o canvas não puder capturar cliques, dê a ele pointer-events: none e use detect_on: "window" para os efeitos de hover.

Teste num celular de verdade. O indicador de FPS deste playground mede o seu computador, e um celular intermediário pode conseguir um terço disso. Reduzir a quantidade de partículas, aumentar value_area, desativar o retina_detect e desativar as linhas de ligação são, nessa ordem, as mudanças que mais ajudam.

Ferramentas grátis relacionadas

Gerador de gradiente CSS — Crie gradientes lineares, radiais e cônicos com pontos de cor arrastáveis, um seletor de ângulo e predefinições. Copie o CSS ou uma classe do Tailwind.
Gerador de box-shadow — Crie efeitos de box-shadow e text-shadow em camadas com prévia ao vivo e predefinições de elevação, neumorfismo e brilho, e copie o CSS.
Formatador de JSON — Formate, minifique e valide JSON, com erros de parsing localizados por linha e coluna. No seu navegador, sem upload.
Gerador de paleta de cores — Pressione a barra de espaço para uma nova paleta, trave as cores de que gostar, escolha uma harmonia ou extraia a paleta de uma foto. Exporte para CSS, Tailwind, SCSS, JSON ou PNG.
Editor de SVG — Desenhe formas, setas, linhas à mão livre e texto em uma tela e baixe um SVG ou PNG limpo. Grátis, no navegador, sem cadastro.