# Partikeleffekte: Staub, Funken und Licht in bewegten Designs

[Canonical HTML page](https://gradiently.design/de/guide/particles-effect)

Ein paar treibende Lichtpunkte können einen flachen Hintergrund wie einen Ort wirken lassen. Zu viele lassen ihn wie einen Bildschirmschoner aussehen. So wählst, stimmst und exportierst du Partikel, damit sie Atmosphäre schaffen und sonst nichts.

## The short version

- Ein Partikeleffekt ist eine Animation aus vielen kleinen Punkten, jeder mit eigener Position, Größe, Geschwindigkeit und Deckkraft, etwa Staub, Funken, Glut, Schnee oder Sterne.
- Partikel wirken am besten, wenn sie wenige, klein, langsam und unterschiedlich groß sind und die größten und hellsten sparsam eingesetzt werden.
- Wenn Partikel Abstand zum Text halten oder dahinter ruhiger werden, bleibt die Lesbarkeit geschützt.
- Feine bewegte Partikel sind für Videokompression schwierig, deshalb exportierst du Partikel-Loops als MP4 in guter Qualität statt als GIF.
- Auf Websites sollten Partikelanimationen stoppen, wenn Besucher reduzierte Bewegung anfordern.

Ein **Partikeleffekt** ist eine Animation aus vielen winzigen Punkten, die sich jeweils eigenständig bewegen: Staub, der in einem Lichtstrahl schwebt, Glut, die aus einem Feuer aufsteigt, Sterne, Schnee, Funken oder Nebel. In einem bewegten Design geben Partikel einem Hintergrund Tiefe und Atmosphäre, ohne mit den Wörtern zu konkurrieren, solange du sie wenige, klein und langsam hältst. Die Kunst ist Zurückhaltung: Partikel sollte man spüren, bevor man sie bemerkt.

## Wie ein Partikeleffekt funktioniert

Jedes Partikel ist ein kleiner Satz Zahlen: wo es ist, wie groß, wie schnell und in welche Richtung es sich bewegt, wie sichtbar es ist und manchmal, wie lange es lebt. Der Effekt entsteht aus Hunderten leicht verschiedener Partikel, die derselben einfachen Regel folgen. Ändere die Regel, und dieselben Punkte erzeugen eine völlig andere Stimmung.

| Partikelstil | Wie er sich bewegt | Stimmung | Passt zu |
| --- | --- | --- | --- |
| Staub | Winzig, treibt langsam in alle Richtungen | Ruhig, warm, filmisch | Kaffee, Bücher, Interior, ruhige Marken |
| Glut | Klein und hell, steigt auf und verglimmt | Warm, energiegeladen | Restaurants, Musik, Winter-Events |
| Sterne | Still oder kaum bewegt, funkelt | Nacht, Staunen | Abendevents, Astronomie, Schlaf, Launches |
| Nebel | Groß, weich, sehr blass, gleitet seitwärts | Geheimnisvoll, weich | Wellness, Beauty, Parfum |
| Schwarm | Bewegt sich gemeinsam in lockeren Gruppen | Lebendig, geschäftig | Tech, Daten, Natur |
| Schnee | Fällt stetig mit leichtem Schwanken | Saisonal, gemütlich | Winterkampagnen, Feiertagsposts |

Sechs Partikelstile und wohin jeder gehört. Wähle die Bewegung, die zum Gefühl passt, nicht die, die am meisten beeindruckt.

## Partikel dezent einsetzen

Der Unterschied zwischen Atmosphäre und Bildschirmschoner liegt fast immer in Menge und Tempo. Mit diesen Einstellungen bleiben Partikel im Hintergrund, wo sie hingehören.

### Bildschirmschoner

- Hunderte große, helle Punkte
- Alle gleich groß und gleich schnell
- Schnelle, hektische Bewegung
- Reinweiß auf jedem Hintergrund
- Treiben mitten durch die Headline

### Atmosphäre

- Eine überschaubare Zahl, meist winzig
- Gemischte Größen: viele kleine, einige größere und weichere
- So langsam, dass man zweimal hinsehen muss
- In den Farben des Hintergrunds getönt
- Dünner oder ruhiger, wo die Wörter stehen

Variiere Größe und Deckkraft, um Tiefe anzudeuten: kleine, scharfe, blasse Partikel wirken weit weg, einige größere, weichere wirken nah an der Linse. Nähere Partikel sollten sich auch etwas schneller bewegen, das ist derselbe Trick wie bei [Parallax](https://gradiently.design/de/guide/parallax-effect).

- Verkohlter Grund: #1a0f0a
- Tiefer Rost: #7c2d12
- Glut: #ea580c
- Funke: #fdba74
- Heißer Kern: #fff7ed

Eine Glut-Palette. Die Partikel nehmen die beiden hellsten Töne, sodass sie als Teil des Hintergrunds glühen, statt weiß obendrauf zu sitzen.

## Partikel und Text

Ein heller Punkt, der über einen Buchstaben treibt, lässt ihn flackern, und ein ganzes Feld davon macht kleine Schrift schwer lesbar. Halte die Wörter in einem ruhigeren Bereich des Bildes, dünne die Partikel dahinter aus oder setz die Schrift so groß, dass ein vorbeiziehender Punkt keine Rolle spielt. Füg nie ein Glühen hinter den Wörtern hinzu, um sie zu retten: Ein ruhigerer Hintergrund erledigt das besser. [Text auf Verläufen](https://gradiently.design/de/guide/text-on-gradient) behandelt Kontrast auf bewegten Hintergründen.

Ein Event-Post im Hochformat mit dem Text Abendessen zur Bonfire Night, 5. November, auf einem dunklen, warmen Hintergrund mit Glutpartikeln

Glut passt zu einem Abendevent: warme Punkte, die langsam durch einen dunklen Grund steigen, mit dem Datum im ruhigen oberen Bereich.

Eine vertikale Story mit dem Text Langsame Morgen für ein Café namens The Reading Room, mit blassen Staubpartikeln in weichem Licht

Staub für eine Café-Story: kaum sichtbar, fängt das Licht, kreuzt nie die Wörter.

## Wo sich ein Partikeleffekt lohnt

Partikel belohnen einen Bildschirm, den Menschen länger als eine Sekunde ansehen. Bei einem Feed-Post, über den man hinwegscrollt, fallen sie kaum auf; bei einer Story, einem Bildschirm im Laden oder einem Website-Hero geben sie dem Auge etwas Ruhiges zum Verweilen.

- **Hintergründe für Stories und Reels**, bei denen ein bildschirmfüllendes Bild mehrere Sekunden steht.
- **Bildschirme vor Ort**: Menüboards, Empfangsbildschirme und Schaufensterdisplays, die den ganzen Tag laufen. Siehe [Ambient Video](https://gradiently.design/de/guide/ambient-video).
- **Website-Heros**, als leichte Ebene über einem Verlauf, angehalten für Besucher, die reduzierte Bewegung bevorzugen.
- **Countdowns für Events und Launches**, bei denen Glut oder Sterne die Stimmung des Abends vorwegnehmen.
- **Smartphone- und Desktop-Hintergrundbilder**, bei denen langsamer Staub oder Sterne nie ermüden. Siehe [Live Wallpaper](https://gradiently.design/de/guide/live-wallpaper).

## Partikeleffekte loopen und exportieren

1. **Den Loop nahtlos machen** Partikel, die einen Rand verlassen, sollten am gegenüberliegenden Rand wieder erscheinen, damit das letzte Bild ins erste übergeht. [Nahtlose Loops](https://gradiently.design/de/guide/seamless-loop-video) erklärt die Methode.
2. **MP4 exportieren, nicht GIF** GIF hat nur 256 Farben pro Bild, und winzige bewegte Punkte auf einem weichen Verlauf werden zu gesprenkeltem Rauschen. MP4 kommt damit weit besser zurecht.
3. **Dem Video genug Qualität geben** Feine bewegte Details sind schwer zu komprimieren. Verschmieren oder verschwinden die Partikel, exportiere in höherer Qualität oder reduziere ihre Zahl.
4. **Auf dem Smartphone prüfen** Plattformen komprimieren Uploads neu. Poste zuerst privat oder schick es dir selbst und prüf, ob die Partikel überlebt haben.

Banding und Partikel treten auf dunklen Hintergründen oft zusammen auf; [Banding in Verläufen](https://gradiently.design/de/guide/gradient-banding) zeigt die Lösungen. [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4) erklärt, warum Video bei bewegten Details gewinnt.

## Ein Partikeleffekt in CSS und Canvas

Auf einer Website zeichnest du eine leichte Partikelebene am besten auf einem `canvas`-Element über dem Hintergrund, mit `pointer-events: none`, damit es nie Klicks blockiert. Dieses Skript zeichnet treibenden Staub und respektiert Besucher, die um weniger Bewegung gebeten haben: Sie sehen die Partikel still.

```js
const canvas = document.querySelector('canvas.dust');
const ctx = canvas.getContext('2d');
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
let w = 0, h = 0;

function resize() {
  w = canvas.clientWidth;
  h = canvas.clientHeight;
  canvas.width = w * dpr;
  canvas.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  draw();
}

const dust = Array.from({ length: 70 }, () => ({
  x: Math.random(), y: Math.random(),
  r: 0.5 + Math.random() * 1.5,        // mostly tiny
  speed: 0.00002 + Math.random() * 0.00006,
  alpha: 0.15 + Math.random() * 0.45,
}));

function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#fde68a';
  for (const p of dust) {
    ctx.globalAlpha = p.alpha;
    ctx.beginPath();
    ctx.arc(p.x * w, p.y * h, p.r, 0, Math.PI * 2);
    ctx.fill();
  }
}

let last = performance.now();
function tick(now) {
  const dt = now - last; last = now;
  for (const p of dust) {
    p.y -= p.speed * dt;               // drift upwards
    if (p.y < -0.02) p.y = 1.02;       // wrap to the bottom
  }
  draw();
  requestAnimationFrame(tick);
}

window.addEventListener('resize', resize);
resize();
if (!reduce) requestAnimationFrame(tick);
```

Siebzig warme Staubpunkte, die nach oben treiben. Gib dem Canvas `position: absolute; inset: 0; pointer-events: none;` über deinem Hero.

Halte die Anzahl auf Smartphones überschaubar, denn jedes Partikel kostet Akku. [Prefers reduced motion](https://gradiently.design/de/guide/reduced-motion) erklärt die Media Query ausführlich.

## Partikel in Gradiently

In Gradiently sind Partikel Teil eines Marks: feine Körnung, die in den eigenen Farben des Marks treibt, sodass sie getönt dazugehören, statt weiß aufgeklebt zu sein. Wenn du mit Pro ein bewegtes Design exportierst, kannst du die eigenen Partikel des Designs behalten, sie abschalten oder einen anderen Stil ausprobieren, etwa Staub, Sterne, Nebel, Schwarm, Seide oder Glut. Wähl die Bewegung Still, und der Hintergrund steht, während sich nur die Partikel bewegen. Loops werden nahtlos mit 5 bis 30 Sekunden exportiert, und ein Standbild-Export hält die Partikel genau so fest, wie sie im Design ruhen.

## FAQ

### Was ist ein Partikeleffekt?

Eine Animation aus vielen kleinen Punkten, die sich jeweils unabhängig bewegen, um in einem Design oder Video Staub, Funken, Glut, Schnee, Sterne oder Nebel zu erzeugen.

### Wie wirkt ein Partikeleffekt dezent?

Nutze weniger Partikel, meist winzig, langsam bewegt, in gemischten Größen und in den Farben des Hintergrunds getönt, und halte sie hinter Text ruhiger.

### Exportiere ich eine Partikelanimation als GIF oder MP4?

Als MP4. GIF ist auf 256 Farben pro Bild begrenzt, sodass feine Partikel auf einem Verlauf zu gesprenkeltem Rauschen werden, während MP4 sie glatt hält.

### Kann ich einen Partikeleffekt mit CSS bauen?

Ein paar Partikel lassen sich mit CSS animieren, aber ein Canvas-Element mit etwas JavaScript bewältigt Dutzende oder Hunderte weit effizienter. Stopp die Bewegung für Besucher, die reduzierte Bewegung bevorzugen.