Efeito de partículas: poeira, 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 conta própria: poeira flutuando em um feixe de luz, brasas subindo de uma fogueira, estrelas, neve, faíscas ou névoa. Em um design animado, as partículas dão profundidade e atmosfera ao fundo sem competir com as palavras, desde que sejam poucas, pequenas e lentas. A habilidade está na contenção: as partículas devem ser algo que as pessoas sentem antes de notar.

Como funciona um efeito de partículas

Cada partícula é um pequeno conjunto de números: onde está, qual o tamanho, com que velocidade e em que direção se move, quão visível é e, às vezes, quanto tempo vive. O efeito vem de centenas de partículas levemente diferentes seguindo a mesma regra simples. Mude a regra e os mesmos pontos viram um clima completamente diferente.

Como deixar as partículas sutis

A diferença entre atmosfera e protetor de tela quase sempre está na quantidade e na velocidade. Estes ajustes mantêm as partículas no fundo, que é o lugar delas.

Varie o tamanho e a opacidade para sugerir profundidade: partículas pequenas, nítidas e tênues parecem distantes, e algumas maiores e mais suaves parecem perto da lente. As mais próximas também devem se mover um pouco mais rápido, que é o mesmo truque por trás do parallax.

Partículas e texto

Um ponto brilhante passando por uma letra a faz piscar, e um campo deles dificulta a leitura de texto pequeno. Mantenha as palavras em uma área mais calma do quadro, afine as partículas atrás delas ou deixe a tipografia grande o bastante para que um ponto passageiro não importe. Nunca ponha um brilho atrás das palavras para salvá-las: um fundo mais calmo faz isso melhor. Texto sobre degradê cobre contraste em fundos em movimento.

Onde um efeito de partículas se justifica

As partículas recompensam uma tela que as pessoas olham por mais de um segundo. Em um post de feed que passa rápido, mal se percebem; em um story, em uma tela de loja ou em um hero de site, dão ao olhar algo tranquilo onde descansar.

• Fundos de Stories e Reels, onde um quadro em tela cheia fica parado por vários segundos.
• Telas em ambientes: painéis de cardápio, telas de recepção e vitrines que rodam em loop o dia todo. Veja vídeo ambiente.
• Heros de site, como uma camada leve sobre um degradê, parada para quem prefere movimento reduzido.
• Contagens regressivas de eventos e lançamentos, onde brasas ou estrelas dão o clima da própria noite.
• Papéis de parede de celular e desktop, onde poeira ou estrelas lentas nunca cansam. Veja papel de parede animado.

Como fazer loop e exportar efeitos de partículas

1. 1

   Faça o loop contínuo

   As partículas que saem por uma borda devem reaparecer na borda oposta, para que o último quadro flua para o primeiro. Loops contínuos explica o método.

2. 2

   Exporte em MP4, não em GIF

   O GIF tem só 256 cores por quadro, e pontinhos em movimento sobre um degradê suave viram ruído manchado. O MP4 lida muito melhor com eles.

3. 3

   Dê qualidade suficiente ao vídeo

   Detalhes finos em movimento são difíceis de comprimir. Se as partículas borrarem ou sumirem, exporte em qualidade maior ou reduza a quantidade.

4. 4

   Confira no celular

   As plataformas recomprimem os envios. Publique em modo privado ou mande para você mesmo primeiro e veja se as partículas sobreviveram.

O banding e as partículas costumam aparecer juntos em fundos escuros; banding em degradês tem as correções. GIF vs MP4 explica por que o vídeo vence nos detalhes em movimento.

Efeito de partículas em CSS e canvas

Em um site, a melhor forma de desenhar uma camada leve de partículas é em um elemento canvas sobre o fundo, com pointer-events: none para que nunca bloqueie cliques. Este script desenha poeira à deriva e respeita os visitantes que pediram menos movimento: eles 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);

Mantenha a contagem modesta no celular, onde cada partícula custa bateria. Prefers reduced motion explica a media query por completo.

Partículas no Gradiently

No Gradiently, as partículas fazem parte de um Mark: grão fino à deriva nas cores do próprio Mark, então são tingidas para pertencer, e não coladas em branco por cima. Ao exportar um design animado com o Pro, você pode manter as partículas do design, desligá-las ou testar outro estilo, como poeira, estrelas, névoa, enxame, seda ou brasas. Escolha o movimento Parado e o fundo se mantém enquanto só as partículas se movem. Os loops são exportados de forma contínua de 5 a 30 segundos, e uma exportação estática assenta as partículas exatamente como estão no design.