Search…
Usage

Basic Setup

Embed this code to your website
1
<script src="https://unpkg.com/@drum-n-bass/kinetics"></script>
Copied!
Init Kinetics with default settings.
1
document.addEventListener('DOMContentLoaded', function() {
2
const kinetics = new Kinetics().interactionHook();
3
});
Copied!
Apply some attraction to what ever page elements.
1
<div data-kinetics-attraction>Hello World</div>
Copied!

Init Kinetics with Parameters

To init Kinetics with your custom params, you can just define and load it like this.
1
const params = {
2
"particles": {
3
"count": 10,
4
"sizes": {"min": 3, "max": 150},
5
"rotate": {"speed": .3, "direction": null},
6
}
7
};
8
9
const kinetics = new Kinetics(params).interactionHook();
Copied!
Last modified 5mo ago