React particles animation background component

Overview

particles-bg

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

Install

npm install --save particles-bg

Usage

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <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.

"color"
"ball"
"lines"
"thick"
"circle"
"cobweb"
"polygon"
"square"
"tadpole"
"fountain"
"random"
"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
bg={{
  position: "absolute",
  zIndex: 999,
  width: 200
}} />

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

.particles-bg-canvas-self{
  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.beginPath();
          ctx.rect(particle.p.x, particle.p.y, particle.radius * 2, particle.radius * 2);
          ctx.fillStyle = particle.color;
          ctx.fill();
          ctx.closePath();
      }
    };

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

Similar projects

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

License

https://opensource.org/licenses/MIT

Comments
  • Particle.js Module parse failed: Unexpected token (13:5)

    Particle.js Module parse failed: Unexpected token (13:5)

    I really like this package. But when I am trying to use it in react-nice-resume, I am getting below error.

    Failed to compile.

    
    ./node_modules/proton-engine/src/core/Particle.js
    Module parse failed: Unexpected token (13:5)
    You may need an appropriate loader to handle this file type.
    | export default class Particle {
    |   /** @type string */
    |   id = ''
    |
    |   /** @type {{p:Vector2D,v:Vector2D,a:Vector2D}} */
    

    Any suggestions?

    opened by pprachit09 6
  • sometimes I get canvas is null error

    sometimes I get canvas is null error

    Hi using this to aww my auth routes. Thank you a lot. I am getting canvas is null error on refreshes of the page. Not all the time but sometimes. Hope below screenshot helps:

    Using React:

    "react": "^16.8.4", "particles-bg": "^2.5.0",

    https://i.postimg.cc/LsywpW6r/canvas-Is-Null.png

    opened by osmancakir 5
  • Particles are cut off when page is scrolled down

    Particles are cut off when page is scrolled down

    I have a problem with the particles as they are not rendered below the main screen. scrolling down, they are lost. Is there some-sort of prop that i can include or as css style that can be applied to fix that ? Thanks.

    opened by oliverilm 5
  • Running in typescript without custom config fails to build

    Running in typescript without custom config fails to build

    Description First, a very cool dynamic background package. Thanks for sharing. The config parameter is mandatory and thus the following resulted in build error:

    <ParticlesBg num={80} type="cobweb" bg={true} />
    

    The error is:

    No overload matches this call.
      Overload 1 of 2, '(props: Readonly<Props>): ParticlesBg', gave the following error.
        Property 'config' is missing in type '{ num: number; type: "cobweb"; bg: true; }' but required in type 'Readonly<Props>'.
      Overload 2 of 2, '(props: Props, context?: any): ParticlesBg', gave the following error.
        Property 'config' is missing in type '{ num: number; type: "cobweb"; bg: true; }' but required in type 'Readonly<Props>'.
    

    Potential fix Not sure if that works for any case, but at least for me editing the index.d.ts and changing line 55 to make the config parameter optional worked.

      export interface Props {
    ...
        config?: ConfigProp;
    ...
    
    opened by ehud-am 3
  • ReferenceError: window is not defined

    ReferenceError: window is not defined

    First of all I want to say I really appreciate your work, a best animation library ! So I'm trying to use particles-bg with next.js. I made a simple component like this.

     import React from "react";
     import ParticlesBg from "particles-bg";
     import Box from "@material-ui/core/Box";
     import Paper from "@material-ui/core/Paper";
     import Grid from "@material-ui/core/Grid";
     import Button from "@material-ui/core/Button";
    
    
     const Products = () => {
       return (
         <Box>
           <Grid container spacing={3}>
             <Grid item xs={12}>
               <Paper>
                 <Button
                   variant="contained"
                   color="primary"
                   href="#contained-buttons"
                 >
                   Check the product
                 </Button>
               </Paper>
             </Grid>
           </Grid>
           <ParticlesBg type="circle" bg={true} />
         </Box>
       );
     };
    
     export default Products;
    

    And when I run the next.js as dev. It raise this error.

    Server Error
    ReferenceError: window is not defined
    
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    Call Stack
    <unknown>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:254)
    <unknown>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:461)
    <unknown>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:84)
    Object.<anonymous>
    file:///G:/WORK/Personal/Happy%20Base/LandingPage/landing-page/node_modules/raf-manager/build/RAFManager.min.js (9:153)
    Module._compile
    internal/modules/cjs/loader.js (1063:30)
    Object.Module._extensions..js
    internal/modules/cjs/loader.js (1092:10)
    Module.load
    internal/modules/cjs/loader.js (928:32)
    Function.Module._load
    internal/modules/cjs/loader.js (769:14)
    Module.require
    internal/modules/cjs/loader.js (952:19)
    require
    internal/modules/cjs/helpers.js (88:18)
    

    Any clues how to fix this ? Thanks in advance !

    opened by kaxterzz 2
  • fix(Canvas): cleared the interval for #7

    fix(Canvas): cleared the interval for #7

    Cleared the interval of heartbeatDetectionCanvasSize when componentWillUnmount. Also replaced part of .bind(this) with arrow function to improve performance.

    opened by RyanRoll 1
  • Adjust particles on window resize

    Adjust particles on window resize

    As shown in the example below. If initially, the window is small and I make it bigger, the particles don't cover all background space.

    image

    Probably it's not a big issue.

    opened by strdr4605 1
  • RAF-Manager is throwing window is not defined.

    RAF-Manager is throwing window is not defined.

    After installation of particles-bg - "^2.5.5", the first time when running it worked. And now when I did npm i and tried to run the projects, raf-manager is throwing this error. I don't see raf-manager GitHub repo, even npm doesn't have it. If in case something on raf-manager has changed or deprecated, please update particles-bg package as well. image

    opened by zachjonesnoel 3
  • More options

    More options

    I love this package! I just wish I could use the "lines" option without having the grey lines that stick. Could someone help me get this achieved? Maybe I'm just not smart enough to figure it out...

    opened by oliverlevay 3
Releases(v2.5.0)
Owner
lindelof
✈️Web developer 👴Playwright 🌋Python developer 🐝Guitarist 🌎 Traveller & I like react / react-native / typescript❤️ 💛
lindelof
Performant Particles: 3 to 6 times faster than tsParticles or Particles.js

perParticles Performant Particles is a demo that was written to handle a comparatively large amount of particles without slowing down to the same degr

Alaric von Teplitz 28 Oct 2, 2022
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
Lightweight, High Performance Particles in Canvas

Sparticles https://sparticlesjs.dev Lightweight, High Performance Particles in Canvas. For those occasions when you ?? just ?? gotta ?? have ?? sparkl

Simon Goellner 171 Dec 29, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Jan 1, 2023
A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.

Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np

Arno Di Nunzio 120 Dec 23, 2022
Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.

spxparticles Stream or a burst of image particles on HTML canvas Simple Javascript library for generating an infinine stream or a burst of image based

Tuomo Kulomaa 3 Dec 3, 2020
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

CodyHouse 50 Oct 28, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

Aliaksandr Astashenkau 184 Dec 31, 2022
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol

Mladen Plavsic 334 Dec 11, 2022
circle-svg-animation

Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen

Sergey Korn 24 Aug 18, 2022
Codrops 135 Dec 12, 2022