Simply, include <canvas class="constellation"></canvas> inside your section.

Custom color

Add a data-color attribute with your desire color value. It supports HEX, RGB, and RGBA values.


Define number of stars by adding data-length="300". Default is 150.


Define effective radius of mouse cursor by adding data-radius="300". Default is 150.

Over Container

As you can see in the above examples, the stars won't connect together when your cursor moves on the content. That's because .container has relative position. Simply add .position-static to the container to change this behavior. Please notice that this can cause some problems if you also have .overlay or video background in your section.