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.
Last modified 4mo ago