Interactivity Modes

interactivity.modes defines mode-specific settings used by events.

Example

interactivity: {
  modes: {
    grab: {
      distance: 170,
      links: {
        opacity: 0.45,
      },
    },
    bubble: {
      distance: 180,
      size: 12,
      duration: 2,
    },
    push: {
      quantity: 6,
    },
    repulse: {
      distance: 130,
      duration: 0.35,
    },
  },
}

Emitter / Absorber

These modes are available when the corresponding plugin package is loaded.

Mode	Type	Notes
emitter	object / array	See Emitters plugin
absorber	object / array	See Absorbers plugin
absorber-split	-	Splits the absorber under the cursor, see Absorbers plugin

absorber-split is a click mode: enable it under interactivity.events.onClick.mode to split the absorber under the pointer. The absorber also needs split.enable set to true; the same option enables automatic splitting when the absorber reaches its size limit.

Practical guidance

• Enable only the modes you really use.
• Keep distances moderate for stable performance.
• Use Start/Pause controls for expensive mode combinations.

Related pages:

• Interactivity Click
• Interactivity Hover
• Interactivity Div

Source reference

• https://github.com/tsparticles/tsparticles/blob/main/markdown/Options/Interactivity/Modes.md