Skip to content

Partículas

As opções dentro de particles controlam a aparência e o movimento das partículas.

Grupos mais usados

  • particles.number
  • particles.move
  • particles.links
  • particles.palette
  • particles.paint
  • particles.shape
  • particles.size
  • particles.opacity

Veja páginas detalhadas:

particles.number

ts
particles: {
  number: {
    value: 70,
    density: {
      enable: true,
      area: 800
    }
  }
}
  • value: contagem de partículas base.
  • density.enable: adapta a contagem ao tamanho do contêiner.

particles.move

ts
move: {
  enable: true,
  speed: 1.6,
  direction: "none",
  outModes: {
    default: "out"
  }
}
  • speed: velocidade de movimento percebida.
  • outModes.default: comportamento de borda (out, bounce, ...).
ts
links: {
  enable: true,
  distance: 140,
  opacity: 0.28,
  color: "#7aa0ff"
}

Ativa links entre partículas, úteis para seções heróicas de "rede".

particles.palette

ts
palette: "sunset";
  • Importa cores e padrões de mesclagem de um ID de paleta registrado.
  • Preenche paint.fill ou paint.stroke automaticamente dependendo da paleta.
  • Com paletas multivariadas, paint é carregado como uma matriz de variantes.
  • Útil com predefinições e demonstrações quando você deseja mudar rapidamente o clima das cores.

particles.shape, size, opacity

ts
shape: {
  type: ["circle", "square"]
},
size: {
  value: {
    min: 1,
    max: 5
  }
},
opacity: {
  value: 0.7
}
  • shape.type: tipo único ou lista de tipos.
  • size.value: faixa recomendada para variação natural.
  • opacity.value: transparência média.

Grupos avançados para verificar a seguir

  • particles.collisions
  • particles.life
  • particles.orbit
  • particles.roll
  • particles.rotate
  • particles.tilt
  • particles.twinkle
  • particles.wobble

Páginas detalhadas:

Páginas de origem: https://github.com/tsparticles/tsparticles/tree/main/markdown/Options/Particles