react-starfield-animation

react-starfield-animation (demo)

✨ Canvas-based starfield animation for React.

Install

npm install --save react-starfield-animation

Usage

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.