React Particles Lite

A high-performance, lightweight particle engine for React. Built with TypeScript and optimized with QuadTree spatial partitioning, image caching and physics for smooth 60FPS interactions even with hundreds of particles.

Features

• 🚀 Performant: Uses QuadTree for O(n log n) interaction calculations.
• 🛠 Customizable: Control shapes, movement, sway, depth blur, and interactivity.
• 📱 Responsive: Automatically handles canvas resizing.
• 📦 Zero Dependencies: Only depends on React as a peer dependency.
• 🎨 Presets: Built-in default preset to get started in seconds.

Installation

npm install react-particles-lite
# or
yarn add react-particles-lite

Quick Start

import { Particles } from "react-particles-lite";

function App() {
  return (
    <div style={{ width: "100vw", height: "100vh", background: "#000" }}>
      <Particles
        preset="default"
        params={{
          number: { value: 100, density: { enable: true, area: 800 } },
          color: { value: "#ffffff" },
          move: { speed: 1.5 },
        }}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | ------------ | ------------ | ------------ | ------------ | | params | IParticleParams | {} | Advanced configuration object. | | preset | TPresets | "default" | Base configuration template. | | className | string | undefined | CSS class for the canvas element. | | onLoaded | () => void | undefined | Callback fired when all assets (images) are loaded. |

Configuration Options (IParticleParams)

| Option | Description | | --- | --- | | number | Control the quantity and the density of the particles. | | shape | Supports circle, edge, triangle, polygon, star and image. | | opacity | Static or animated opacity settings. | | size | Static or pulsating size settings. | | move | Speed, direction and out-of-bounds behavior. | | interactivity | Mouse hover (grab, bubble, repulse) and click (push, remove) events. | | depthBlur | Simulates depth of field based on particle size. | | sway | Adds organic, oscillating movement |

License

ISC © Nikoloz Topuridze