Awesome

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.

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

This module was bootstrapped with create-react-library.