Hello Partikle!

Published at 2024/11/05

PARTIKLE is a zero-dependency library for rendering floating particles

Maybe you didn't notice, but I've changed recently the way I render those floating particles on my website - I've built my own small library for it (and it's Open Source!! 🙌)

Usage is simple as its size (1.49kB! 😅) - just include its unpkg resource (<script src="https://unpkg.com/partikle"></script> updated: <script src="https://unpkg.com/partikle@latest/dist/index.iife.js"></script>) and you're ready to go!

<script src="https://unpkg.com/partikle@latest/dist/index.iife.js"></script>
<div class="particle-canvas-wrapper" style="width: 100%; height: 100vh; position: relative; overflow: hidden;">
  <div class="particle-canvas"></div>
</div>
<script>
partikle({
  nodeId: 'particle-canvas',
  particleColor: '#fefefe',
  particlesAmount: 400
});
</script>

The only prerequisite is to add following styles for the wrapper node that will contain particles:

{
  position: relative;
  overflow: hidden;
}

You can check the source code here.

Enjoy!

-- Å‚.