Package detail

<picture> <source media="(prefers-color-scheme: dark)" srcset="https://particulab.vercel.app/_astro/logo.BdmdAPAp.png"/> <source media="(prefers-color-scheme: light)" srcset="https://particulab.vercel.app/_astro/logo-light.DbNBGWNZ.png"/> </picture>

✨ A lightweight and customizable JavaScript particle system for stunning interactive visuals — perfect for websites, games, and UI effects.

Features

• ⚙️ Fully customizable: colors, shapes, physics, interactivity
• 🧠 Tiny & fast: minimal bundle size with high performance
• 🎮 Great for: splash screens, landing pages, and UIs

Installation

$ npm i particulab

Quick Start

In the following example, we are going to create a basic particle system with 100 particles. We want to have red and purple particles which move slowly across the screen.

Create the Particle System

import * as particulab from 'particulab'
const canvas = document.getElementById('canvas') as HTMLCanvasElement
const system = new particulab.ParticleSystem(canvas, 
    {
        canvasSize: { x: 800, y: 600 }
        amount: 100
        lifeSpan: particulab.range(5, 15)
    }
)

// Set visual properties for the particles
system.size = particulab.range(1, 3)
system.speed = { x: particulab.range(-2, 2), y: particulab.range(-2, 2) }
system.colors.push(new particulab.HEX("ff0000"))
system.colors.push(new particulab.RGBA(255, 255, 0, 1))
system.opacity = particulab.range(50, 100)

// Select a custom image for the particles
system.shapes.push[new ParticleImage('assets/myImage.png')]

system.init()

Docs

Check out full usage, options, and examples here: 👉 https://particulab.vercel.app/docs

Built with 🩵 by Aneks