react-starfield-animation (demo)
✨ Canvas-based starfield animation for React.
Install
npm install --save react-starfield-animationUsage
Check out the demo.
import React, { Component } from 'react'
import StarfieldAnimation from 'react-starfield-animation'
class Example extends Component {
render () {
return (
<StarfieldAnimation
style={{
position: 'absolute',
width: '100%',
height: '100%'
}}
/>
)
}
}Props
| Property | Type | Default | Description |
|---|---|---|---|
numParticles |
number | 300 | Number of particles (stars) to use. |
lineWidth |
number | 2.0 | Line width affecting particle size. |
alphaFactor |
number | 1.0 | Scaling factor for particle opacity. |
depth |
number | 300 | Scaling factor for particle depth. |
... |
... | undefined | Any other props are applied to the root canvas element. |
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
- react-particle-animation - Canvas-based particle animation for React.
- astral app - A tool for organizing your GitHub stars with ease. Credit for the original animation goes to Collin Henderson.
License
MIT © Travis Fischer
This module was bootstrapped with create-react-library.
Support my OSS work by following me on twitter
