[go: up one dir, main page]

@flodlc/nebula
TypeScript icon, indicating that this package has built-in type declarations

1.0.56 • Public • Published

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

/@flodlc/nebula/

    Package Sidebar

    Install

    npm i @flodlc/nebula

    Weekly Downloads

    774

    Version

    1.0.56

    License

    MIT

    Unpacked Size

    51.6 kB

    Total Files

    27

    Last publish

    Collaborators

    • flodlc