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

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

Noen få drivende lysprikker kan få en flat bakgrunn til å føles som et sted. For mange får den til å se ut som en skjermsparer. Slik velger, justerer og eksporterer du partikler så de gir stemning og ingenting annet.

## The short version

- En partikkeleffekt er en animasjon laget av mange små punkter, hvert med sin egen posisjon, størrelse, fart og dekkevne, som støv, gnister, glør, snø eller stjerner.
- Partikler ser best ut når de er få, små og langsomme og varierer i størrelse, med de største og klareste brukt sparsomt.
- Å holde partiklene unna teksten, eller roligere bak den, beskytter lesbarheten.
- Fine partikler i bevegelse er vanskelige for videokomprimering, så eksporter partikkelloops som MP4 i god kvalitet i stedet for som GIF.
- På nettsteder bør partikkelanimasjoner stoppe for besøkende som ber om redusert 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.

| Partikkelstil | Slik beveger den seg | Stemning | Passer til |
| --- | --- | --- | --- |
| Støv | Bittesmått, driver sakte i alle retninger | Stille, varm, filmatisk | Kaffe, bøker, interiør, rolige merkevarer |
| Glør | Små og klare, stiger og falmer | Varm, energisk | Restauranter, musikk, vinterarrangementer |
| Stjerner | Stille eller så vidt i bevegelse, blinker | Natt, undring | Kveldsarrangementer, astronomi, søvn, lanseringer |
| Tåke | Store, myke, svært svake, glir sidelengs | Mystisk, myk | Velvære, skjønnhet, parfyme |
| Sverm | Beveger seg sammen i løse grupper | Levende, travel | Teknologi, data, natur |
| Snø | Faller jevnt med en lett svaiing | Sesongpreget, koselig | Vinterkampanjer, høytidsinnlegg |

Seks partikkelstiler og hvor hver av dem hører hjemme. Velg bevegelsen som passer følelsen, ikke den som ser mest imponerende ut.

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

### Skjermsparer

- Hundrevis av store, klare prikker
- Alle i samme størrelse og fart
- Rask, travel bevegelse
- Helt hvitt på alle bakgrunner
- Driver rett gjennom overskriften

### Stemning

- Et moderat antall, for det meste bittesmå
- Blandede størrelser: mange små, noen få større og mykere
- Så langsomme at du må se to ganger
- Tonet i bakgrunnens egne farger
- Tynnere eller roligere der ordene står

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

- Forkullet grunn: #1a0f0a
- Dyp rust: #7c2d12
- Glo: #ea580c
- Gnist: #fdba74
- Glødende kjerne: #fff7ed

En palett med glør. Partiklene tar de to lyseste tonene, så de gløder som en del av bakgrunnen i stedet for å ligge oppå den i hvitt.

## 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](https://gradiently.design/nb/guide/text-on-gradient) dekker kontrast på bakgrunner i bevegelse.

Et stående arrangementsinnlegg med teksten Kveldsmat ved bålet, 5. november, over en mørk, varm bakgrunn med glødpartikler

Glør passer et kveldsarrangement: varme prikker som stiger sakte gjennom en mørk grunn, med datoen i det rolige øvre feltet.

En vertikal story med teksten Rolige morgener for en kafé som heter The Reading Room, med svake støvpartikler i mykt lys

Støv til en kafé-story: så vidt synlig, fanger lyset og krysser aldri ordene.

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

## Slik looper og eksporterer du partikkeleffekter

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](https://gradiently.design/nb/guide/seamless-loop-video) forklarer metoden.
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. **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. **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](https://gradiently.design/nb/guide/gradient-banding) har løsningene. [GIF vs MP4](https://gradiently.design/nb/guide/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.

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

Sytti prikker av varmt støv som driver oppover. Gi canvas-elementet `position: absolute; inset: 0; pointer-events: none;` over heroen din.

Hold antallet moderat på mobil, der hver partikkel koster batteri. [Prefers reduced motion](https://gradiently.design/nb/guide/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.

## FAQ

### Hva er en partikkeleffekt?

En animasjon laget av mange små punkter som beveger seg hver for seg, brukt til å skape støv, gnister, glør, snø, stjerner eller tåke i et design eller en video.

### Hvordan får jeg en partikkeleffekt til å se diskret ut?

Bruk færre partikler, for det meste bittesmå, i langsom bevegelse, i blandede størrelser og tonet i bakgrunnens egne farger, og hold dem roligere bak teksten.

### Bør jeg eksportere en partikkelanimasjon som GIF eller MP4?

MP4. GIF er begrenset til 256 farger per ramme, så fine partikler på en gradient blir spettet støy, mens MP4 holder dem jevne.

### Kan jeg lage en partikkeleffekt med CSS?

Noen få partikler kan animeres med CSS, men et canvas-element med litt JavaScript håndterer dusinvis eller hundrevis langt mer effektivt. Stopp bevegelsen for besøkende som foretrekker redusert bevegelse.