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.