Search…
Usage
Params
Modes
NPM
Powered By
GitBook
Params
You can init Kinetics with a set of params to change the behaviour and design of the particles.
Kinetics is WIP, so some parameters might change over time.
Debug
1
"debug"
:
false
Copied!
Spring
1
"spring"
:
{
2
"tension"
:
8
,
3
"friction"
:
10
,
4
"randomTension"
:
50
,
5
"randomFriction"
:
-
4
,
6
"extendedRestDelay"
:
10
7
}
Copied!
Canvas
1
"canvas"
:
{
2
"handlePosition"
:
true
3
}
Copied!
Particles
Sides
1
"sides"
:
{
"min"
:
3
,
"max"
:
8
}
Copied!
Sizes
1
"sizes"
:
{
"min"
:
3
,
"max"
:
150
}
Copied!
Rotate
1
"rotate"
:
{
"speed"
:
.3
,
"direction"
:
null
}
Copied!
Mode
Read more about modes
here
​
1
"mode"
:
{
2
"type"
:
"linear"
,
3
"speed"
:
5
,
4
"boundery"
:
"endless"
5
}
Copied!
Parallex
1
"parallex"
:
{
2
"layers"
:
3
,
3
"speed"
:
0.15
4
}
Copied!
Attract
1
"attract"
:
{
2
"chance"
:
0.75
,
3
"force"
:
1
,
4
"grow"
:
2
,
5
"size"
:
null
,
6
"type"
:
"static"
,
7
"speed"
:
1.5
,
8
"direction"
:
-
1
,
9
"radius"
:
1
10
}
Copied!
Fill
1
"fill"
:
{
2
"colors"
:
[
"#ffffff"
],
3
"toColors"
:
[
"#ffffff"
],
4
"opacity"
:
0
5
}
Copied!
Stroke
1
"stroke"
:
{
2
"colors"
:
[
"#ffffff"
],
3
"toColors"
:
[],
4
"width"
:
[
1
],
5
"opacity"
:
1
6
}
Copied!
All Params
A full set of params could look like this.
1
const
params
=
{
2
"debug"
:
false
,
3
"spring"
:
{
4
"tension"
:
8
,
5
"friction"
:
10
,
6
"randomTension"
:
50
,
7
"randomFriction"
:
-
4
,
8
"extendedRestDelay"
:
10
9
},
10
"canvas"
:
{
11
"handlePosition"
:
true
12
},
13
"particles"
:
{
14
"count"
:
10
,
15
"sides"
:
{
"min"
:
3
,
"max"
:
8
},
16
"sizes"
:
{
"min"
:
3
,
"max"
:
150
},
17
"rotate"
:
{
"speed"
:
.3
,
"direction"
:
null
},
18
"mode"
:
{
19
"type"
:
"linear"
,
20
"speed"
:
5
,
21
"boundery"
:
"endless"
22
},
23
"parallex"
:
{
24
"layers"
:
3
,
25
"speed"
:
0.15
26
},
27
"attract"
:
{
28
"chance"
:
0.75
,
29
"force"
:
1
,
30
"grow"
:
2
,
31
"size"
:
null
,
32
"type"
:
"static"
,
33
"speed"
:
1.5
,
34
"direction"
:
-
1
,
35
"radius"
:
1
36
},
37
"fill"
:
{
38
"colors"
:
[
"#ffffff"
],
39
"toColors"
:
[
"#ffffff"
],
40
"opacity"
:
0
41
},
42
"stroke"
:
{
43
"colors"
:
[
"#ffffff"
],
44
"toColors"
:
[],
45
"width"
:
[
1
],
46
"opacity"
:
1
47
}
48
49
}
50
};
Copied!
Previous
Usage
Next
Modes
Last modified
11mo ago
Copy link
Contents
Debug
Spring
Canvas
Particles
Sides
Sizes
Rotate
Mode
Parallex
Attract
Fill
Stroke
All Params