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

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

Alguns grãos de luz à deriva podem fazer um fundo plano parecer um lugar. Demasiados fazem-no parecer um protetor de ecrã. Eis como escolher, afinar e exportar partículas para que tragam atmosfera e mais nada.

## The short version

- Um efeito de partículas é uma animação feita de muitos pontos pequenos, cada um com a sua posição, tamanho, velocidade e opacidade, como pó, faíscas, brasas, neve ou estrelas.
- As partículas ficam melhor quando são poucas, pequenas, lentas e de tamanhos variados, usando as maiores e mais brilhantes com parcimónia.
- Manter as partículas longe do texto, ou mais calmas por trás dele, protege a legibilidade.
- Pormenores finos em movimento são difíceis para a compressão de vídeo, por isso exporta loops de partículas em MP4 com boa qualidade e não em GIF.
- Nos sites, as animações de partículas devem parar para os visitantes que pedem movimento reduzido.

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.

| Estilo de partícula | Como se move | Ambiente | Serve para |
| --- | --- | --- | --- |
| Pó | Minúsculo, deriva devagar em qualquer direção | Calmo, quente, cinematográfico | Café, livros, interiores, marcas serenas |
| Brasas | Pequenas e brilhantes, sobem e esbatem-se | Quente, enérgico | Restaurantes, música, eventos de inverno |
| Estrelas | Paradas ou quase, cintilam | Noite, deslumbramento | Eventos noturnos, astronomia, sono, lançamentos |
| Névoa | Grande, suave, muito ténue, desliza para o lado | Misterioso, suave | Bem-estar, beleza, perfumes |
| Enxame | Move-se em grupos soltos | Vivo, movimentado | Tecnologia, dados, natureza |
| Neve | Cai de forma constante com um leve balanço | Sazonal, aconchegante | Campanhas de inverno, publicações de festas |

Seis estilos de partículas e onde cada um se encaixa. Escolhe o movimento que corresponde à emoção, não o que parece mais impressionante.

## 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.

### Protetor de ecrã

- Centenas de pontos grandes e brilhantes
- Todos do mesmo tamanho e velocidade
- Movimento rápido e agitado
- Branco puro em todos os fundos
- A atravessar o título em linha reta

### Atmosfera

- Um número modesto, na maioria minúsculos
- Tamanhos mistos: muitos pequenos, alguns maiores e mais suaves
- Tão lento que é preciso olhar duas vezes
- Tingidas com as cores do próprio fundo
- Mais finas ou calmas onde estão as palavras

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](https://gradiently.design/pt-pt/guide/parallax-effect).

- Chão carbonizado: #1a0f0a
- Ferrugem profunda: #7c2d12
- Brasa: #ea580c
- Faísca: #fdba74
- Núcleo incandescente: #fff7ed

Uma paleta de brasas. As partículas usam os dois tons mais claros, para brilharem como parte do fundo em vez de ficarem por cima, a branco.

## 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ê](https://gradiently.design/pt-pt/guide/text-on-gradient) trata do contraste em fundos animados.

Publicação vertical de evento com o texto Ceia da noite da fogueira, 5 de novembro, sobre um fundo escuro e quente com partículas de brasas

As brasas servem um evento noturno: grãos quentes a subir devagar sobre um fundo escuro, com a data na zona calma de cima.

Story vertical com o texto Manhãs lentas, de um café chamado The Reading Room, com partículas ténues de pó numa luz suave

Pó para um story de café: quase invisível, a apanhar a luz, sem nunca atravessar as palavras.

## 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](https://gradiently.design/pt-pt/guide/ambient-video).
- **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](https://gradiently.design/pt-pt/guide/live-wallpaper).

## Fazer loop e exportar efeitos de partículas

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](https://gradiently.design/pt-pt/guide/seamless-loop-video) explica o método.
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. **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. **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](https://gradiently.design/pt-pt/guide/gradient-banding) tem as soluções. [GIF vs MP4](https://gradiently.design/pt-pt/guide/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.

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

Setenta grãos de pó quente a subir à deriva. Dá ao canvas `position: absolute; inset: 0; pointer-events: none;` sobre o teu hero.

Mantém o número modesto nos telemóveis, onde cada partícula custa bateria. O artigo [preferência por movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion) 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.

## FAQ

### O que é um efeito de partículas?

Uma animação feita de muitos pontos pequenos que se movem de forma independente, usada para criar pó, faíscas, brasas, neve, estrelas ou névoa num design ou vídeo.

### Como faço um efeito de partículas parecer subtil?

Usa menos partículas, na maioria minúsculas, a mover-se devagar, de tamanhos variados e tingidas com as cores do próprio fundo, e mantém-nas mais calmas por trás do texto.

### Devo exportar uma animação de partículas em GIF ou MP4?

MP4. O GIF está limitado a 256 cores por fotograma, por isso partículas finas sobre um degradê tornam-se ruído pontilhado, enquanto o MP4 as mantém suaves.

### Posso fazer um efeito de partículas com CSS?

Algumas partículas podem ser animadas com CSS, mas um elemento canvas com um pouco de JavaScript trata dezenas ou centenas com muito mais eficiência. Pára o movimento para visitantes que preferem movimento reduzido.