Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/transitive-bullshit/react-particle-animation
✨Canvas-based particle animation for React.
https://github.com/transitive-bullshit/react-particle-animation
animation canvas react react-component
Last synced: 25 days ago
JSON representation
✨Canvas-based particle animation for React.
- Host: GitHub
- URL: https://github.com/transitive-bullshit/react-particle-animation
- Owner: transitive-bullshit
- Created: 2018-04-01T15:50:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:33:38.000Z (about 2 years ago)
- Last Synced: 2024-12-10T00:51:07.167Z (about 1 month ago)
- Topics: animation, canvas, react, react-component
- Language: JavaScript
- Homepage: https://transitive-bullshit.github.io/react-particle-animation/
- Size: 1.18 MB
- Stars: 90
- Watchers: 4
- Forks: 22
- Open Issues: 35
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-particle-animation ([demo](https://transitive-bullshit.github.io/react-particle-animation/))
> ✨ Canvas-based particle animation for React.
[](https://www.npmjs.com/package/react-particle-animation) [](https://travis-ci.com/transitive-bullshit/react-particle-animation) [](https://standardjs.com)
## Install
```bash
npm install --save react-particle-animation
# or
yarn add react-particle-animation
```
## Usage
Check out the [demo](https://transitive-bullshit.github.io/react-particle-animation/) in the [example folder](https://github.com/transitive-bullshit/react-particle-animation/tree/master/example).
```jsx
import React, { Component } from 'react'
import ParticleAnimation from 'react-particle-animation'
class Example extends Component {
render () {
return (
)
}
}
```
## Props
| Property | Type | Default | Description |
|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
| `numParticles` | number | 400 | Number of particles to use. |
| `interactive` | boolean | true | Whether or not animation responds to mouse hover. |
| `color` | object | { r: 158, g: 217, b: 249, a: 255 } | Base rgba particle color. |
| `background` | object | { r: 255, g: 255, b: 255, a: 255 } | Background rgba color. |
| `lineWidth` | number | 1.0 | Connecting line width. |
| `particleRadius`| number | 1.0 | Scaling factor for particle radii. |
| `particleSpeed` | number | 1.0 | Scaling factor for particle speed. |
| `...` | ... | undefined | Any other props are applied to the root canvas element. |
Note that for colors, `rgba` are all floating point numbers between 0 and 255 (inclusive).
Note that the canvas size will automatically be inferred based on available space via [react-sizeme](https://github.com/ctrlplusb/react-sizeme), so it should be really easy to use this component as a fullscreen background as in the [demo](https://transitive-bullshit.github.io/react-particle-animation/).
## Related
- [particles.js](https://github.com/VincentGarreau/particles.js) - Older particle animation. Oddly enough, I developed this animation in Java back in 2008, though the two animations are AFAIK unrelated to each other.
- [Intersection.Aggregate](http://www.complexification.net/gallery/machines/interAggregate/index.php) - Jared Tarbell's original processing work from 2004 which this animation was inspired by (e.g., visualizing the intersections between circles moving about randomly).
## License
MIT © [transitive-bullshit](https://github.com/transitive-bullshit)
This module was bootstrapped with [create-react-library](https://github.com/transitive-bullshit/create-react-library).
Support my OSS work by following me on twitter 