Modes

A mode of Kinetics defines the behaviour in movement of the Particles.

Modify Modes
Set a mode with params on init
const params = {
  "particles": {
    "mode": {
      "type": "linear",
      "speed": 5,
      "boundery": "endless"
    }
  }
};
​
const kinetics = new Kinetics(params).interactionHook();
Set a mode via the jscript api
kinetics.set(...)
Set a mode with html via intersection observers
<section data-kinetics-mode
data-kinetics-mode-type="rain"
data-kinetics-mode-speed="5">
Purple Rain, Purple Rain</section>
​
<section data-kinetics-mode
data-kinetics-mode-boundery="emitter"
data-kinetics-mode-type="linear"
data-kinetics-mode-speed="10">
Linear emitter</section>
Type
We plan to make this part modular in the future to easy come up with own modes. For now kinetics offers these types :
rain
wind
wind-from-right
wind-from-left
linear
space
party
Speed
How fast particles move. Bigger numbers are faster.
Boundery
Emitter
Emits particles from the center to all edges and spawn new particles when old are out of screen.
Pong
Particles bounce from the corners like in the old videogame "pong"
Endless
Particles disappear on the edges of the screen and spawn new at the opposite side of the screen.
​

Params

NPM

Last modified 1yr ago