Optionen-Referenz

Die tsParticles-Optionen sind sehr umfangreich. Diese Seite ist eine praktische Karte, bevor du in jede Unteroption einsteigst.

Wähle deinen Konfigurationsweg

Schnelles visuelles Ergebnis: starte mit einem Preset und uberschreibe die wichtigsten Felder.
Volle Kontrolle: definiere particles, interactivity und background manuell.
Config-first-Workflow: beginne mit @tsparticles/configs und iteriere sicher weiter.

Schnelldoku (lokal)

Partikel-Deep-Dive-Seiten

Wo die Referenzdokumentation liegt

Hauptdoku fur Optionen: tsparticles/markdown/Options.md
Detaillierte Optionsseiten: tsparticles/markdown/Options/
TypeScript-Interfaces: tsparticles/engine/src/Options/Interfaces

Meistgenutzte Root-Optionen

background
fullScreen
interactivity
particles
detectRetina
preset
responsive

Meistgenutzte Bereiche

background: Basis fur Canvas-Hintergrund und Maskierung.
particles.number: Anzahl und Dichte.
particles.move: Geschwindigkeit, Richtung und out modes.
particles.shape: Kreis, Polygon, Bild, Emoji, benutzerdefiniert.
particles.palette: schnell koordinierte Farbsets wechseln.
interactivity: Hover/Klick-Modi und externe Effekte.
detectRetina: Qualitats-/Performance-Kompromiss auf High-DPI-Displays.

Partikelkarte (verschachtelte Ansicht)

Nutze diesen schnellen Baum als Navigationshilfe, bevor du Einzelseiten offnest:

text

particles
|- number
|- color
|- shape
|- size
|- opacity
|- move
|- links
|- collisions
|- life
|- destroy
|- group
|- orbit
|- repulse
|- roll
|- rotate
|- shadow
|- stroke
|- tilt
|- twinkle
|- wobble
|- zIndex
`- palette

Erst die Root-Doku, dann die Deep-Dive-Bereiche:

Basis: Particles
Vertiefung: Particles Number, Particles Move, Particles Links

Sicherer Optionen-Workflow

Starte mit einer funktionierenden Konfiguration aus Demos oder Presets.
Aendere immer nur einen Bereich auf einmal.
Validiere mit TypeScript (IOptions) im App-Code.
Halte Produktionsoptionen in dedizierten JSON-Dateien.

Minimal typisiertes Beispiel

import type { ISourceOptions } from "@tsparticles/engine";

export const particlesOptions: ISourceOptions = {
  fpsLimit: 60,
  particles: {
    number: { value: 70 },
    move: { enable: true, speed: 1.5 },
  },
};

Performance-Leitplanken

Nutze bevorzugt @tsparticles/slim, ausser du brauchst erweiterte Plugins.
Halte die Partikelanzahl proportional zur Flache des Containers.
Profile mit echten Geraten, bevor du schwere Interaktionen hinzufugst.

Optionen-Referenz ​

Wähle deinen Konfigurationsweg ​

Schnelldoku (lokal) ​

Partikel-Deep-Dive-Seiten ​

Wo die Referenzdokumentation liegt ​

Meistgenutzte Root-Optionen ​

Meistgenutzte Bereiche ​

Partikelkarte (verschachtelte Ansicht) ​

Sicherer Optionen-Workflow ​

Minimal typisiertes Beispiel ​

Performance-Leitplanken ​

Verwandte Referenzen ​