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

Related tags

Animations canvas js reactjs vanilla-js stars planets nebula
Overview

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

const element = document.getElementById("nebula-element"); const nebula = createNebula(element, { starsCount: 250, starsRotationSpeed: 3, nebulasIntensity: 8, ... }); // ... if needed: nebula.destroy()"> 
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

{ return ( <> // With default config // With custom config ); }"> 
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
You might also like...

Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using

Dec 20, 2022

GreenSock's GSAP JavaScript animation library (including Draggable).

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

Jan 8, 2023

Javascript and SVG odometer effect library with motion blur

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

Dec 31, 2022

GreenSock's GSAP JavaScript animation library (including Draggable).

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

Jan 5, 2023

simple JavaScript library to animate texts

simple JavaScript library to animate texts

Animated Texts Hi, this library is a simple javascript text animator Properties force type: number default: 300 start_delay_time type: number default:

Jan 11, 2022

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Jan 2, 2023

Animation library that mimics CSS keyframes when scrolling.

Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Dec 30, 2022

:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

TransitionEnd TransitionEnd is an agnostic and cross-browser library to work with event transitionend. Browser Support 1.0+ ✔ 4.0+ ✔ 10+ ✔ 10.5 ✔ 3.2+

Dec 21, 2022
Comments
  • Feature Request

    Feature Request

    On the demo page if we have an interactive way to tweak the config and see the results appear immediately and being able to copy the config will be great

    enhancement 
    opened by ghana7989 2
  • How to get vanilla version working

    How to get vanilla version working

    Hi, I guess I am missing something obvious but I can't get the vanilla version working.

    If I point to the folder I get the net::ERR_ABORTED 403 error.

    When pointing to a file like this import { createNebula } from "/node_modules/@flodlc/nebula/dist/index.es.js";, I get the following Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

    From my understanding ES6 module specifiers must point to the module file, not the folder. Can I use Nebula without Node/React ?

    opened by fluxxus 0
Releases(1.0.56)
Owner
Florian DE LA COMBLE
Florian DE LA COMBLE
GitHub https://nebula-demo.vercel.app/
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Jan 6, 2023
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Dec 30, 2022
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Jan 4, 2023
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Matteo Bruni 4.7k Jan 4, 2023
Animation Academy teaches you CSS animations using the transition and animation properties.

Animation Academy Open Animation Academy > Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou

Jacob Benowitz 6 Jun 23, 2022
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.7k Jan 8, 2023
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022