ParticleGround.ts

ParticleGround.ts is a React component library that creates a particle animation effect on a canvas, inspired by jquery.particleground.js.

Visit the project site: Particleground.ts

Installation

Install via npm and yarn:

npm install particleground.ts

yarn add particleground.ts

Usage

import React from 'react';
import ParticleGround from 'particleground.ts';

const App = () => {
  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh',overflow: 'hidden',
        backgroundColor: '#000000', }}>
      <ParticleGround />
    </div>
  );
};

export default App;

Props

| Prop Name | Type | Default Value | Description | |---------------------|--------------------|---------------|-------------| | minSpeedX | number | 0.1 | Minimum horizontal speed. | | maxSpeedX | number | 0.7 | Maximum horizontal speed. | | minSpeedY | number | 0.1 | Minimum vertical speed. | | maxSpeedY | number | 0.7 | Maximum vertical speed. | | directionX | 'center' \| 'left' \| 'right' | 'center' | Direction of horizontal movement. | | directionY | 'center' \| 'up' \| 'down' | 'center' | Direction of vertical movement. | | density | number | 10000 | Particle density. | | dotColor | string | '#666666' | Color of the particles. | | lineColor | string | '#666666' | Color of the lines connecting particles. | | particleRadius | number | 7 | Radius of the particles. | | lineWidth | number | 1 | Width of the lines connecting particles. | | curvedLines | boolean | false | Enable or disable curved lines. | | proximity | number | 100 | Distance at which particles connect. | | parallax | boolean | true | Enable or disable parallax effect. | | parallaxMultiplier| number | 5 | Strength of the parallax effect. | | onInit | () => void | () => {} | Callback for initialization. | | onDestroy | () => void | () => {} | Callback for cleanup. |

Demo

You can view a live demo of the Particleground.ts library here.

Or clone the repository and run the demo locally:

git clone https://github.com/Sivamani-18/particleground.ts.git
cd particleground.ts
npm install
npm start

This will start a local development server where you can see the Particleground.ts in action.

License

Licensed under the MIT License.