Particle Network: an animated hero background

How to use it

1. Put a canvas inside your hero

The canvas fills its parent, so the parent needs position: relative and a height.

<section class="hero">
  <canvas data-particles></canvas>
  <h1>Your headline</h1>
</section>

2. Add this CSS

.hero        { position: relative; min-height: 100vh; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; }
.hero h1     { position: relative; }   /* keeps the text above the canvas */

3. Add the script

<script src="particles.js"></script>

Change colours and density

Set the options as attributes on the canvas.

<canvas data-particles
        data-particles-color="#ff5c8a"
        data-particles-link="#ffb86b"
        data-particles-density="6000"
        data-particles-distance="170"
        data-particles-speed="0.5"></canvas>

Control it from JavaScript

If you want to change settings later, for example from a colour picker, create it yourself.

var net = ParticleNetwork(document.querySelector('canvas'), { color: '#7cf7b5', speed: 0.6 });
net.set('color', '#ff5c8a');

Why it stays fast

• It stops when nobody sees it. The animation pauses when the hero is scrolled away or the tab is in the background.
• The dot count has a limit. Even on a very large screen it never draws more than 160 dots.
• It is sharp on retina screens without drawing more than needed.
• It respects reduced motion. Those visitors get a still picture of the network.

Common questions

My text is hard to read on top of it.

Lower the opacity of the canvas in CSS, for example opacity: .5, or raise the density number so there are fewer dots.

Can I click things in the hero?

Yes. Give your content position: relative so it sits above the canvas.

What is in the download

• particles.js the script, about 4 KB
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.