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

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

Nogle få prikker af drivende lys kan få en flad baggrund til at føles som et sted. For mange får den til at ligne en pauseskærm. Sådan vælger, justerer og eksporterer du partikler, så de giver stemning og intet andet.

## The short version

- En partikeleffekt er en animation af mange små punkter, hver med sin egen position, størrelse, hastighed og gennemsigtighed, som støv, gnister, gløder, sne eller stjerner.
- Partikler ser bedst ud, når de er få, små, langsomme og varierede i størrelse, og de største og klareste bruges sparsomt.
- Hvis du holder partikler væk fra tekst, eller gør dem dæmpede bag den, bevarer du læsbarheden.
- Fine bevægelige partikler er svære for videokomprimering, så eksportér partikelloops som MP4 i god kvalitet frem for som GIF.
- På hjemmesider skal partikelanimationer stoppe for besøgende, der beder om reduceret bevægelse.

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.

| Partikelstil | Hvordan den bevæger sig | Stemning | Passer til |
| --- | --- | --- | --- |
| Støv | Lille, driver langsomt i alle retninger | Rolig, varm, filmisk | Kaffe, bøger, interiør, rolige brands |
| Gløder | Små og klare, stiger og falmer | Varm, energisk | Restauranter, musik, vinterevents |
| Stjerner | Stille eller næsten ubevægelige, glimter | Nat, undren | Sene events, astronomi, søvn, lanceringer |
| Tåge | Stor, blød, meget svag, glider sidelæns | Mystisk, blød | Wellness, skønhed, parfume |
| Sværm | Bevæger sig sammen i løse grupper | Levende, travl | Tech, data, natur |
| Sne | Falder jævnt med et let sving | Sæsonpræget, hyggelig | Vinterkampagner, helligdagsopslag |

Seks partikelstile og hvor hver hører hjemme. Vælg den bevægelse, der passer til følelsen, ikke den, der ser mest imponerende ud.

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

### Pauseskærm

- Hundredvis af store, klare prikker
- Alle samme størrelse og hastighed
- Hurtig, travl bevægelse
- Ren hvid på alle baggrunde
- Driver lige gennem overskriften

### Stemning

- Et moderat antal, mest bittesmå
- Blandede størrelser: mange små, få større og blødere
- Så langsomt, at man må kigge to gange
- Farvet i baggrundens egne farver
- Tyndere eller roligere, hvor ordene står

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

- Forkullet jord: #1a0f0a
- Dyb rust: #7c2d12
- Glød: #ea580c
- Gnist: #fdba74
- Hvid kerne: #fff7ed

En palet af gløder. Partiklerne får de to lyseste toner, så de gløder som en del af baggrunden i stedet for at ligge ovenpå i hvidt.

## 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](https://gradiently.design/da/guide/text-on-gradient) gennemgår kontrast på bevægelige baggrunde.

Et event-opslag i højformat med teksten Bålaften med middag, 5. november, over en mørk, varm baggrund med glødepartikler

Gløder passer til en aftenevent: varme prikker, der stiger langsomt gennem en mørk bund, med datoen i det rolige øvre felt.

En lodret story med teksten Langsomme morgener for en café kaldet The Reading Room, med svage støvpartikler i blødt lys

Støv til en cafés story: knap synligt, griber lyset, krydser aldrig ordene.

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

## Sådan looper og eksporterer du partikeleffekter

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

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

Halvfjerds prikker varmt støv, der driver opad. Giv canvas `position: absolute; inset: 0; pointer-events: none;` over din hero.

Hold antallet moderat på telefoner, hvor hver partikel koster batteri. [Foretrækker reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion) 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.

## FAQ

### Hvad er en partikeleffekt?

En animation af mange små punkter, der hver bevæger sig uafhængigt, brugt til at skabe støv, gnister, gløder, sne, stjerner eller tåge i et design eller en video.

### Hvordan får jeg en partikeleffekt til at se diskret ud?

Brug færre partikler, mest bittesmå, der bevæger sig langsomt, i blandede størrelser og farvet i baggrundens egne farver, og hold dem roligere bag tekst.

### Skal jeg eksportere en partikelanimation som GIF eller MP4?

MP4. GIF er begrænset til 256 farver pr. billede, så fine partikler på en gradient bliver til spættet støj, mens MP4 holder dem bløde.

### Kan jeg lave en partikeleffekt med CSS?

Nogle få partikler kan animeres med CSS, men et canvas-element med lidt JavaScript klarer dusinvis eller hundredvis langt mere effektivt. Stop bevægelsen for besøgende, der foretrækker reduceret bevægelse.