# Deeltjeseffecten: stof, vonken en licht in beweging

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

Een paar vlokken zwevend licht laten een vlakke achtergrond als een plek voelen. Te veel laat het op een screensaver lijken. Zo kies, stem en exporteer je deeltjes zodat ze sfeer toevoegen en niets anders.

## The short version

- Een deeltjeseffect is een animatie van veel kleine punten, elk met een eigen positie, grootte, snelheid en dekking, zoals stof, vonken, sintels, sneeuw of sterren.
- Deeltjes zien er het best uit als ze weinig, klein, langzaam en gevarieerd in grootte zijn, waarbij de grootste en helderste spaarzaam worden gebruikt.
- Deeltjes uit de buurt van tekst houden, of stiller erachter, beschermt de leesbaarheid.
- Fijne bewegende deeltjes zijn lastig voor videocompressie, dus exporteer deeltjesloops als MP4 in goede kwaliteit in plaats van als GIF.
- Op websites moeten deeltjesanimaties stoppen voor bezoekers die om minder beweging vragen.

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.

| Deeltjesstijl | Hoe het beweegt | Sfeer | Past bij |
| --- | --- | --- | --- |
| Stof | Klein, drijft langzaam in elke richting | Stil, warm, filmisch | Koffie, boeken, interieurs, rustige merken |
| Sintels | Klein en helder, stijgt en vervaagt | Warm, energiek | Restaurants, muziek, winterevenementen |
| Sterren | Stil of nauwelijks bewegend, twinkelt | Nacht, verwondering | Late evenementen, sterrenkunde, slaap, lanceringen |
| Mist | Groot, zacht, heel zwak, schuift zijwaarts | Mysterieus, zacht | Welzijn, beauty, parfum |
| Zwerm | Beweegt samen in losse groepen | Levend, druk | Tech, data, natuur |
| Sneeuw | Valt gestaag met lichte zwaai | Seizoensgebonden, gezellig | Wintercampagnes, feestdagberichten |

Zes deeltjesstijlen en waar elk thuishoort. Kies de beweging die bij het gevoel past, niet degene die het indrukwekkendst oogt.

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

### Screensaver

- Honderden grote, heldere stippen
- Allemaal dezelfde grootte en snelheid
- Snelle, drukke beweging
- Zuiver wit op elke achtergrond
- Dwars door de kop heen driftend

### Sfeer

- Een bescheiden aantal, vooral piepklein
- Gemengde groottes: veel kleine, een paar grotere en zachtere
- Langzaam genoeg dat je twee keer moet kijken
- Getint in de eigen kleuren van de achtergrond
- Dunner of rustiger waar de woorden staan

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](https://gradiently.design/nl/guide/parallax-effect).

- Verkoold vlak: #1a0f0a
- Diep roest: #7c2d12
- Sintel: #ea580c
- Vonk: #fdba74
- Gloeiende kern: #fff7ed

Een sintelpalet. Deeltjes nemen de twee lichtste tinten, zodat ze gloeien als onderdeel van de achtergrond in plaats van er in wit bovenop te liggen.

## 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](https://gradiently.design/nl/guide/text-on-gradient) behandelt contrast in bewegende achtergronden.

Een staand evenementbericht met de tekst Vuurwerkavond-diner, 5 november, over een donkere warme achtergrond met sintels als deeltjes

Sintels passen bij een avondevenement: warme vlokken die langzaam door een donkere ondergrond stijgen, met de datum in het rustige bovengebied.

Een verticale story met de tekst Trage ochtenden voor een café genaamd The Reading Room, met zwak stof in zacht licht

Stof voor een café-story: nauwelijks zichtbaar, het licht vangend, nooit de woorden kruisend.

## 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](https://gradiently.design/nl/guide/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](https://gradiently.design/nl/guide/live-wallpaper).

## Deeltjeseffecten loopen en exporteren

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](https://gradiently.design/nl/guide/seamless-loop-video) legt de methode uit.
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. **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. **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](https://gradiently.design/nl/guide/gradient-banding) heeft de oplossingen. [GIF versus MP4](https://gradiently.design/nl/guide/gif-vs-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.

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

Zeventig vlokjes warm stof die omhoog drijven. Geef het canvas `position: absolute; inset: 0; pointer-events: none;` over je hero.

Houd het aantal bescheiden op telefoons, waar elk deeltje batterij kost. [Prefers reduced motion](https://gradiently.design/nl/guide/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.

## FAQ

### Wat is een deeltjeseffect?

Een animatie van veel kleine punten die elk onafhankelijk bewegen, gebruikt om stof, vonken, sintels, sneeuw, sterren of mist in een ontwerp of video te maken.

### Hoe laat ik een deeltjeseffect subtiel ogen?

Gebruik minder deeltjes, vooral piepklein, langzaam bewegend, in een mix van groottes en getint in de eigen kleuren van de achtergrond, en houd ze rustiger achter tekst.

### Moet ik een deeltjesanimatie als GIF of MP4 exporteren?

MP4. GIF is beperkt tot 256 kleuren per frame, dus fijne deeltjes op een verloop worden gespikkelde ruis, terwijl MP4 ze soepel houdt.

### Kan ik een deeltjeseffect maken met CSS?

Een paar deeltjes kun je met CSS animeren, maar een canvas-element met een beetje JavaScript verwerkt tientallen of honderden veel efficiënter. Stop de beweging voor bezoekers die minder beweging verkiezen.