The Particles Storm

The Particles Storm is a React library designed to create stunning canvas-based particle animations. It renders a swarm of dynamic particle elements that move gracefully across the screen. When particles get close to each other, they connect with lines that fade out smoothly as they move apart, providing an engaging and modern visual effect.

Features

• Dynamic Motion: Particles move in random directions with smooth animations.
• Canvas-Based Rendering: Utilizes the HTML5 Canvas API for high-performance, efficient rendering, especially with large particle counts.
• Interconnectivity: Lines dynamically appear between particles when they are within a specified distance, and fade elegantly as they separate.
• Highly Customizable: Adjust particle count, size, motion speed, line connection distance, background color, and other properties to fit your design.

Installation

To add The Particles Storm to your React project, install it via npm or yarn:

npm install particles-storm
# or
yarn add particles-storm

Usage

Integrating The Particles Storm is quick and easy:

import ParticleCanvas from 'particles-storm';

const App = () => (
  <ParticleCanvas
    width={800}
    height={600}
    numParticles={100}
    lineDistance={120}
    particleColor="#f39c12"
    lineColor="rgba(243, 156, 18, 0.6)"
    backgroundColor="black"
    speed={3}
    drift={0.5}
    sizeRange={[3, 6]}
    hidden={false}
  />
);

export default App;

API

| Prop | Type | Default | Description | |------------------|------------|---------------------------|--------------------------------------------| | width | number | 800 | The width of the canvas container. | | height | number | 600 | The height of the canvas container. | | numParticles | number | 100 | Number of particles to display. | | lineDistance | number | 100 | Maximum distance for line connections. | | particleColor | string | '#3498db' | Color of the particles. | | lineColor | string | 'rgba(52, 152, 219, 0.5)' | Color of the connecting lines. | | backgroundColor| string | 'white' | Background color of the canvas. | | speed | number | 2 | Speed of particle motion. | | drift | number | 0.35 | Random drift factor for particle movement. | | sizeRange | array | [2, 4] | Range of particle sizes (min, max). | | hidden | boolean | false | Whether to hide the canvas entirely. |

Customization

The library supports various levels of customization to help you achieve the desired look and feel for your application. Update colors, adjust sizes, and tweak the distance for connections to create unique animations that captivate users.

Contribution

The Particles Storm is open source, and contributions are welcome. Help us improve or suggest new features by visiting our GitHub repository.

Bring life to your React applications with The Particles Storm and create engaging, interactive experiences with ease!