Basic
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.
Length
Define number of stars by adding data-length="300"
. Default is 150.
Radius
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.