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.