Particles-Bg-Vue: Animation Background Component

Particles-bg-vue is a vue.js particles animation background component. Use it to make your website look cool.


This project refers to the source code of the Proton official website, and proton's online demo. I packaged it into a vue.js component. Thanks to the great author.

Online demo


npm install --save particles-bg-vue


Method 1: Import and use in the component

<particles-bg type="lines" :bg="true" />

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {

Method 2: Use it globally

import VueParticlesBg from "particles-bg-vue";


<particles-bg type="random" :bg="true" />

Parameter Description

<particles-bg color="#ff0000" num=200 type="circle" :bg={true} />

type - Is the type of particle animation

Is the type of particle animation, random is a random selection. You are also free to customize use custom.


num - The number of particles emitted each time, generally not set

color - The background color or particle color of the particle scene

Notice: which should be an array under type=color

canvas - canvas dom style


bg - Set to html background

Is set the following properties

position: "absolute",
zIndex: -1,
top: 0,
left: 0

About Custom

You can use type="custom" to achieve a higher degree of freedom for the particle background.

  <particles-bg type="custom" :config="config" :bg="true"/>

  data: function() {
    return {
      config: {
        num: [4, 7],
        rps: 0.1,
        radius: [5, 40],
        life: [1.5, 3],
        v: [2, 3],
        tha: [-30, 30],
        body: icon,
        alpha: [0.6, 0],
        scale: [0.1, 0.4],
        position: "all",
        cross: "dead",
        random: 15