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.

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
Animation Academy teaches you CSS animations using the transition and animation properties.

Animation Academy Open Animation Academy > Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou

Jacob Benowitz 6 Jun 23, 2022
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.7k Jan 8, 2023
JavaScript animation engine

anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP

Julian Garnier 44k Dec 30, 2022
Accelerated JavaScript animation.

Velocity beta NPM: npm install velocity-animate@beta Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation r

Julian Shapiro 17.2k Jan 5, 2023
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.5k Jan 8, 2023
CSS3 backed JavaScript animation framework

Move.js CSS3 JavaScript animation framework. About Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be

Sloth 4.7k Dec 30, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.4k Jan 5, 2023
Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Aria 8.6k Jan 3, 2023
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Mladen Plavsic 334 Dec 11, 2022
Making Animation Simple

Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing

Just Animate 255 Dec 5, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023
Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

Trigger JS 1.1k Jan 4, 2023
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 561 Dec 24, 2022
A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

lindelof 206 Dec 24, 2022
Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize particles in the background.

Happy BirthDay JS Happy Birthday is a web-based party live background generated by CANVAS powered by JavaScript. This show a lot of random colorize pa

Max Base 9 Oct 29, 2022
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
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 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