Modes

Search…

Modes

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

Modify Modes
Set a mode with params on init
1
const params = {
2
  "particles": {
3
    "mode": {
4
      "type": "linear",
5
      "speed": 5,
6
      "boundery": "endless"
7
    }
8
  }
9
};
10
​
11
const kinetics = new Kinetics(params).interactionHook();
Copied!
Set a mode via the jscript api
1
kinetics.set(...)
Copied!
Set a mode with html via intersection observers
1
<section data-kinetics-mode
2
data-kinetics-mode-type="rain"
3
data-kinetics-mode-speed="5">
4
Purple Rain, Purple Rain</section>
5
​
6
<section data-kinetics-mode
7
data-kinetics-mode-boundery="emitter"
8
data-kinetics-mode-type="linear"
9
data-kinetics-mode-speed="10">
10
Linear emitter</section>
Copied!
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 4mo ago

Copy link

Contents

Modify Modes

Set a mode with params on init

Set a mode via the jscript api

Set a mode with html via intersection observers

Type

Speed

Boundery