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 11mo ago