Nebula is a lightweight JavaScript library for creating beautiful universe and sky animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
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 |