particles.js Playground — Live-Konfigurationseditor und Generator

Bearbeite eine particles.js-Konfiguration mit Reglern oder rohem JSON, sieh sie live laufen und kopiere das JSON oder ein fertiges HTML-Snippet.

Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.

Dieser particles.js Playground ist ein Live-Editor und Generator für particles.js-Konfigurationen. Ändere mit den Reglern Anzahl, Farben und Formen der Partikel, die Verbindungslinien, die Bewegung und die Hover- und Klick-Effekte oder bearbeite direkt die komplette JSON-Konfiguration – die Vorschau läuft beim Tippen neu. Beide Ansichten bearbeiten dieselbe Konfiguration, du kannst also mit Schiebereglern grob vorarbeiten und im JSON feinjustieren. Sieht es gut aus, kopierst du das JSON oder ein komplettes HTML-Snippet mit Script-Tag und particlesJS()-Aufruf.

Die Vorschau läuft mit der echten Bibliothek particles.js 2.0.0, keiner Nachahmung – was du siehst, zeigt also auch deine Seite, samt ihrer Eigenheiten: Es werden nur Hex-Farben akzeptiert, die Partikelanzahl skaliert bei aktivierter Dichte mit der Canvas-Größe, und Verbindungslinien werden schnell teuer. Die FPS-Anzeige hilft dir, eine Konfiguration zu beurteilen, bevor du sie auf Smartphones auslieferst. particles.js selbst wurde seit Version 2.0.0 von 2015 nicht mehr aktualisiert; es funktioniert in aktuellen Browsern weiterhin, und die Hinweise unten erklären, wann tsParticles, sein gepflegter Nachfolger, die bessere Wahl ist.

So funktioniert’s

Wähle eine Vorlage als Ausgangspunkt oder füge deine eigene Konfiguration in den JSON-Editor ein (eine particlesjs-config.json, ein particlesJS("particles-js", {...})-Aufruf oder ein einfaches Objekt funktionieren). Du kannst auch eine .json-Datei auf das Tool ziehen.
Passe die Konfiguration im Tab „Regler“ an: Partikelanzahl und Dichte, Farben, Form, Deckkraft, Größe, Verbindungslinien, Bewegung und Interaktivität. Oder bearbeite direkt das JSON; Fehler erscheinen unter dem Editor, und die Vorschau behält die letzte gültige Konfiguration.
Stelle Hintergrundfarbe oder -bild der Vorschau passend zu deiner Seite ein und fahr mit der Maus über die Vorschau bzw. klicke hinein, um die Interaktivität zu testen. Mit „Vergrößern“ oder „Vollbild“ siehst du sie in voller Größe, und behalte die FPS-Anzeige im Blick.
Wähle eine Ausgabe: das HTML-Snippet, die particlesJS.load-Variante, eine React-Komponente oder die JSON-Konfiguration. Wähle, ob der Container ein ganzseitiger Hintergrund ist oder ein Elternelement ausfüllt.
Kopiere oder lade die Ausgabe herunter und füge das HTML-Snippet direkt vor dem schließenden </body>-Tag deiner Seite ein.

Häufige Fragen

Wie binde ich particles.js in meine Website ein?

Füge ein leeres Element mit einer id hinzu, etwa <div id="particles-js"></div>, gib ihm per CSS eine Größe, lade die Bibliothek mit einem Script-Tag (jsDelivr liefert sie unter cdn.jsdelivr.net/npm/ gefolgt von particles.js@2.0.0/particles.min.js aus) und rufe particlesJS("particles-js", { ...config }) mit dieser id und deiner Konfiguration auf. Das Skript muss laufen, nachdem das Element existiert, setze es also direkt vor </body>. Der häufigste Grund für ein leeres Ergebnis ist ein Container ohne Höhe: particles.js richtet die Größe seines Canvas nach dem Element, ein div mit Höhe 0 ergibt also ein Canvas mit Höhe 0. Das HTML-Snippet aus diesem Tool enthält das CSS für einen ganzseitigen Hintergrund oder für das Ausfüllen eines Elternelements.

Wie nutze ich particles.js in React oder Next.js?

Installiere es mit npm install particles.js und importiere es dann innerhalb von useEffect, damit es nur im Browser läuft (es nutzt window, ein Import auf oberster Ebene bricht daher das serverseitige Rendering in Next.js). Rufe window.particlesJS("particles-js", config) auf, sobald das Element gerendert ist, und räume auf, wenn die Komponente unmountet: Rufe pJS.fn.vendors.destroypJS() für jeden Eintrag von window.pJSDom auf und setze window.pJSDom auf ein leeres Array zurück, sonst läuft die Animationsschleife weiter und der nächste Mount schlägt fehl. Die React-/Next.js-Ausgabe hier ist eine Komponente, die genau das tut. Für ein neues React-Projekt passt das gepflegte Paket @tsparticles/react natürlicher.

Wird particles.js noch gepflegt? particles.js vs. tsParticles

Nein. particles.js von Vincent Garreau blieb bei Version 2.0.0 stehen, veröffentlicht 2015, und sein Repository hat seitdem keine Releases mehr. Es funktioniert in aktuellen Browsern weiterhin, weil es nur Canvas und requestAnimationFrame nutzt, und viele Websites verwenden es. tsParticles von Matteo Bruni begann als TypeScript-Portierung und ist sein aktiv gepflegter Nachfolger: Es hat mehr Formen und Effekte, offizielle Komponenten für React, Vue, Angular und Svelte, bessere Performance-Optionen und kann die meisten particles.js-Optionen lesen. Nimm particles.js für einen schnellen Hintergrund ohne Abhängigkeiten auf einer statischen Seite; wähle tsParticles für eine Framework-App oder alles, was du jahrelang pflegen wirst.

Macht particles.js eine Website auf Mobilgeräten langsam?

Das kann passieren. Jedes Partikel wird in jedem Frame neu gezeichnet, und bei aktivierten Verbindungslinien wird für jedes Partikel der Abstand zu jedem anderen geprüft – der Aufwand wächst also mit dem Quadrat der Partikelanzahl. retina_detect verdoppelt oder verdreifacht die gezeichneten Pixel auf Smartphones mit hoher Pixeldichte. Damit es flüssig bleibt: Lass die Dichte aktiviert, damit kleine Bildschirme weniger Partikel bekommen, bleib bei aktivierten Linien unter etwa 100 Partikeln, schalte Linien oder retina_detect ab, wenn die FPS sinken, und initialisiere particles.js gar nicht erst, wenn beim Besucher prefers-reduced-motion gesetzt ist. Browser pausieren requestAnimationFrame in Hintergrund-Tabs, es kostet also nichts, wenn der Tab ausgeblendet ist.

Warum wird mein particles.js-Hintergrund nicht angezeigt?

Prüfe der Reihe nach: Der Container hat eine echte Höhe (height: 100% funktioniert nur, wenn auch sein Elternelement eine Höhe hat – deshalb nutzt das Snippet position: fixed oder absolute); der particlesJS-Aufruf läuft, nachdem das Element existiert; die Partikelfarbe unterscheidet sich vom Hintergrund; andere Inhalte verdecken ihn nicht mit einem undurchsichtigen Hintergrund; und die Browserkonsole zeigt keinen Fehler. Mit particlesJS.load muss die Seite über http(s) ausgeliefert werden, da das Laden der JSON-Datei über file:// blockiert wird. Auch eine Farbe, die als Name oder rgb() statt als Hex angegeben ist, verhindert, dass particles.js zeichnet; dieses Tool weist darauf hin.

Kann particles.js ein Bild oder eine eigene Form verwenden?

Ja. Setze shape.type auf "image" und shape.image.src auf die Bild-URL; width und height legen das Seitenverhältnis fest, und die Option size bestimmt, wie groß es gezeichnet wird. PNG, JPG, GIF und WebP werden als normale Bilder geladen. SVG-Dateien werden per XMLHttpRequest heruntergeladen, damit ihre Farbe ersetzt werden kann – der Server, auf dem das SVG liegt, muss also Cross-Origin-Anfragen erlauben. Neben Bildern gibt es die eingebauten Formen circle, edge (ein Quadrat), triangle, polygon und star, wobei polygon.nb_sides die Anzahl der Seiten bzw. Sternzacken festlegt. Ein Array von Formen gibt jedem Partikel eine zufällige davon.

Referenz der particles.js-Konfiguration: die wichtigen Optionen

Eine particles.js-Konfiguration hat drei Schlüssel auf oberster Ebene: particles (was gezeichnet wird und wie es sich bewegt), interactivity (wie es auf die Maus reagiert) und retina_detect. Jeder weggelassene Schlüssel fällt auf den Standard der Bibliothek zurück, und diese Standards sind heftig: 400 Partikel mit Radius 20 und aktivierten Linien. Eine Konfiguration, die nur eine Farbe setzt, sieht daher nicht aus wie die Demo.

• particles.number.value und density: Bei aktiviertem density.enable ist value die Anzahl für eine Fläche von value_area × 1000 Quadratpixeln, und die tatsächliche Anzahl skaliert mit dem Canvas. 80 Partikel bei value_area 800 ergeben auf einem 1920×1080-Bildschirm etwa 200 und auf einem Smartphone ein paar Dutzend.

• particles.color.value: ein Hex-String, ein Array von Hex-Strings (jedes Partikel wählt einen), "random" oder ein {r, g, b}-Objekt. Farbnamen und rgb()-Strings werden nicht unterstützt und stoppen die Animation.

• particles.shape.type: circle, edge, triangle, polygon, star oder image oder ein Array davon. stroke fügt eine Kontur hinzu; polygon.nb_sides legt die Seiten bei polygon und die Zacken bei star fest.

• opacity und size: value ist das Maximum, random wählt pro Partikel einen Wert zwischen 0 und diesem, und anim lässt es mit der angegebenen Geschwindigkeit zwischen opacity_min / size_min und dem Wert pulsieren.

• line_linked: Linien zwischen Partikeln, die näher als distance Pixel beieinander liegen, mit zunehmendem Abstand blasser. Ihre color muss ein einzelner Hex-Wert sein.

• move: speed, direction (none oder eine von acht Richtungen), random (unterschiedliche Geschwindigkeiten), straight (kein Abdriften), out_mode (out lässt Partikel auf der anderen Seite wieder auftauchen, bounce lässt sie an den Rändern abprallen), bounce (Partikel kollidieren miteinander) und attract.

• interactivity.events: onhover-Modi grab (Linien zum Cursor ziehen), bubble (in der Nähe wachsen oder verblassen) und repulse (wegstoßen); onclick-Modi push (Partikel hinzufügen), remove, bubble und repulse. Ihre Stärke wird in interactivity.modes festgelegt. detect_on ist standardmäßig canvas; mit window reagiert es auch dann, wenn Inhalte das Canvas verdecken, und nutzt Viewport-Koordinaten.

particles.js installieren: CDN, npm oder selbst gehostet

Über ein CDN: ein Script-Tag, dessen src cdn.jsdelivr.net/npm/ gefolgt von particles.js@2.0.0/particles.min.js ist (das HTML-Snippet oben enthält das vollständige Tag). Fixiere die Version so, statt @latest zu verwenden. Das npm-Paket enthält nur das nicht minifizierte particles.js; jsDelivr erzeugt die .min.js-Datei (etwa 23 KB) bei Bedarf, und weil sie erzeugt wird, rät jsDelivr davon ab, ihr einen SRI-Integritätshash hinzuzufügen.

Mit npm: npm install particles.js@2.0.0, dann import "particles.js" im clientseitigen Code. Das Paket exportiert nichts; der Import definiert window.particlesJS und window.pJSDom. Es bringt keine TypeScript-Typen mit, TypeScript-Projekte brauchen also eine einzeilige Deklaration declare module "particles.js" und sollten es über window aufrufen.

Selbst gehostet: Kopiere particles.js aus dem npm-Paket (oder die minifizierte Datei von jsDelivr) zu deinen statischen Dateien und lass das Script-Tag darauf zeigen. Die Bibliothek nutzt kein eval und funktioniert daher unter einer strikten Content-Security-Policy, die deine eigenen Skripte erlaubt; eine Bildform braucht ihren Host in img-src, und SVG-Bilder oder particlesJS.load brauchen den Host zusätzlich in connect-src.

particles.js steht unter der MIT-Lizenz, du kannst es also in kommerziellen Projekten nutzen, solange der Lizenzhinweis in der Datei bleibt.

Einen Partikel-Hintergrund schnell und barrierefrei machen

Ein bewegter Hintergrund ist Dekoration und sollte daher nie stören. Respektiere reduzierte Bewegung, indem du ihn nur startest, wenn der Besucher nicht weniger Bewegung angefordert hat: if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). Alternativ behältst du ihn, setzt aber move.enable auf false – dann wird ein einzelnes Standbild gezeichnet.

Halte Text lesbar: Prüfe die Textfarbe gegen den Hintergrund und gegen die Partikel- und Linienfarben und lege bei Bedarf eine halbtransparente Fläche unter den Text. Setze Inhalte mit position: relative und einem höheren z-index über das Canvas, und wenn das Canvas keine Klicks abfangen soll, gib ihm pointer-events: none und nutze detect_on: "window" für Hover-Effekte.

Teste auf einem echten Smartphone. Die FPS-Anzeige in diesem Playground misst deinen Computer, und ein Mittelklasse-Smartphone schafft vielleicht ein Drittel davon. Die Partikelanzahl senken, value_area erhöhen, retina_detect abschalten und Verbindungslinien deaktivieren sind, in dieser Reihenfolge, die wirksamsten Änderungen.