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

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