Effetti particelle: polvere, scintille e luce nei design animati

Un effetto particelle è un’animazione fatta di tanti minuscoli punti che si muovono ciascuno per conto suo: polvere che fluttua in un raggio di luce, braci che salgono da un fuoco, stelle, neve, scintille o nebbia. In un design animato le particelle danno profondità e atmosfera a uno sfondo senza competere con le parole, a patto di tenerle poche, piccole e lente. L’abilità sta nella misura: le particelle dovrebbero essere qualcosa che le persone sentono prima di notarlo.

Come funziona un effetto particelle

Ogni particella è un piccolo insieme di numeri: dove si trova, quanto è grande, quanto veloce e in che direzione si muove, quanto è visibile e talvolta quanto vive. L’effetto nasce da centinaia di particelle leggermente diverse che seguono la stessa semplice regola. Cambia la regola e gli stessi punti diventano un’atmosfera completamente diversa.

Rendere sottili le particelle

La differenza tra atmosfera e screensaver è quasi sempre quantità e velocità. Queste impostazioni tengono le particelle sullo sfondo, dove devono stare.

Varia dimensione e opacità per suggerire profondità: particelle piccole, nitide e tenui sembrano lontane, e poche più grandi e morbide sembrano vicine all’obiettivo. Le particelle più vicine dovrebbero anche muoversi un po’ più in fretta, ed è lo stesso trucco della parallasse.

Particelle e testo

Un granello luminoso che passa su una lettera la fa tremolare, e un campo di granelli rende difficile leggere il testo piccolo. Tieni le parole in una zona più calma del quadro, dirada le particelle dietro di esse, oppure fai il testo abbastanza grande perché un granello di passaggio non conti. Non aggiungere mai un alone dietro le parole per salvarle: uno sfondo più calmo lo fa meglio. Il testo su un gradiente tratta il contrasto sugli sfondi in movimento.

Dove un effetto particelle si guadagna il posto

Le particelle premiano uno schermo che le persone guardano per più di un secondo. Su un post del feed che si scorre via si notano appena; su una storia, uno schermo in un negozio o un hero di sito, danno all’occhio qualcosa di quieto su cui riposare.

• Sfondi di storie e Reels, dove un quadro a schermo intero resta fermo per diversi secondi.
• Schermi nei locali: menu digitali, schermi di reception e vetrine che girano in loop tutto il giorno. Vedi il video ambient.
• Hero di siti web, come livello leggero su un gradiente, fermato per i visitatori che preferiscono meno movimento.
• Conti alla rovescia di eventi e lanci, dove braci o stelle danno il tono della serata stessa.
• Sfondi per telefono e desktop, dove polvere o stelle lente non stancano mai. Vedi lo sfondo animato.

Loop ed esportazione degli effetti particelle

1. 1

   Rendi il loop senza giunture

   Le particelle che escono da un bordo devono riapparire dal bordo opposto, così l’ultimo fotogramma scorre nel primo. I loop senza giunture spiegano il metodo.

2. 2

   Esporta MP4, non GIF

   La GIF ha solo 256 colori per fotogramma, e minuscoli punti in movimento su un gradiente morbido diventano rumore puntinato. L’MP4 li gestisce molto meglio.

3. 3

   Dai al video abbastanza qualità

   I dettagli fini in movimento sono difficili da comprimere. Se le particelle sbavano o spariscono, esporta a qualità più alta o riducine il numero.

4. 4

   Controllalo su un telefono

   Le piattaforme ricomprimono i caricamenti. Pubblica in privato o invialo a te stesso prima, e verifica che le particelle siano sopravvissute.

Banding e particelle compaiono spesso insieme sugli sfondi scuri; il banding nei gradienti ha le soluzioni. GIF contro MP4 spiega perché il video vince per i dettagli in movimento.

Un effetto particelle in CSS e canvas

Su un sito web, un livello leggero di particelle si disegna meglio su un elemento canvas posto sopra lo sfondo, con pointer-events: none perché non blocchi mai i clic. Questo script disegna polvere alla deriva e rispetta i visitatori che hanno chiesto meno movimento: a loro le particelle appaiono ferme.

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

Tieni modesto il numero sui telefoni, dove ogni particella costa batteria. Prefers reduced motion spiega la media query per intero.

Le particelle in Gradiently

In Gradiently le particelle fanno parte di un Mark: grana fine che scivola nei colori del Mark stesso, così sono tinte per appartenere e non incollate in bianco. Quando esporti un design animato con Pro, puoi tenere le particelle del design, spegnerle o provare un altro stile come polvere, stelle, nebbia, sciame, seta o braci. Scegli il movimento Still e lo sfondo resta fermo mentre si muovono solo le particelle. I loop si esportano senza giunture da 5 a 30 secondi, e un’esportazione ferma sistema le particelle esattamente come riposano nel design.