Efeitos de partículas: pó, faíscas e luz em designs animados

Um efeito de partículas é uma animação feita de muitos pontos minúsculos que se movem cada um por si: pó a flutuar num feixe de luz, brasas a subir de uma fogueira, estrelas, neve, faíscas ou névoa. Num design animado, as partículas dão profundidade e atmosfera a um fundo sem competirem com as palavras, desde que sejam poucas, pequenas e lentas. A arte está na contenção: as partículas devem ser algo que as pessoas sentem antes de reparar.

Como funciona um efeito de partículas

Cada partícula é um pequeno conjunto de números: onde está, que tamanho tem, com que velocidade e em que direção se move, quão visível é e, por vezes, quanto tempo vive. O efeito vem de centenas de partículas ligeiramente diferentes a seguirem a mesma regra simples. Muda a regra e os mesmos pontos tornam-se um ambiente completamente diferente.

Como tornar as partículas subtis

A diferença entre atmosfera e protetor de ecrã é quase sempre a quantidade e a velocidade. Estas definições mantêm as partículas no fundo, onde pertencem.

Varia o tamanho e a opacidade para sugerir profundidade: partículas pequenas, nítidas e ténues leem-se como distantes, e algumas maiores e mais suaves leem-se como próximas da lente. As mais próximas devem também mover-se um pouco mais depressa, que é o mesmo truque do parallax.

Partículas e texto

Um grão brilhante a passar por cima de uma letra faz com que ela pisque, e um campo deles torna o texto pequeno difícil de ler. Mantém as palavras numa zona mais calma do quadro, rarefaz as partículas por trás delas ou faz o texto grande o suficiente para que um grão a passar não importe. Nunca ponhas um brilho atrás das palavras para as salvar: um fundo mais calmo faz melhor o trabalho. Texto sobre degradê trata do contraste em fundos animados.

Onde um efeito de partículas ganha o seu lugar

As partículas recompensam um ecrã que as pessoas olham por mais de um segundo. Numa publicação do feed por onde se passa, mal se notam; num story, num ecrã de loja ou num hero de site, dão ao olhar algo tranquilo onde pousar.

• Fundos de stories e Reels, onde um quadro de ecrã inteiro se mantém durante vários segundos.
• Ecrãs em espaços: painéis de menus, ecrãs de receção e montras que passam em loop o dia todo. Vê vídeo ambiente.
• Heroes de sites, como camada leve sobre um degradê, parada para visitantes que preferem movimento reduzido.
• Contagens decrescentes de eventos e lançamentos, onde brasas ou estrelas criam o ambiente da própria noite.
• Papéis de parede de telemóvel e computador, onde pó ou estrelas lentos nunca cansam. Vê papel de parede animado.

Fazer loop e exportar efeitos de partículas

1. 1

   Faz o loop sem costuras

   As partículas que saem por um lado devem reaparecer no lado oposto, para que o último fotograma flua para o primeiro. Loops contínuos explica o método.

2. 2

   Exporta MP4, não GIF

   O GIF tem apenas 256 cores por fotograma, e pontos minúsculos em movimento sobre um degradê suave transformam-se em ruído pontilhado. O MP4 trata-os muito melhor.

3. 3

   Dá ao vídeo qualidade suficiente

   O pormenor fino em movimento é difícil de comprimir. Se as partículas ficarem esborratadas ou desaparecerem, exporta com mais qualidade ou reduz o seu número.

4. 4

   Verifica num telemóvel

   As plataformas recomprimem os carregamentos. Publica em privado ou envia-o a ti próprio primeiro e confirma que as partículas sobreviveram.

O banding e as partículas aparecem muitas vezes juntos em fundos escuros; banding em degradês tem as soluções. GIF vs MP4 explica porque é que o vídeo ganha em pormenor em movimento.

Um efeito de partículas em CSS e canvas

Num site, uma camada leve de partículas desenha-se melhor num elemento canvas colocado sobre o fundo, com pointer-events: none para nunca bloquear cliques. Este script desenha pó à deriva e respeita os visitantes que pediram menos movimento: veem as partículas paradas.

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

Mantém o número modesto nos telemóveis, onde cada partícula custa bateria. O artigo preferência por movimento reduzido explica a media query por completo.

Partículas na Gradiently

Na Gradiently, as partículas fazem parte de um Mark: grão fino à deriva nas cores do próprio Mark, tingido para pertencer em vez de colado a branco. Quando exportas um design animado com o Pro, podes manter as partículas do design, desligá-las ou experimentar outro estilo, como pó, estrelas, névoa, enxame, seda ou brasas. Escolhe o movimento Parado e o fundo mantém-se, enquanto só as partículas se movem. Os loops exportam-se sem costuras de 5 a 30 segundos, e uma exportação estática assenta as partículas exatamente onde repousam no design.