particles-blob
v1.0.3
Published
`ParticlesBlob` is a customizable particle animation component for React. You can use it to create dynamic, visually appealing particle effects in your applications with minimal effort.
Downloads
9
Readme
ParticlesBlob
ParticlesBlob
is a customizable particle animation component for React. You can use it to create dynamic, visually appealing particle effects in your applications with minimal effort.
Features
- Customize particle size, amount, and animation duration
- Apply border radius, blur, and blend mode effects
- Use gradient or solid colors as background
- Lightweight and easy to integrate into any React project
Installation
To install the package, use npm or yarn:
NPM
npm install particles-blob
Yarn
yarn add particles-blob
Usage
Once installed, you can import and use the ParticlesBlob
component in your project like this:
import React from 'react';
import ParticlesBlob from 'particles-blob';
const App: React.FC = () => {
return (
<div>
<ParticlesBlob
particleSize={200}
animationDuration={5}
amount={50}
borderRadius={100}
blur={0}
blendMode="normal"
backgroundColors="radial-gradient(63.62% 69.52% at 100% 0%, rgba(247, 214, 98, 0.8) 0%, rgba(247, 214, 98, 0.17) 52.08%, rgba(247, 214, 98, 0) 100%)"
/>
</div>
);
};
export default App;
Props
Here’s a list of all the props that can be passed to the ParticlesBlob
component:
| Prop | Type | Description | Default Value |
|---------------------|-----------|------------------------------------------------------------|---------------|
| particleSize
| number
| Defines the size of particles. | 100
|
| animationDuration
| number
| Sets the animation duration of particles (in seconds). | 5
|
| amount
| number
| Specifies the number of particles. | 30
|
| borderRadius
| number
| Controls the border radius of the particles. | 50
|
| blur
| number
| Applies a blur effect to the particles. | 0
|
| blendMode
| string
| Specifies the background blend mode for the particles. | "normal"
|
| backgroundColors
| string
| Sets the background color or gradient for the particles. | ""
|
Example
import React from 'react';
import ParticlesBlob from 'particles-blob';
const Example = () => (
<div>
<ParticlesBlob
particleSize={150}
animationDuration={4}
amount={40}
borderRadius={75}
blur={10}
blendMode="multiply"
backgroundColors="radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)"
/>
</div>
);
export default Example;
Customization
You can pass any valid CSS background
value to the backgroundColors
prop, including gradients, solid colors, or multiple backgrounds. Combine the effects of blur
, borderRadius
, and blendMode
to create unique visual styles.
Blend Modes
The blendMode
prop allows you to choose different background blend modes, such as:
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
Contributing
If you’d like to contribute to the development of ParticlesBlob
, please feel free to submit a pull request or open an issue.
License
This project is licensed under the MIT License. See the LICENSE file for more details.