# Hiukkasefektit: pölyä, kipinöitä ja valoa liikkuvaan designiin

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

Muutama liikkuva valopiste voi saada tasaisen taustan tuntumaan paikalta. Liian moni tekee siitä näytönsäästäjän. Näin valitset, säädät ja viet hiukkaset pelkäksi tunnelman luojaksi.

## The short version

- Hiukkasefekti koostuu monista pienistä pisteistä, joilla kullakin on oma sijainti, koko, nopeus ja peittävyys. Ne voivat olla pölyä, kipinöitä, hiillosta, lunta tai tähtiä.
- Hiukkaset näyttävät parhailta, kun niitä on vähän ja ne ovat pieniä, hitaita ja erikokoisia. Käytä suurimpia ja kirkkaimpia säästeliäästi.
- Luettavuus säilyy, kun hiukkaset pysyvät poissa tekstin edestä tai ovat sen takana rauhallisempia.
- Hienot liikkuvat hiukkaset ovat videopakkaukselle vaikeita. Vie hiukkassilmukat hyvälaatuisena MP4-videona GIFin sijaan.
- Verkkosivun hiukkasanimaatioiden pitää pysähtyä kävijöillä, jotka ovat valinneet vähennetyn liikkeen.

**Hiukkasefekti** on animaatio, jossa monet pienet pisteet liikkuvat itsenäisesti: pöly leijuu valonsäteessä, hiillos nousee tulesta, tai kuvassa näkyy tähtiä, lunta, kipinöitä tai sumua. Liikkuvassa designissa hiukkaset tuovat taustaan syvyyttä ja tunnelmaa kilpailematta sanojen kanssa, kunhan niitä on vähän ja ne liikkuvat pieninä ja hitaina. Taito on pidättyvyydessä: hiukkasten pitäisi tuntua ennen kuin ne huomataan.

## Miten hiukkasefekti toimii

Jokainen hiukkanen on pieni joukko lukuja: missä se on, kuinka suuri se on, mihin suuntaan ja kuinka nopeasti se liikkuu, kuinka näkyvä se on ja joskus kuinka kauan se elää. Efekti syntyy sadoista hieman erilaisista hiukkasista, jotka noudattavat samaa yksinkertaista sääntöä. Muuta sääntöä, ja samat pisteet luovat aivan erilaisen tunnelman.

| Hiukkastyyli | Liike | Tunnelma | Sopii |
| --- | --- | --- | --- |
| Pöly | Pientä, leijuu hitaasti eri suuntiin | Hiljainen, lämmin, elokuvallinen | Kahvi, kirjat, sisustus, rauhalliset brändit |
| Hiillos | Pientä ja kirkasta, nousee ja häipyy | Lämmin, energinen | Ravintolat, musiikki, talvitapahtumat |
| Tähdet | Paikallaan tai lähes liikkumatta, tuikkivat | Yö, ihmettely | Iltatapahtumat, tähtitiede, uni, lanseeraukset |
| Sumu | Suurta, pehmeää ja himmeää, liukuu sivuttain | Salaperäinen, pehmeä | Hyvinvointi, kauneus, hajuvedet |
| Parvi | Liikkuu yhdessä väljissä ryhmissä | Elävä, vilkas | Teknologia, data, luonto |
| Lumi | Putoaa tasaisesti hieman keinuen | Vuodenaikaan sopiva, kodikas | Talvikampanjat, joulunajan julkaisut |

Kuusi hiukkastyyliä ja niiden käyttökohteet. Valitse tunnelmaan sopiva liike, älä näyttävintä.

## Tee hiukkasista hienovaraisia

Tunnelman ja näytönsäästäjän ero on lähes aina määrässä ja nopeudessa. Nämä asetukset pitävät hiukkaset taustalla, jonne ne kuuluvat.

### Näytönsäästäjä

- Satoja suuria, kirkkaita pisteitä
- Kaikki samankokoisia ja yhtä nopeita
- Nopea, levoton liike
- Puhdasta valkoista joka taustalla
- Liike suoraan otsikon läpi

### Tunnelma

- Kohtuullinen määrä, enimmäkseen hyvin pieniä
- Vaihtelevia kokoja: paljon pieniä, muutama suuri ja pehmeä
- Niin hidasta, että liikkeen huomaa vasta katsomalla uudelleen
- Sävytetty taustan omilla väreillä
- Harvempaa tai rauhallisempaa sanojen kohdalla

Vaihtele kokoa ja peittävyyttä syvyyden luomiseksi: pienet, terävät ja himmeät hiukkaset näyttävät kaukaisilta, muutama suurempi ja pehmeämpi taas läheiseltä. Läheisten hiukkasten tulisi myös liikkua hieman nopeammin. Sama keino luo [parallaksin](https://gradiently.design/fi/guide/parallax-effect).

- Hiiltynyt pohja: #1a0f0a
- Syvä ruoste: #7c2d12
- Hiillos: #ea580c
- Kipinä: #fdba74
- Kuuma ydin: #fff7ed

Hiillospaletti. Hiukkaset käyttävät kahta vaaleinta sävyä, joten ne hehkuvat osana taustaa eivätkä valkoisena sen päällä.

## Hiukkaset ja teksti

Kirjaimen yli kulkeva kirkas piste saa sen välkkymään, ja kokonainen pistekenttä tekee pienestä tekstistä vaikeasti luettavaa. Pidä sanat kuvan rauhallisella alueella, harvenna hiukkasia niiden takana tai suurenna tekstiä niin, ettei ohittava piste haittaa. Älä pelasta sanoja niiden taakse lisättävällä hehkulla: rauhallisempi tausta toimii paremmin. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) käsittelee liikkuvien taustojen kontrastia.

Tapahtuman pystyjulkaisu tekstillä Kokkoillan illallinen, 5. marraskuuta, tummalla lämpimällä hiukkastaustalla

Hiillos sopii iltatapahtumaan: lämpimät pisteet nousevat hitaasti tummalla pohjalla ja päivämäärä pysyy rauhallisessa yläosassa.

The Reading Room -kahvilan pystytarina tekstillä Hitaita aamuja ja himmeillä pölyhiukkasilla pehmeässä valossa

Pöly kahvilan tarinassa: tuskin näkyvää, valoon tarttuvaa, ei koskaan sanojen yli kulkevaa.

## Missä hiukkasefekti tuo arvoa

Hiukkaset palkitsevat katseen, joka viipyy näytöllä yli sekunnin. Ohi vieritettävässä syötejulkaisussa niitä tuskin huomaa. Tarinassa, liikkeen näytöllä tai verkkosivun pääosiossa ne antavat silmälle rauhallisen lepopaikan.

- **Tarinoiden ja Reels-videoiden taustat**, joissa koko näytön kuva pysyy esillä useita sekunteja.
- **Tilojen näytöt**: ruokalistanäytöt, vastaanoton ruudut ja ikkunanäytöt, jotka pyörivät koko päivän. Katso [tunnelmavideo](https://gradiently.design/fi/guide/ambient-video).
- **Verkkosivun pääosiot**, kevyenä kerroksena liukuvärin päällä. Pysäytä liike vähennetyn liikkeen valinneille kävijöille.
- **Tapahtumien ja lanseerausten lähtölaskennat**, joissa hiillos tai tähdet luovat illan tunnelman.
- **Puhelimen ja tietokoneen taustakuvat**, joissa hidas pöly tai tähtien liike ei väsytä. Katso [elävä taustakuva](https://gradiently.design/fi/guide/live-wallpaper).

## Hiukkasefektin silmukka ja vienti

1. **Tee silmukasta saumaton** Yhdestä reunasta poistuvien hiukkasten tulisi ilmestyä vastakkaiselle reunalle, jotta viimeinen ruutu jatkuu ensimmäiseen. [Saumattomat silmukat](https://gradiently.design/fi/guide/seamless-loop-video) selittää menetelmän.
2. **Vie MP4, älä GIF** GIF sisältää vain 256 väriä ruutua kohti. Pienet liikkuvat pisteet pehmeällä liukuvärillä muuttuvat siksi kirjavaksi kohinaksi. MP4 käsittelee niitä paljon paremmin.
3. **Anna videolle riittävästi laatua** Hienoja liikkuvia yksityiskohtia on vaikea pakata. Jos hiukkaset suttaantuvat tai katoavat, vie paremmalla laadulla tai vähennä niiden määrää.
4. **Tarkista puhelimella** Alustat pakkaavat ladatut videot uudelleen. Julkaise ensin yksityisesti tai lähetä video itsellesi ja varmista, että hiukkaset säilyivät.

Sävyraidat ja hiukkaset esiintyvät usein yhdessä tummilla taustoilla. [Liukuvärien sävyraidat](https://gradiently.design/fi/guide/gradient-banding) tarjoaa korjaukset. [GIF ja MP4](https://gradiently.design/fi/guide/gif-vs-mp4) kertoo, miksi video voittaa liikkuvissa yksityiskohdissa.

## Hiukkasefekti CSS:llä ja canvas-elementillä

Verkkosivun kevyt hiukkaskerros kannattaa piirtää taustan päälle asetettuun `canvas`-elementtiin. `pointer-events: none` varmistaa, ettei se estä klikkauksia. Tämä skripti piirtää leijuvaa pölyä ja huomioi vähennetyn liikkeen valinneet kävijät: he näkevät hiukkaset paikallaan.

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

Seitsemänkymmentä lämmintä pölypistettä leijumassa ylöspäin. Aseta canvas pääosion päälle tyylillä `position: absolute; inset: 0; pointer-events: none;`.

Pidä määrä maltillisena puhelimissa, joissa jokainen hiukkanen kuluttaa akkua. [Vähennetyn liikkeen opas](https://gradiently.design/fi/guide/reduced-motion) selittää mediakyselyn kokonaan.

## Hiukkaset Gradientlyssä

Gradientlyssä hiukkaset kuuluvat Markiin: hieno rakeisuus liikkuu Markin omissa väreissä, jolloin se sopii taustaan eikä näytä päälle liimatulta valkoiselta. Kun viet liikkuvan designin Prolla, voit säilyttää sen omat hiukkaset, poistaa ne tai kokeilla esimerkiksi pölyä, tähtiä, sumua, parvea, silkkiä tai hiillosta. Valitse paikallaan pysyvä liike, jolloin tausta pysyy paikoillaan ja vain hiukkaset liikkuvat. Silmukat viedään saumattomina 5-30 sekunnin pituisina. Kuvavienti säilyttää hiukkaset juuri sellaisina kuin ne ovat designissa.

## FAQ

### Mikä on hiukkasefekti?

Animaatio, joka koostuu monista itsenäisesti liikkuvista pisteistä. Niillä luodaan pölyä, kipinöitä, hiillosta, lunta, tähtiä tai sumua designiin tai videoon.

### Miten teen hiukkasefektistä hienovaraisen?

Käytä vähemmän hiukkasia, enimmäkseen hyvin pieniä ja hitaasti liikkuvia. Vaihtele kokoja, sävytä ne taustan omilla väreillä ja rauhoita liikettä tekstin takana.

### Kannattaako hiukkasanimaatio viedä GIFinä vai MP4:nä?

MP4:nä. GIF rajoittuu 256 väriin ruutua kohti, joten hienot hiukkaset liukuvärillä muuttuvat kirjavaksi kohinaksi. MP4 säilyttää ne pehmeinä.

### Voiko hiukkasefektin tehdä CSS:llä?

Muutaman hiukkasen voi animoida CSS:llä, mutta canvas-elementti ja pieni määrä JavaScriptiä käsittelevät kymmeniä tai satoja paljon tehokkaammin. Pysäytä liike kävijöillä, jotka ovat valinneet vähennetyn liikkeen.