react-star-sky

A simple, modifiable p5js based background element displaying a randomized and animated star sky.

Usage no npm install needed!

<script type="module">
  import reactStarSky from 'https://cdn.skypack.dev/react-star-sky';
</script>

README

react-star-sky

A simple, modifiable p5js based background element displaying a randomized and animated star sky.

NPM JavaScript Style Guide

Install

npm install --save react-star-sky

Usage

import React, { Component } from 'react'

import StarSky from 'react-star-sky'
import 'react-star-sky/dist/index.css'

class Example extends Component {
  render() {
    return <StarSky />
  }
}

Optional Properties

<StarSky 
  debugFps={true}   // Default = false
  frameRate={30}    // Default = 60
  style={{opacity: 0.5}}  // applied to the div wrapper
  className={''}  // applied to the div wrapper
  starColor={'rainbow'} // Default = 'white', options: 'rainbow', 'white/red/green/etc'[w3color], [r, g, b]
  skyColor={[20, 20, 100]} // Default = 'black', options: 'white/red/green/etc'[w3color], [r, g, b]
/>

Potential Future Features

  • Nebulas
  • Planets
  • Falling Stars
  • Galaxies
  • Star Constellations
  • Star Shuffling Mechanic (position change over time)

License

MIT © ZJVieth