@flodlc/nebula

Nebula

Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

Including configurable Stars, Nebulas, Comets, Planets and Suns.
Nebula comes with a vanilla JS and a React wrapper.
Compatible with SSR

Demo page

Installation

npm install @flodlc/nebula

usage

Vanilla JS

import { createNebula } from "@flodlc/nebula";

<div id="nebula-element"></div>

const element = document.getElementById("nebula-element");

const nebula = createNebula(element, {
    starsCount: 250,
    starsRotationSpeed: 3,
    nebulasIntensity: 8,
    ...
});
// ... if needed:
nebula.destroy()

React

import { ReactNebula } from "@flodlc/nebula";

export default App = () => {
   return (
       <>
           // With default config
           <ReactNebula/>

           // With custom config
           <ReactNebula config={{
               starsCount: 250,
               starsRotationSpeed: 3,
               nebulasIntensity: 8,
               ...
           }}/>
       </>
   );
}

The canvas is positioned absolute and takes the size of its parent.

Config

key	option type	default	Comment
starsCount	number	350	Recommended: < 1000
starsColor	string	#ffffff
starsRotationSpeed	number	3
cometFrequence	number	15	0 disables the comets
nebulasIntensity	number	10
sunScale	number	1	0 hides the Sun
planetsScale	number	1	0 hides the planets
solarSystemOrbite	number	65	Recommended: < 100
solarSystemSpeedOrbit	number	100