# Efeito de partículas: poeira, faíscas e luz em designs animados

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

Alguns pontos de luz à deriva podem fazer um fundo plano parecer um lugar. Pontos demais o transformam em protetor de tela. Veja como escolher, ajustar e exportar partículas para que deem atmosfera e mais nada.

## The short version

- Um efeito de partículas é uma animação feita de muitos pontos pequenos, cada um com posição, tamanho, velocidade e opacidade próprios, como poeira, faíscas, brasas, neve ou estrelas.
- As partículas ficam melhores quando são poucas, pequenas, lentas e de tamanhos variados, com as maiores e mais brilhantes usadas com parcimônia.
- Manter as partículas longe do texto, ou mais calmas atrás dele, protege a legibilidade.
- Partículas finas em movimento são difíceis para a compressão de vídeo, então exporte loops de partículas em MP4 com boa qualidade, e não em GIF.
- Em sites, as animações de partículas devem parar para quem pede movimento reduzido.

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.

| Estilo de partícula | Como se move | Clima | Combina com |
| --- | --- | --- | --- |
| Poeira | Minúscula, vagueia devagar em qualquer direção | Quieto, quente, cinematográfico | Café, livros, interiores, marcas calmas |
| Brasas | Pequenas e brilhantes, sobem e se apagam | Quente, enérgico | Restaurantes, música, eventos de inverno |
| Estrelas | Paradas ou quase, cintilam | Noite, encantamento | Eventos noturnos, astronomia, sono, lançamentos |
| Névoa | Grande, suave, bem tênue, desliza de lado | Misterioso, suave | Bem-estar, beleza, perfumes |
| Enxame | Move-se junto em grupos soltos | Vivo, movimentado | Tecnologia, dados, natureza |
| Neve | Cai de forma constante com leve balanço | Sazonal, aconchegante | Campanhas de inverno, posts de fim de ano |

Seis estilos de partículas e onde cada um se encaixa. Escolha o movimento que combina com a sensação, não o que parece mais impressionante.

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

### Protetor de tela

- Centenas de pontos grandes e brilhantes
- Todos do mesmo tamanho e velocidade
- Movimento rápido e agitado
- Branco puro em qualquer fundo
- Passando direto pelo título

### Atmosfera

- Um número modesto, a maioria minúscula
- Tamanhos mistos: muitas pequenas, algumas maiores e mais suaves
- Lentas o bastante para você olhar duas vezes
- Tingidas com as cores do próprio fundo
- Mais ralas ou calmas onde ficam as palavras

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

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

Uma paleta de brasas. As partículas usam os dois tons mais claros, então brilham como parte do fundo em vez de ficarem por cima em branco.

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

Post 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 combinam com um evento noturno: pontos quentes subindo devagar por um fundo escuro, com a data na área calma do alto.

Story vertical com o texto Manhãs sem pressa, de um café chamado The Reading Room, com partículas tênues de poeira em luz suave

Poeira para um story de café: quase invisível, pegando a luz, sem nunca cruzar as palavras.

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

## Como fazer loop e exportar efeitos de partículas

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

```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 pontinhos de poeira quente subindo à deriva. Dê ao canvas `position: absolute; inset: 0; pointer-events: none;` sobre o seu hero.

Mantenha a contagem modesta no celular, onde cada partícula custa bateria. [Prefers reduced motion](https://gradiently.design/pt-br/guide/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.

## 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 poeira, faíscas, brasas, neve, estrelas ou névoa em um design ou vídeo.

### Como deixo um efeito de partículas sutil?

Use menos partículas, a maioria minúscula, em movimento lento, com tamanhos variados e tingidas nas cores do próprio fundo, e deixe-as mais calmas atrás do texto.

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

Em MP4. O GIF é limitado a 256 cores por quadro, então partículas finas sobre um degradê viram ruído manchado, enquanto o MP4 as mantém suaves.

### Dá para 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 lida com dezenas ou centenas de forma muito mais eficiente. Pare o movimento para quem prefere movimento reduzido.