Skip to content

transitive-bullshit/react-starfield-animation

Repository files navigation

react-starfield-animation (demo)

✨ Canvas-based starfield animation for React.

NPM Build Status JavaScript Style Guide

Demo

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

License

MIT © Travis Fischer

This module was bootstrapped with create-react-library.

Support my OSS work by following me on twitter twitter