Kinetics is a versatile and easy to use open source javascript particle system that interacts with page elements.

//CDN <script src="https://unpkg.com/@drum-n-bass/kinetics"></script>

//NPM npm install @drum-n-bass/kinetics

Easy to control via HTML data-attributes – built-in user event interaction handlers

//html
<div data-kinetics-mode-type="party">....</div>
<div data-kinetics-attraction-type="drone">....</div>

Made for developers and digital artists

//js
const k = new Kinetics(...);
k.interactionHook();  // optional
k.set(...)

//params
{
  "spring": {
    "tension": 8,
    "friction": 10,
    "randomTension": 50,
    "randomFriction": -4,
    "extendedRestDelay": 10
  },
  "particles": {
    "count": 16,
    "sides": {"min": 3, "max": 4},
    "sizes": {"min": 5, "max": 50},
    "rotate": {"speed": 1.5, "direction": null},
    "parallex": {
      "layers": 3,
      "speed": 0.15
    },
    "fill": {
      "colors": ["#FFD166", "#EF476F", "#06D6A0", "#118AB2"],
      "toColors": ["#FFD166", "#EF476F", "#06D6A0", "#118AB2"],
      "opacity": 1
    },
    "stroke": {
      "colors": [],
      "toColors": [],
      "opacity": 0,
      "width": []
    }
  }
}