Home

Awesome

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

PropertyTypeDefaultDescription
numParticlesnumber300Number of particles (stars) to use.
lineWidthnumber2.0Line width affecting particle size.
alphaFactornumber1.0Scaling factor for particle opacity.
depthnumber300Scaling factor for particle depth.
......undefinedAny 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 <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>