lindelof / particles-bg

React particles animation background component

Hi there 👋

particles-bg's Issues

Uncaught TypeError: Cannot read property 'clientHeight' of null

Change color for some types

Hi! Im trying to change the color of the bubbles for color and fountain types, but there is no way apparently. Its always random colours. It would be great if we can customize the colors of the bubbles. Thanks!

Starfield effect

Hey, great job! I moved from background video to your lines: https://www.wojciechbator.me

As a cosmos geek, I'd love to create starfield effect, something like this lib offers: https://github.com/transitive-bullshit/react-starfield-animation. However, that lib is not maintained and contains somewhat nasty looking bugs on initialization: transitive-bullshit/react-starfield-animation#5

Therefore I'm raising this proposal here :) Alternatively, could you guide me of how to recreate their exact effect with your custom setup?

Regards

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?

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.

Background color changes for small windows

I've noticed that for some of the particle types the background color changes when the window is resized to be a small width (like on mobile devices). Specifically with Cobweb, on mobile devices and when resizing a browser window to be skinny the background color changes from white to a light blue. This occurs when setting the background color or when not setting it.

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 !

Add typescript declaration files

As some apps are built nowadays with typescript may be better to create Declaration Files.

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.

Probably it's not a big issue.

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;
...

SSR support increase

I enabled SSR, whether can ban/SRC/particles/Canvas JSX window.addEventListener running on the server?

So you can support SSR, thanks

Front Overlay

Would love to use this as win or points animation overlay. Can we adopt to allow style transfer in props?

Can't change z-index to 0

Have any way to set your own styles ?

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

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

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.