Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.


NPM npm JavaScript Style Guide

React component for particles backgrounds

This project refers to the source code of the Proton official website, I packaged it into a component. You can use it casually in your own projects. Thanks to the great author.

A vue.js version of particles-bg-vue is here

Online demo


npm install --save particles-bg


import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
        <ParticlesBg type="circle" bg={true} />

Parameter Description

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

* bg - Set to html background

If set the bg value to true

bg={true} />
position: "absolute",
zIndex: -1,
top: 0,
left: 0
If set the bg value to object
  position: "absolute",
  zIndex: 999,
  width: 200
}} />

Of course, you can also set class particles-bg-canvas-self to modify the style.

  background: #000;

About Custom

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

  let config = {
      num: [4, 7],
      rps: 0.1,
      radius: [5, 40],
      life: [1.5, 3],
      v: [2, 3],
      tha: [-40, 40],
      // body: "./img/icon.png", // Whether to render pictures
      // rotate: [0, 20],
      alpha: [0.6, 0],
      scale: [1, 0.1],
      position: "center", // all or center or {x:1,y:1,width:100,height:100}
      color: ["random", "#ff0000"],
      cross: "dead", // cross or bround
      random: 15,  // or null,
      g: 5,    // gravity
      // f: [2, -1], // force
      onParticleUpdate: (ctx, particle) => {
          ctx.rect(particle.p.x, particle.p.y, particle.radius * 2, particle.radius * 2);
          ctx.fillStyle = particle.color;

    return (
        <SignIn />
        <ParticlesBg type="custom" config={config} bg={true} />

Similar projects

Maybe you will like these two projects, they will also make your page flourish