Partikeleffekter: støv, gnister og lys i bevægeligt design

En partikeleffekt er en animation af mange små punkter, der hver bevæger sig for sig: støv, der svæver i en lysstråle, gløder, der stiger op fra et bål, stjerner, sne, gnister eller tåge. I et bevægeligt design giver partikler dybde og stemning til en baggrund uden at konkurrere med ordene, så længe du holder dem få, små og langsomme. Kunsten er tilbageholdenhed: partikler skal være noget, folk mærker, før de lægger mærke til det.

Sådan virker en partikeleffekt

Hver partikel er et lille sæt tal: hvor den er, hvor stor den er, hvor hurtigt og i hvilken retning den bevæger sig, hvor synlig den er, og nogle gange hvor længe den lever. Effekten opstår af hundredvis af en smule forskellige partikler, der følger den samme enkle regel. Ændr reglen, og de samme prikker får en helt anden stemning.

Sådan gør du partikler diskrete

Forskellen på stemning og en pauseskærm er næsten altid mængde og hastighed. Disse indstillinger holder partiklerne i baggrunden, hvor de hører hjemme.

Variér størrelse og gennemsigtighed for at antyde dybde: små, skarpe, svage partikler virker langt væk, og nogle få større, blødere virker tæt på linsen. Nærmere partikler bør også bevæge sig lidt hurtigere, og det er samme trick som bag parallaks.

Partikler og tekst

Et klart punkt, der driver hen over et bogstav, får det til at flimre, og et felt af dem gør lille skrift svær at læse. Hold ordene i et roligere område af billedet, tynd partiklerne ud bag dem, eller gør skriften stor nok til, at et forbipasserende punkt ikke betyder noget. Tilføj aldrig en glød bag ordene for at redde dem: en roligere baggrund gør det bedre. Tekst på en gradient gennemgår kontrast på bevægelige baggrunde.

Hvor en partikeleffekt fortjener sin plads

Partikler belønner en skærm, folk ser på i mere end ét sekund. På et opslag i et feed, der scrolles forbi, registreres de næsten ikke; på en story, en skærm i en butik eller en hjemmesides hero giver de øjet noget roligt at hvile på.

• Baggrunde til Stories og Reels, hvor et fuldskærmsbillede holdes i flere sekunder.
• Skærme i lokaler: menutavler, receptionsskærme og vinduesdisplays, der kører i loop hele dagen. Se ambient video.
• Hjemmesiders hero, som et let lag over en gradient, stoppet for besøgende, der foretrækker reduceret bevægelse.
• Nedtællinger til events og lanceringer, hvor gløder eller stjerner sætter selve aftenens stemning.
• Baggrunde til telefon og computer, hvor langsomt støv eller stjerner aldrig bliver kedelige. Se levende baggrund.

Sådan looper og eksporterer du partikeleffekter

1. 1

   Gør loopet sømløst

   Partikler, der forlader den ene kant, skal dukke op igen ved den modsatte, så sidste billede flyder over i det første. Sømløse loops forklarer metoden.

2. 2

   Eksportér MP4, ikke GIF

   GIF har kun 256 farver pr. billede, og små bevægelige prikker på en blød gradient bliver til spættet støj. MP4 håndterer dem langt bedre.

3. 3

   Giv videoen nok kvalitet

   Fine bevægelige detaljer er svære at komprimere. Hvis partikler udtværes eller forsvinder, så eksportér i højere kvalitet eller brug færre.

4. 4

   Tjek den på en telefon

   Platforme komprimerer uploads igen. Post privat eller send den til dig selv først, og sørg for, at partiklerne overlevede.

Banding og partikler optræder ofte sammen på mørke baggrunde; gradient-banding har løsningerne. GIF vs. MP4 forklarer, hvorfor video vinder ved bevægelige detaljer.

En partikeleffekt i CSS og canvas

På en hjemmeside tegnes et let partikellag bedst på et canvas-element lagt over baggrunden, med pointer-events: none, så det aldrig blokerer klik. Dette script tegner drivende støv og respekterer besøgende, der har bedt om mindre bevægelse: de ser partiklerne stå stille.

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å telefoner, hvor hver partikel koster batteri. Foretrækker reduceret bevægelse forklarer medieforespørgslen fuldt ud.

Partikler i Gradiently

I Gradiently er partikler en del af en Mark: fint korn, der driver i Markens egne farver, så de hører til i stedet for at være klistret på i hvidt. Når du eksporterer et bevægeligt design med Pro, kan du beholde designets egne partikler, slå dem fra eller prøve en anden stil som støv, stjerner, tåge, sværm, silke eller gløder. Vælg bevægelsen Stille, så holder baggrunden, mens kun partiklerne bevæger sig. Loops eksporteres sømløst fra 5 til 30 sekunder, og en stille eksport lader partiklerne lande præcis, som de hviler i designet.