Playground particles.js — Editor e generatore di configurazioni dal vivo

Modifica una configurazione particles.js con i controlli o direttamente in JSON, guardala in azione dal vivo e copia il JSON o uno snippet HTML pronto da incollare.

Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.

Questo playground particles.js è un editor e generatore dal vivo di configurazioni particles.js. Cambia con i controlli il numero di particelle, i colori e le forme, le linee di collegamento, il movimento e gli effetti al passaggio del mouse e al clic, oppure modifica direttamente la configurazione JSON completa: l'anteprima si riavvia mentre scrivi. Le due viste modificano la stessa configurazione, così puoi abbozzarla con i cursori e rifinirla in JSON. Quando ti convince, copia il JSON o uno snippet HTML completo con il tag script e la chiamata particlesJS().

L'anteprima usa la vera libreria particles.js 2.0.0, non un'imitazione, quindi quello che vedi è quello che mostrerà la tua pagina, stranezze comprese: sono accettati solo colori esadecimali, il numero di particelle si adatta alle dimensioni del canvas quando la densità è attiva e le linee di collegamento diventano presto pesanti. L'indicatore di FPS ti aiuta a valutare una configurazione prima di pubblicarla sui telefoni. particles.js non è più stato aggiornato dalla versione 2.0.0 del 2015; funziona ancora nei browser attuali, e le note qui sotto spiegano quando conviene scegliere tsParticles, il suo successore mantenuto.

Come si usa

Scegli un preset da cui partire o incolla la tua configurazione nell'editor JSON (vanno bene un particlesjs-config.json, una chiamata particlesJS("particles-js", {...}) o un semplice oggetto). Puoi anche trascinare un file .json sullo strumento.
Regola la configurazione dalla scheda Controlli: numero e densità delle particelle, colori, forma, opacità, dimensione, linee di collegamento, movimento e interattività. Oppure modifica direttamente il JSON: gli errori compaiono sotto l'editor e l'anteprima mantiene l'ultima configurazione valida.
Imposta il colore o l'immagine di sfondo dell'anteprima in modo che corrisponda alla tua pagina, poi passa il mouse e fai clic sull'anteprima per provare l'interattività. Usa Espandi o Schermo intero per vederla a dimensione piena e tieni d'occhio l'indicatore di FPS.
Scegli un output: lo snippet HTML, la variante particlesJS.load, un componente React o la configurazione JSON. Scegli se il contenitore è uno sfondo a pagina intera o riempie un elemento padre.
Copialo o scaricalo e incolla lo snippet HTML subito prima del tag di chiusura </body> della pagina.

Domande frequenti

Come aggiungo particles.js al mio sito?

Aggiungi un elemento vuoto con un id, come <div id="particles-js"></div>, dagli una dimensione con il CSS, carica la libreria con un tag script (jsDelivr la serve all'indirizzo cdn.jsdelivr.net/npm/ seguito da particles.js@2.0.0/particles.min.js) e chiama particlesJS("particles-js", { ...config }) con quell'id e la tua configurazione. Lo script deve essere eseguito dopo che l'elemento esiste, quindi mettilo subito prima di </body>. Il motivo più comune di un risultato vuoto è un contenitore senza altezza: particles.js dimensiona il canvas in base all'elemento, quindi un div alto 0 produce un canvas alto 0. Lo snippet HTML di questo strumento include il CSS per uno sfondo a pagina intera o per riempire un elemento padre.

Come si usa particles.js in React o Next.js?

Installalo con npm install particles.js, poi importalo dentro useEffect, così viene eseguito solo nel browser (usa window, quindi importarlo al livello principale rompe il rendering lato server di Next.js). Chiama window.particlesJS("particles-js", config) quando l'elemento è stato renderizzato e fai pulizia quando il componente viene smontato: chiama pJS.fn.vendors.destroypJS() su ogni voce di window.pJSDom e reimposta window.pJSDom su un array vuoto, altrimenti il ciclo di animazione continua a girare e il montaggio successivo fallisce. L'output React / Next.js di questo strumento è un componente che fa proprio questo. Per un nuovo progetto React, il pacchetto mantenuto @tsparticles/react è la scelta più naturale.

particles.js è ancora mantenuto? particles.js vs tsParticles

No. particles.js di Vincent Garreau si è fermato alla versione 2.0.0, pubblicata nel 2015, e da allora il suo repository non ha avuto nuove release. Funziona ancora nei browser attuali perché usa solo canvas e requestAnimationFrame, e molti siti lo usano. tsParticles, di Matteo Bruni, è nato come port in TypeScript ed è il suo successore mantenuto attivamente: ha più forme ed effetti, componenti ufficiali per React, Vue, Angular e Svelte, migliori opzioni di prestazioni e legge la maggior parte delle opzioni di particles.js. Usa particles.js per uno sfondo veloce e senza dipendenze su una pagina statica; scegli tsParticles per un'app basata su framework o per qualsiasi cosa che manterrai per anni.

particles.js rallenta un sito su mobile?

Può succedere. Ogni particella viene ridisegnata a ogni frame e, con le linee di collegamento attive, la distanza di ogni particella viene controllata rispetto a tutte le altre, quindi il costo cresce con il quadrato del numero di particelle. retina_detect raddoppia o triplica i pixel disegnati sui telefoni ad alta densità. Per mantenerlo fluido: lascia attiva la densità, così gli schermi piccoli ricevono meno particelle, resta sotto le 100 particelle circa quando le linee sono attive, disattiva le linee o retina_detect se gli FPS calano e non inizializzare particles.js quando il visitatore ha impostato prefers-reduced-motion. I browser mettono in pausa requestAnimationFrame nelle schede in background, quindi non costa nulla quando la scheda è nascosta.

Perché il mio sfondo particles.js non si vede?

Controlla nell'ordine: il contenitore ha un'altezza reale (height: 100% funziona solo se anche l'elemento padre ha un'altezza, ed è per questo che lo snippet usa position: fixed o absolute); la chiamata particlesJS viene eseguita dopo che l'elemento esiste; il colore delle particelle è diverso dallo sfondo; altri contenuti non lo coprono con uno sfondo opaco; la console del browser non mostra errori. Con particlesJS.load la pagina deve essere servita via http(s), perché il caricamento del file JSON da file:// è bloccato. Anche un colore scritto come nome o come rgb() invece che in esadecimale impedisce a particles.js di disegnare; questo strumento lo segnala.

particles.js può usare un'immagine o una forma personalizzata?

Sì. Imposta shape.type su "image" e shape.image.src sull'URL dell'immagine; width e height ne definiscono le proporzioni e l'opzione size la dimensione con cui viene disegnata. PNG, JPG, GIF e WebP si caricano come normali immagini. I file SVG vengono scaricati con XMLHttpRequest per poterne sostituire il colore, quindi il server che ospita l'SVG deve consentire le richieste cross-origin. Oltre alle immagini, le forme integrate sono circle, edge (un quadrato), triangle, polygon e star, con polygon.nb_sides che imposta il numero di lati o di punte della stella. Un array di forme assegna a ogni particella una forma a caso.

Riferimento della configurazione particles.js: le opzioni che contano

Una configurazione particles.js ha tre chiavi di primo livello: particles (cosa viene disegnato e come si muove), interactivity (come reagisce al mouse) e retina_detect. Ogni chiave omessa torna al valore predefinito della libreria, e quei valori predefiniti sono pesanti: 400 particelle di raggio 20 con le linee attive. Per questo una configurazione che imposta solo un colore non somiglia alla demo.

• particles.number.value e density: con density.enable attivo, value è il numero di particelle per un'area di value_area × 1000 pixel quadrati e il numero reale si adatta al canvas. 80 particelle con value_area 800 diventano circa 200 su uno schermo 1920×1080 e qualche decina su un telefono.

• particles.color.value: una stringa esadecimale, un array di stringhe esadecimali (ogni particella ne sceglie una), "random" o un oggetto {r, g, b}. I colori indicati per nome e le stringhe rgb() non sono supportati e bloccano l'animazione.

• particles.shape.type: circle, edge, triangle, polygon, star o image, oppure un array di queste. stroke aggiunge un contorno; polygon.nb_sides imposta i lati per polygon e le punte per star.

• opacity e size: value è il massimo, random sceglie per ogni particella un valore tra 0 e il massimo e anim lo fa pulsare tra opacity_min / size_min e value alla velocità indicata.

• line_linked: linee tra le particelle più vicine di distance pixel, che sfumano con la distanza. Il suo color deve essere un unico valore esadecimale.

• move: speed, direction (none o una delle otto direzioni), random (velocità variabili), straight (nessuna deriva), out_mode (out fa ricomparire la particella dal lato opposto, bounce la fa rimbalzare sui bordi), bounce (le particelle si scontrano tra loro) e attract.

• interactivity.events: le modalità onhover sono grab (disegna linee verso il cursore), bubble (ingrandisce o sfuma vicino al cursore) e repulse (allontana); le modalità onclick sono push (aggiunge particelle), remove, bubble e repulse. La loro intensità si imposta in interactivity.modes. detect_on è canvas per impostazione predefinita; window lo fa reagire anche quando dei contenuti coprono il canvas, usando le coordinate del viewport.

Installare particles.js: CDN, npm o self-hosting

Da CDN: un tag script il cui src è cdn.jsdelivr.net/npm/ seguito da particles.js@2.0.0/particles.min.js (lo snippet HTML qui sopra contiene il tag completo). Fissa la versione in questo modo invece di usare @latest. Il pacchetto npm contiene solo particles.js non minificato; jsDelivr genera il file .min.js (circa 23 KB) su richiesta e, proprio perché è generato, jsDelivr sconsiglia di aggiungervi un hash di integrità SRI.

Con npm: npm install particles.js@2.0.0, poi import "particles.js" nel codice lato client. Il pacchetto non esporta nulla; importarlo definisce window.particlesJS e window.pJSDom. Non include tipi TypeScript, quindi i progetti TypeScript hanno bisogno di una riga declare module "particles.js" e devono chiamarlo tramite window.

Self-hosting: copia particles.js dal pacchetto npm (o il file minificato da jsDelivr) tra i tuoi file statici e punta il tag script su di esso. La libreria non usa eval, quindi funziona con una Content-Security-Policy rigorosa che consente i tuoi script; una forma immagine richiede il suo host in img-src, e le immagini SVG o particlesJS.load richiedono l'host anche in connect-src.

particles.js è rilasciato con licenza MIT, quindi puoi usarlo in progetti commerciali purché l'avviso di licenza resti nel file.

Rendere uno sfondo con particelle veloce e accessibile

Uno sfondo in movimento è decorazione, quindi non deve mai essere d'intralcio. Rispetta la preferenza per il movimento ridotto avviandolo solo se il visitatore non ha chiesto meno animazioni: if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). In alternativa mantienilo ma imposta move.enable su false, così viene disegnato un unico fotogramma fermo.

Mantieni il testo leggibile: verifica il colore del testo rispetto allo sfondo e ai colori di particelle e linee e, se serve, aggiungi un livello semitrasparente sotto il testo. Porta i contenuti sopra il canvas con position: relative e uno z-index più alto e, se il canvas non deve intercettare i clic, assegnagli pointer-events: none e usa detect_on: "window" per gli effetti al passaggio del mouse.

Prova su un telefono vero. L'indicatore di FPS di questo playground misura il tuo computer, e un telefono di fascia media può arrivare a un terzo di quel valore. Ridurre il numero di particelle, aumentare value_area, disattivare retina_detect e disattivare le linee di collegamento sono, in quest'ordine, le modifiche che aiutano di più.

Strumenti gratuiti correlati

Generatore di gradienti CSS — Crea gradienti lineari, radiali e conici con punti di colore trascinabili, una manopola per l'angolo e preset. Copia il CSS o una classe Tailwind.
Generatore di box-shadow — Crea effetti box-shadow e text-shadow a più livelli con anteprima dal vivo e preset per elevazione, neumorfismo e bagliore, poi copia il CSS.
Formattatore JSON — Formatta, minifica e valida JSON, con gli errori di parsing localizzati per riga e colonna. Nel tuo browser, senza upload.
Generatore di palette di colori — Premi la barra spaziatrice per una nuova palette, blocca i colori che ti piacciono, scegli un'armonia o ricava la palette da una foto. Esporta in CSS, Tailwind, SCSS, JSON o PNG.
Editor SVG — Disegna forme, frecce, linee a mano libera e testo su una tela, poi scarica un SVG pulito o un PNG. Gratis, nel browser, senza registrazione.