https://github.com/flodlc/nebula
Nebula is a lightweight JavaScript library for creating beautiful universe and sky animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
https://github.com/flodlc/nebula
canvas js nebula planets reactjs stars vanilla-js
Last synced: about 1 month ago
JSON representation
Nebula is a lightweight JavaScript library for creating beautiful universe and sky animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
- Host: GitHub
- URL: https://github.com/flodlc/nebula
- Owner: flodlc
- Created: 2022-01-27T16:23:21.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-09-25T17:22:57.000Z (over 2 years ago)
- Last Synced: 2025-02-27T11:42:12.088Z (about 2 months ago)
- Topics: canvas, js, nebula, planets, reactjs, stars, vanilla-js
- Language: TypeScript
- Homepage: https://nebula-demo.vercel.app/
- Size: 1.13 MB
- Stars: 56
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Nebula
### Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe and sky 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`
```javascript
import { createNebula } from "@flodlc/nebula";
const element = document.getElementById("nebula-element");
const nebula = createNebula(element, {
starsCount: 250,
starsRotationSpeed: 3,
nebulasIntensity: 8,
...
});
// ... if needed:
nebula.destroy()
```
#### `React`
```javascript
import { ReactNebula } from "@flodlc/nebula";
export default App = () => {
return (
<>
// With default config
// With custom config
>
);
}
```
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`
