A Lightweight And Fast Particle Library Written in JavaScript | Spark Particles

Spark Particles is a lightweight and fast particle library written in JavaScript. SparkParticles is a fast and configurable JavaScript library for generating a cool particle system on an HTML5 canvas.

How to make use of it:

1. Install and import the spark particles as an ES module.

# NPM
$ npm i spark-particles
import Particles from "spark-particles"
// OR
import Particles from './src/Particles.js'

2. Create an HTML canvas aspect on the web page.

<canvas id="particles"></canvas>

3. Render a primary particle system on the canvas.

const node = document.getElementById('particles');
const particles = new Particles(node).init({
      // configs here
}).start()

4. Available choices to customize the particle system.

const particles = new Particles(node).init({

      // enable debug mode
      debug: false,

      // auto resize to fit the screen
      resize: true,

      // config particles here
      particles: {
        amount: 250,
        moveDirection: 'random', // 'random' | 'top'  | 'right'  | 'bottom'  | 'left'
        distanceToLink: 150, 
        linkedParticles: true, 
        maxVelocity: 0.8, 
        maxRadius: 4,
      },

      // rendered configs
      renderer: {
        linearGradient: {
          x1: 0, 
          y1: 0, 
          x2: 1,
          y2: 1,
          color1: '#327fc2',
          color2: '#014987',
        },
        width: window.innerWidth, 
        height: window.innerHeight,
        dpiMultiplier: 1,
      }
      
})

Fast And Configurable Particle Library, Spark Particles Plugin/Github, particles js alternative, particle js examples


See Demo And Download

Official Website(GellTorn): Click Here

This superior jQuery/javascript plugin is developed by GellTorn. For extra Advanced usage, please go to the official website.

Share