Partikkeleffekter: støv, gnister og lys i design med bevegelse

En partikkeleffekt er en animasjon laget av mange bittesmå punkter som beveger seg hver for seg: støv som svever i en lysstråle, glør som stiger fra et bål, stjerner, snø, gnister eller tåke. I et design med bevegelse gir partikler dybde og stemning til en bakgrunn uten å konkurrere med ordene, så lenge du holder dem få, små og langsomme. Kunsten er tilbakeholdenhet: partikler skal være noe folk kjenner før de legger merke til det.

Slik virker en partikkeleffekt

Hver partikkel er et lite sett tall: hvor den er, hvor stor den er, hvor fort og i hvilken retning den beveger seg, hvor synlig den er, og noen ganger hvor lenge den lever. Effekten oppstår når hundrevis av litt forskjellige partikler følger den samme enkle regelen. Endre regelen, og de samme prikkene gir en helt annen stemning.

Slik gjør du partiklene diskrete

Forskjellen på stemning og en skjermsparer handler nesten alltid om mengde og fart. Disse innstillingene holder partiklene i bakgrunnen, der de hører hjemme.

Varier størrelse og dekkevne for å antyde dybde: små, skarpe, svake partikler leses som langt unna, og noen få større, mykere leses som nær linsen. Nære partikler bør også bevege seg litt raskere, som er det samme trikset som ligger bak parallakse.

Partikler og tekst

En klar prikk som driver over en bokstav får den til å flimre, og et helt felt av dem gjør liten skrift vanskelig å lese. Hold ordene i et roligere område av rammen, tynn ut partiklene bak dem, eller gjør skriften så stor at en forbipasserende prikk ikke betyr noe. Legg aldri en glød bak ordene for å redde dem: en roligere bakgrunn gjør jobben bedre. Tekst på en gradient dekker kontrast på bakgrunner i bevegelse.

Der en partikkeleffekt fortjener plassen

Partikler lønner seg på en skjerm folk ser på i mer enn ett sekund. På et feedinnlegg som scrolles forbi, registreres de knapt; på en story, en skjerm i en butikk eller en hero på et nettsted gir de øyet noe stille å hvile på.

• Bakgrunner til Stories og Reels, der en ramme i fullskjerm vises i flere sekunder.
• Skjermer i lokaler: menytavler, resepsjonsskjermer og vindusutstillinger som looper hele dagen. Se stemningsvideo.
• Heroer på nettsteder, som et lett lag over en gradient, stoppet for besøkende som foretrekker redusert bevegelse.
• Nedtellinger til arrangementer og lanseringer, der glør eller stjerner setter stemningen for selve kvelden.
• Bakgrunnsbilder til mobil og datamaskin, der langsomt støv eller stjerner aldri blir kjedelige. Se levende bakgrunnsbilde.

Slik looper og eksporterer du partikkeleffekter

1. 1

   Gjør loopen sømløs

   Partikler som forsvinner ut av én kant, bør dukke opp igjen i motsatt kant, så den siste rammen glir over i den første. Sømløse loops forklarer metoden.

2. 2

   Eksporter MP4, ikke GIF

   GIF har bare 256 farger per ramme, og bittesmå prikker i bevegelse på en myk gradient blir til spettet støy. MP4 håndterer dem langt bedre.

3. 3

   Gi videoen nok kvalitet

   Fine detaljer i bevegelse er vanskelige å komprimere. Hvis partiklene smøres ut eller forsvinner, eksporterer du i høyere kvalitet eller reduserer antallet.

4. 4

   Sjekk den på en mobil

   Plattformer komprimerer opplastinger på nytt. Publiser privat eller send den til deg selv først, og sjekk at partiklene overlevde.

Stripedannelse og partikler dukker ofte opp sammen på mørke bakgrunner; stripedannelse i gradienter har løsningene. GIF vs MP4 forklarer hvorfor video vinner for detaljer i bevegelse.

En partikkeleffekt i CSS og canvas

På et nettsted tegnes et lett partikkellag best på et canvas-element lagt over bakgrunnen, med pointer-events: none så det aldri blokkerer klikk. Dette skriptet tegner drivende støv og respekterer besøkende som har bedt om mindre bevegelse: de ser partiklene i ro.

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

Hold antallet moderat på mobil, der hver partikkel koster batteri. Prefers reduced motion forklarer mediespørringen i sin helhet.

Partikler i Gradiently

I Gradiently er partikler en del av en Mark: fint korn som driver i Markens egne farger, så de er tonet for å høre til i stedet for å være limt på i hvitt. Når du eksporterer et design med bevegelse med Pro, kan du beholde designets egne partikler, slå dem av eller prøve en annen stil, som Støv, Stjerner, Tåke, Sverm, Silke eller Glør. Velg bevegelsen Stille, så holder bakgrunnen seg mens bare partiklene beveger seg. Loops eksporteres sømløst fra 5 til 30 sekunder, og en stillbildeeksport legger partiklene nøyaktig slik de hviler i designet.