Was ist Partikeleffekt-Generator?

Entwerfen und testen Sie Partikelanimationen für Ihre Website oder Anwendung. Konfigurieren Sie Partikelanzahl, Geschwindigkeit, Größe, Farbe, Form, Interaktionsverhalten und Physik, um Effekte wie Schnee, Konfetti, Glühkäfer oder Galaxie-Muster zu erstellen. Exportieren Sie die Konfiguration als einsatzbereiten Code.

Unter der Haube läuft tsParticles, also kannst du das kopierte JSON direkt in ein React-, Vue- oder Vanilla-Projekt übernehmen. Maus- und Klick-Interaktionen (repulse, grab, bubble, push, remove), die Deckkraft-Überblendung und die Farb-Animation (Farbton) sind sofort aktiv, und der HTML-Export bindet die Engine per CDN ein, damit du den Code ohne Build-Schritt in eine statische Seite einfügen kannst. Du kannst die Live-Vorschau auch als animiertes GIF aufnehmen, um den Effekt überall zu teilen.

Anleitung

1. Wählen Sie eine Effekt-Vorlage (Schnee, Konfetti, Glühkäfer, Blasen, Galaxie, Netzwerk, Feuerwerk, Feuer, Rauch) oder beginnen Sie bei Null.
2. Passen Sie die Partikeleigenschaften an: Anzahl, Geschwindigkeit, Grossenbereich, Farben, Formen, Deckkraft und Physikparameter wie Schwerkraft und Abprallverhalten.
3. Sehen Sie sich die Animation in der Live-Vorschau an und kopieren Sie anschliessend die tsParticles-JSON-Konfiguration, exportieren Sie sie als eigenstandigen HTML-Codeausschnitt oder nehmen Sie die Vorschau als animiertes GIF auf.

Wann verwenden

• Eine Schnee- oder Konfetti-Ebene auf eine Aktions- oder Launch-Landingpage legen.
• Den Hero-Hintergrund einer SaaS-Seite als Prototyp bauen, bevor die Designerin übernimmt.
• Einen Galaxie- oder Glühwürmchen-Hintergrund für Portfolio oder Spielmenü erzeugen.

Ergebnis

Ein Webentwickler wahlt die Schnee-Vorlage, erhoht die Partikelanzahl auf 200, fugt eine leichte Windabdrift hinzu und kopiert die JSON-Konfiguration, um seiner Weihnachts-Landingpage einen Wintereffekt hinzuzufugen.

Häufige Fragen

Funktioniert das exportierte JSON in jedem Framework?

Ja. Die Konfiguration ist tsParticles-kompatibel und es gibt offizielle Bindings für React, Vue, Svelte, Angular und Vanilla JS. Wrapper installieren, JSON als options reichen und der Effekt sieht aus wie in der Vorschau hier.

Ab wann fängt es an zu ruckeln?

Auf einem aktuellen Laptop laufen 200 bis 400 Partikel ruhig mit 60 fps. Ab 500 werden Mittelklasse-Smartphones zäh. Sterne und Polygone kosten mehr als Kreise wegen des Pfad-Renderings. Für mobile Geräte bei 100 bis 150 bleiben und Interaktion sparsam einsetzen.

Warum sieht die Animation nach dem HTML-Export anders aus?

Das HTML-Snippet skaliert das Canvas auf die Grösse des Elternelements. In einem winzigen div werden die Partikel gestaucht. Gib dem Wrapper eine feste Höhe (etwa 100vh oder 400px), dann passt sich das Canvas an.

Kann ich ein eigenes Bild als Partikelform nutzen?

Über die Oberfläche nicht, die Engine selbst kann es aber. Exportiere das JSON und ändere shape.options.image so, dass es auf dein PNG oder SVG zeigt. Das Bild wird in der Grösse und Deckkraft gerendert, die die Simulation jedem Partikel zuweist.

Schadet die Animation den Core Web Vitals?

Die Engine bringt etwa 30 bis 80 KB gzip mit, dazu kommt das ständige Neuzeichnen des Canvas. Für Lighthouse die Partikelzahl auf Mobil reduzieren und Interaktion abschalten. Wird die Engine nach dem Hero lazy geladen, bleibt der LCP sauber.

Ähnliche Tools