Gerador de efeitos de partículas

Crie animações de partículas personalizáveis

Predefinição

Configurações

Quantidade de partículas120

Velocidade (Mín)0.5

Velocidade (Máx.)2

Faixa de tamanho (Mín)1

Faixa de tamanho (Máx.)5

Opacidade0.9

Forma

Cores#ffffff

Gravidade0

Vento0.3

Quicar

Interação

Exportar

{
  "fullScreen": {
    "enable": false
  },
  "background": {
    "color": {
      "value": "transparent"
    }
  },
  "particles": {
    "number": {
      "value": 120,
      "density": {
        "enable": true
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": {
        "min": 0.4,
        "max": 0.9
      }
    },
    "size": {
      "value": {
        "min": 1,
        "max": 5
      }
    },
    "move": {
      "enable": true,
      "speed": {
        "min": 0.5,
        "max": 2
      },
      "direction": "bottom",
      "straight": false,
      "outModes": {
        "default": "out"
      },
      "drift": 0.3
    },
    "wobble": {
      "enable": true,
      "distance": 10,
      "speed": 5
    }
  },
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      }
    },
    "modes": {
      "repulse": {
        "distance": 80,
        "duration": 0.4
      }
    }
  }
}

Pré-visualização

Carregando...

O que é Gerador de efeitos de partículas?

Projete e visualize animações de partículas para seu site ou aplicativo. Configure quantidade, velocidade, tamanho, cor, forma, interação e física para criar efeitos como neve, confete, vagalumes ou padrões de galáxia. Exporte a configuração como código pronto para uso.

Como usar

Escolha um efeito predefinido (neve, confete, vagalumes, bolhas, galaxia) ou comece do zero.
Ajuste as propriedades das particulas: quantidade, velocidade, faixa de tamanho, cores, formas, opacidade e fisica como gravidade e quicamento.
Visualize a animacao ao vivo e copie a configuracao JSON do tsParticles ou exporte como um trecho HTML independente.

Resultado

Um desenvolvedor web seleciona o preset de neve, aumenta a quantidade de particulas para 200, adiciona uma leve deriva de vento e copia o JSON de configuracao para adicionar um efeito de inverno a sua landing page natalina.

Gerador de efeitos de partículas

O que é Gerador de efeitos de partículas?

Como usar

Resultado

Ferramentas relacionadas

Gerador de texturas

Criador de organogramas

Gerador de animações CSS

Criador de Miniaturas para YouTube

Gerador de nuvem de palavras

Criador de Linha do Tempo

Gerador de efeitos de partículas