Gerador de efeitos de partículas

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

Predefinição

Pré-visualização

Carregando...

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
      }
    }
  }
}

O que é Gerador de efeitos de partículas?

Projete e visualize animacoes de particulas bonitas para seu site ou aplicativo. Configure quantidade, velocidade, tamanho, cor, forma, comportamento de interacao e fisica para criar efeitos como neve, confete, vagalumes ou padroes de galaxia. Exporte a configuracao como codigo 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