Deeltjeseffecten: stof, vonken en licht in beweging

Een deeltjeseffect is een animatie van veel piepkleine punten die elk op zichzelf bewegen: stof dat in een lichtstraal zweeft, sintels die uit een vuur opstijgen, sterren, sneeuw, vonken of mist. In een bewegend ontwerp voegen deeltjes diepte en sfeer toe aan een achtergrond zonder met de woorden te concurreren, zolang je ze weinig, klein en langzaam houdt. De kunst is terughoudendheid: deeltjes moeten iets zijn wat mensen voelen voordat ze het opmerken.

Hoe een deeltjeseffect werkt

Elk deeltje is een kleine set getallen: waar het is, hoe groot het is, hoe snel en in welke richting het beweegt, hoe zichtbaar het is en soms hoe lang het leeft. Het effect komt van honderden licht verschillende deeltjes die dezelfde simpele regel volgen. Verander de regel en dezelfde stippen worden een totaal andere sfeer.

Deeltjes subtiel maken

Het verschil tussen sfeer en een screensaver is bijna altijd hoeveelheid en snelheid. Deze instellingen houden deeltjes op de achtergrond waar ze horen.

Varieer grootte en dekking om diepte te suggereren: kleine, scherpe, zwakke deeltjes lezen als ver weg, en een paar grotere, zachtere lezen als dicht bij de lens. Nabijere deeltjes moeten ook iets sneller bewegen, dezelfde truc als achter parallax.

Deeltjes en tekst

Een heldere vlek die over een letter drijft laat die flikkeren, en een veld ervan maakt kleine tekst moeilijk leesbaar. Houd de woorden in een rustiger deel van het beeld, dun de deeltjes erachter uit of maak de tekst groot genoeg dat een passerende vlek niet uitmaakt. Voeg nooit een gloed achter de woorden toe om ze te redden: een rustigere achtergrond doet het beter. Tekst op een verloop behandelt contrast in bewegende achtergronden.

Waar een deeltjeseffect zijn plaats verdient

Deeltjes belonen een scherm waar mensen langer dan een seconde naar kijken. Op een feedbericht waar je langsscrolt vallen ze nauwelijks op; op een story, een scherm in een winkel of een website-hero geven ze het oog iets stils om op te rusten.

• Achtergronden voor stories en Reels, waar een beeldvullend frame meerdere seconden blijft staan.
• Schermen op locaties: menuborden, receptieschermen en etalageschermen die de hele dag loopen. Zie ambient video.
• Website-heroes, als lichte laag over een verloop, gestopt voor bezoekers die minder beweging verkiezen.
• Aftellers voor evenementen en lanceringen, waar sintels of sterren de sfeer van de avond zelf bepalen.
• Telefoon- en desktopachtergronden, waar langzaam stof of sterren nooit vermoeien. Zie live wallpaper.

Deeltjeseffecten loopen en exporteren

1. 1

   Maak de loop naadloos

   Deeltjes die één rand verlaten moeten aan de tegenoverliggende rand weer verschijnen, zodat het laatste frame in het eerste overvloeit. Naadloze loops legt de methode uit.

2. 2

   Exporteer MP4, geen GIF

   GIF heeft maar 256 kleuren per frame, en kleine bewegende stippen op een zacht verloop worden gespikkelde ruis. MP4 verwerkt ze veel beter.

3. 3

   Geef de video genoeg kwaliteit

   Fijn bewegend detail is lastig te comprimeren. Als deeltjes uitsmeren of verdwijnen, exporteer dan in hogere kwaliteit of verminder hoeveel het er zijn.

4. 4

   Controleer het op een telefoon

   Platforms comprimeren uploads opnieuw. Plaats privé of stuur het eerst naar jezelf, en zorg dat de deeltjes het hebben overleefd.

Banding en deeltjes komen vaak samen voor op donkere achtergronden; verloopbanding heeft de oplossingen. GIF versus MP4 legt uit waarom video wint voor bewegend detail.

Een deeltjeseffect in CSS en canvas

Op een website teken je een lichte deeltjeslaag het best op een canvas-element over de achtergrond, met pointer-events: none zodat het nooit klikken blokkeert. Dit script tekent drijvend stof en respecteert bezoekers die om minder beweging hebben gevraagd: zij zien de deeltjes stilstaan.

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

Houd het aantal bescheiden op telefoons, waar elk deeltje batterij kost. Prefers reduced motion legt de media query volledig uit.

Deeltjes in Gradiently

In Gradiently zijn deeltjes onderdeel van een Mark: fijne korrel die in de eigen kleuren van de Mark drijft, dus ze zijn getint om erbij te horen in plaats van in wit erop geplakt. Als je een bewegend ontwerp met Pro exporteert, kun je de eigen deeltjes van het ontwerp houden, uitzetten of een andere stijl proberen zoals stof, sterren, mist, zwerm, zijde of sintels. Kies de beweging Still en de achtergrond blijft staan terwijl alleen de deeltjes bewegen. Loops exporteren naadloos van 5 tot 30 seconden, en een stilstaande export laat de deeltjes precies neerkomen zoals ze in het ontwerp liggen.