react-particle-animation (demo)
✨ Canvas-based particle animation for React.
Install
npm install --save react-particle-animation # or yarn add react-particle-animationUsage
Check out the demo in the example folder.
import React, { Component } from 'react' import ParticleAnimation from 'react-particle-animation' class Example extends Component { render () { return ( <ParticleAnimation /> ) } }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, so it should be really easy to use this component as a fullscreen background as in the demo.
Related
- 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 - 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
This module was bootstrapped with create-react-library.
