Have ideas to improve npm?Join in the discussion! »


3.0.0 • Public • Published


Take a look at the night sky, right here in your browser. This module adds some pretty looking stars to your html document's background, complete with

  • parallax scrolling
  • random flickering (Perlin noise)
  • dynamic rendering based on display size All without serious effects on your website's performance.


You can find a demo of this module by navigating your browser to ./dist/index.html demo gif showing starry-night module
the quality is quite poor due to this being a GIF image

dependency usage

  1. add <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script> to your html page's <head>
    to prevent the possibility of including p5.js twice, you must include it as a separate script (if you're not using it already)

load starry-night using JsDelivr CDN

  1. add <script src="https://cdn.jsdelivr.net/npm/@nout-kleef/starry-night@2/dist/starry-night.min.js"></script> to your html page's <head>
  2. load https://cdn.jsdelivr.net/npm/@nout-kleef/starry-night@2/dist/img/stars-sprite-12.png, which holds the stars' images

load starry-night using local file

note: you should probably move these files from node_modules to your public_html folder first, using Gulp, Grunt etc. 2) add node_modules/@nout-kleef/starry-night/dist/starry-night.min.js as a script to your html page's <head> 3) copy/load node_modules/@nout-kleef/starry-night/dist/img/stars-sprite-12.png

development usage

  1. sudo npm install
  2. gulp
  3. python -m SimpleHTTPServer (only way to fetch the assets is over http(s))
  4. navigate to or something similar - see terminal
  5. use either the demo page or your own project to make some improvements to this module!


npm i @nout-kleef/starry-night

DownloadsWeekly Downloads






Unpacked Size

9.24 MB

Total Files


Last publish


  • avatar