Partikeleffekte: Staub, Funken und Licht in bewegten Designs

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.

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.

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.

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 behandelt Kontrast auf bewegten Hintergründen.

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.
• 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.

Partikeleffekte loopen und exportieren

1. 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 erklärt die Methode.

2. 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. 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. 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 zeigt die Lösungen. GIF oder 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.

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);

Halte die Anzahl auf Smartphones überschaubar, denn jedes Partikel kostet Akku. Prefers 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.