Defines which user interactions trigger particle behaviors.
| Key | Type | Notes |
|---|---|---|
onClick |
object |
Triggered on mouse/touch click — see IClickEvent |
onDiv |
object |
Triggered when cursor enters a specific DOM element — see IDivEvent |
onHover |
object |
Triggered when cursor hovers over the canvas — see IHoverEvent |
resize |
boolean |
When true, recalculates layout on window resize (default: true) |
{
"interactivity": {
"events": {
"onHover": {
"enable": true,
"mode": "repulse"
},
"onClick": {
"enable": true,
"mode": "push"
},
"resize": true
}
}
}
{
"interactivity": {
"events": {
"onHover": {
"enable": true,
"mode": "grab"
}
}
}
}
{
"interactivity": {
"events": {
"onClick": {
"enable": true,
"mode": "remove"
}
}
}
}
onHover.mode and onClick.mode accept a string or array of strings from these values:
| Mode | Description |
|---|---|
attract |
Pulls particles toward cursor |
bounce |
Bounces particles away from cursor |
bubble |
Enlarges / changes opacity of nearby particles |
connect |
Draws lines between particles near the cursor |
grab |
Draws a line from cursor to nearby particles |
light |
Simulates a light source at cursor position |
parallax |
Moves particles slightly in response to cursor |
pause |
Pauses all animation while hovering |
push |
Adds new particles at cursor position |
remove |
Removes particles near cursor |
repulse |
Pushes particles away from cursor |
slow |
Slows particles near cursor |
trail |
Emits particles along the cursor path |
Modes are configured under
interactivity.modes— see Modes.
connect, bubble require @tsparticles/slim or higher)onDiv without targeting a real DOM selectorinteractivity.modes