live-particles

live-larticles is a lightweight JavaScript library for rendering lively and realistic particles in the browser. With just a few simple adjustments to the configuration file, you can create dynamic effects such as rain, snow, sandstorms, blizzards, smoke, or water bubbles.

experimantal

added experimental feature: you can add svg props with url for your svg. testing now

Installation

You can install live-particles via npm:

npm install live-particles

Usage

To use live-particles, follow these steps:

Import the library into your App file, it is best to be used as one of the first components on your web-application:

import { LiveParticles } from 'live-particles';

<App>
  <LiveParticles config={'bubbles'} size={[1,5]} colors={['#000', '#12c3a0']} />
  ... your code
</App>

This will set bubbles config but custom sizes from 1px to 5px and custom colors

You can also customize canvas element with CSS styles simply using style props. This will place canvas on top 50% of screen and behind any other elements:

<LiveParticles style={{zIndex:'-1', height:'50%'}} />

By default canvas has three css properties:

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

Enjoy the dynamic and customizable particle animations in your web application!

Configuration Options

• style: any CSS style. Will apply to canvas element.
• config: preinstalled configs. There is 'snow', 'sandstorm', 'bubbles', 'space' for now.
• colors: Array of colors for the particles.
• sizeRange: Boolean indicating whether the particle size is a range(true) or an array(false).
• size: Array defining the size range of particles or array of different sizes if sizeRange is false.
• particlesCount: Density of particles (number of particles per 100,000 pixels).
• deltaX: Speed of particles along the X-axis (positive values - move from left to right, negative values - vice-versa).
• deltaY: Speed of particles along the Y-axis (positive values - move from top to bottom, negative values - vice-versa).
• deltaXrandomness: Randomness factor for the X-axis speed. If 0 - then only parallax depending on particles size. Bigger value - more chaotic movement
• deltaYrandomness: Randomness factor for the Y-axis speed. If 0 - then only parallax depending on particles size. Bigger value - more chaotic movement
• parallaxDepth: Depth of parallax effect. If 0 - then only parallax depending on particles size. Bigger value - begger difference between first-plane particles and back-plane particles
• roundness: Roundness factor for particle shapes. If 1 - particle is a circle

Example

You can use from none to all of them whith you values (but be careful with big numbers, it can heavily loaded your system)

<LiveParticles
  style={{height:'50%', width:'10%'}}
  config={'bubbles'}
  colors={['#fff', '#ccc', '#aaa']}
  sizeRange={true}
  size={[0.2, 4]} 
  particlesCount={30}
  deltaX={1} 
  deltaY={1} 
  deltaXrandomness={1}
  deltaYrandomness={1} 
  parallaxDepth={1}
  roundness={1}
/>

this is configs for preinstalled particles

(you can use it simply by giving config props with selected type)

snow

  colors: ['#fff', '#ccc', '#aaa'],
  sizeRange: true, 
  size: [0.2, 4], 
  particlesCount: 30, 
  deltaX: 1, 
  deltaY: 1, 
  deltaXrandomness: 1, 
  deltaYrandomness: 1, 
  parallaxDepth: 1,
  roundness: 1,

sandstorm

  colors: ['#ffd43b', '#f08c00', '#fd7e14', '#e8590c'],
  sizeRange: true,
  size: [0.2, 1], 
  particlesCount: 100,
  deltaX: 20, 
  deltaY: 1, 
  deltaXrandomness: 2,
  deltaYrandomness: 1, 
  parallaxDepth: 2, 
  roundness: .5,

bubbles

  colors: ['#3b89d1', '#6057e7', '#172ead', '#1a84b6'],
  sizeRange: true,
  size: [1, 5], 
  particlesCount: 50,
  deltaX: .5, 
  deltaY: -1, 
  deltaXrandomness: -1,
  deltaYrandomness: 1, 
  parallaxDepth: .5, 
  roundness: 1,

space

  colors: ['#fff'],
  sizeRange: true,
  size: [.1, 1], 
  particlesCount: 70,
  deltaX: -.01, 
  deltaY: 0, 
  deltaXrandomness: 0,
  deltaYrandomness: 0, 
  parallaxDepth: 100, 
  roundness: 1,

feel free for experimentig, i'll gladly check any suggestions for improvment

License

This project is licensed under the MIT License - see the LICENSE file for details.

This README includes a description of the package, installation instructions, usage guidelines, configuration options, an example, and licensing information. Feel free to adjust it further to suit your needs!