Partikeleffekter: damm, gnistor och ljus i rörlig design

En partikeleffekt är en animation av många små punkter som var och en rör sig på egen hand: damm som svävar i en ljusstråle, glöd som stiger från en eld, stjärnor, snö, gnistor eller dis. I en rörlig design ger partiklar djup och atmosfär åt en bakgrund utan att tävla med orden, så länge du håller dem få, små och långsamma. Konsten är återhållsamhet: partiklar ska vara något folk känner innan de lägger märke till det.

Så fungerar en partikeleffekt

Varje partikel är en liten uppsättning tal: var den är, hur stor den är, hur snabbt och åt vilket håll den rör sig, hur synlig den är och ibland hur länge den lever. Effekten uppstår av hundratals något olika partiklar som följer samma enkla regel. Ändra regeln och samma prickar får en helt annan stämning.

Så gör du partiklar subtila

Skillnaden mellan atmosfär och skärmsläckare är nästan alltid mängd och hastighet. De här inställningarna håller partiklarna i bakgrunden där de hör hemma.

Variera storlek och opacitet för att antyda djup: små, skarpa, svaga partiklar läses som långt borta, och några större, mjukare läses som nära linsen. Närmare partiklar bör också röra sig lite snabbare, vilket är samma knep som ligger bakom parallax.

Partiklar och text

Ett ljust korn som driver över en bokstav får den att flimra, och ett fält av dem gör liten text svår att läsa. Håll orden i ett lugnare område av bilden, gör partiklarna glesare bakom dem eller sätt texten så stor att ett förbipasserande korn inte spelar roll. Lägg aldrig en glöd bakom orden för att rädda dem: en lugnare bakgrund gör jobbet bättre. Text på gradient går igenom kontrast i rörliga bakgrunder.

Där en partikeleffekt gör nytta

Partiklar belönar en skärm som folk tittar på längre än en sekund. På ett flödesinlägg som scrollas förbi syns de knappt; på en story, en skärm i en butik eller en webbplatshero ger de ögat något lugnt att vila på.

• Bakgrunder till stories och Reels, där en helskärmsbild hålls i flera sekunder.
• Skärmar i lokaler: menytavlor, receptionsskärmar och skyltfönster som loopar hela dagen. Se ambient video.
• Hjältar (hero) på webbplatser, som ett lätt lager över en gradient, stoppat för besökare som föredrar minskad rörelse.
• Nedräkningar till event och lanseringar, där glöd eller stjärnor sätter själva kvällens stämning.
• Bakgrundsbilder till mobil och dator, där långsamt damm eller stjärnor aldrig tröttar. Se levande bakgrundsbild.

Loopa och exportera partikeleffekter

1. 1

   Gör loopen sömlös

   Partiklar som lämnar en kant ska dyka upp igen vid motsatt kant, så att sista bildrutan flyter in i den första. Sömlösa loopar förklarar metoden.

2. 2

   Exportera MP4, inte GIF

   GIF har bara 256 färger per bildruta, och små rörliga prickar på en mjuk gradient blir prickigt brus. MP4 hanterar dem mycket bättre.

3. 3

   Ge videon tillräcklig kvalitet

   Fina rörliga detaljer är svåra att komprimera. Om partiklar smetas ut eller försvinner, exportera i högre kvalitet eller minska antalet.

4. 4

   Kontrollera den på en mobil

   Plattformar komprimerar uppladdningar på nytt. Publicera privat eller skicka den till dig själv först, och se till att partiklarna överlevde.

Bandning och partiklar dyker ofta upp tillsammans på mörka bakgrunder; gradientbandning har lösningarna. GIF eller MP4 förklarar varför video vinner för rörliga detaljer.

En partikeleffekt i CSS och canvas

På en webbplats ritas ett lätt partikellager bäst på ett canvas-element som läggs över bakgrunden, med pointer-events: none så att det aldrig blockerar klick. Det här skriptet ritar drivande damm och respekterar besökare som bett om mindre rörelse: de ser partiklarna stilla.

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

Håll antalet måttligt på mobiler, där varje partikel kostar batteri. Föredrar minskad rörelse förklarar mediafrågan i sin helhet.

Partiklar i Gradiently

I Gradiently är partiklar en del av en Mark: fint korn som driver i Markens egna färger, så att de är tonade för att höra hemma i stället för påklistrade i vitt. När du exporterar en rörlig design med Pro kan du behålla designens egna partiklar, stänga av dem eller prova en annan stil som Damm, Stjärnor, Dis, Svärm, Siden eller Glöd. Välj rörelsen Stilla så håller bakgrunden sig stilla medan bara partiklarna rör sig. Loopar exporteras sömlöst från 5 till 30 sekunder, och en stillbildsexport låter partiklarna landa exakt som de vilar i designen.