TIP: Try navigating through list using left & right arrow keys


React particles animation background component

Github issues
Github stars
1 day ago
Github last update date
NPM current week downloads


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 https://github.com/lindelof/particles-bg-vue

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



Buy us a coffeeBuy us a coffee