particulab

A simple and easy-to-use library to create particles in your website.

Installation

npm

$ npm i css-particles

HMTL Library

<script src="https://aneks1.github.io/particulab/particulab.umd/index.js"></script>

Usage

Create the Particle System

import particulab from 'particulab'
const canvas = document.getElementById('canvas') as HTMLCanvasElement
const system = new particulab.ParticleSystem(canvas, { x: canvas.width, y: canvas.height })

Set the ammount of particles to show

system.ammount = 100

Set the properties for the particles

system.speed = { x: { min: -5, max: 5 }, y: { min: -5, max: 5 } }
system.diameter = { min: 1, max: 4 },
system.life = { min: 5, max: 15 }
system.colors.push(new RGBA(255, 0, 0, 1))
system.colors.push(new HEX("#00ff00"))

Init the particle system

system.init()