Interface IParticlesJSOptions

detect_on: "window" | "canvas" | "parent" | InteractivityDetect

events: {
    onclick: {
        enable: boolean;
        mode: string;
    };
    onhover: {
        enable: boolean;
        mode: string;
    };
    resize: boolean;
}

• onclick: {
      enable: boolean;
      mode: string;
  }

  • enable: boolean

  • mode: string

• onhover: {
      enable: boolean;
      mode: string;
  }

  • enable: boolean

  • mode: string

• resize: boolean

modes: {
    bubble: {
        distance: number;
        duration: number;
        opacity: number;
        size: number;
        speed: number;
    };
    grab: {
        distance: number;
        line_linked: {
            opacity: number;
        };
    };
    push: {
        particles_nb: number;
    };
    remove: {
        particles_nb: number;
    };
    repulse: {
        distance: number;
        duration: number;
    };
}

• bubble: {
      distance: number;
      duration: number;
      opacity: number;
      size: number;
      speed: number;
  }

  • distance: number

  • duration: number

  • opacity: number

  • size: number

  • speed: number

• grab: {
      distance: number;
      line_linked: {
          opacity: number;
      };
  }

  • distance: number

  • line_linked: {
        opacity: number;
    }

    • opacity: number

• push: {
      particles_nb: number;
  }

  • particles_nb: number

• remove: {
      particles_nb: number;
  }

  • particles_nb: number

• repulse: {
      distance: number;
      duration: number;
  }

  • distance: number

  • duration: number

color: {
    value: string | IValueColor | IRgb | IHsl;
}

• value: string | IValueColor | IRgb | IHsl

line_linked: {
    color: string;
    distance: number;
    enable: boolean;
    opacity: number;
    width: number;
}

• color: string

• distance: number

• enable: boolean

• opacity: number

• width: number

move: {
    attract: {
        enable: boolean;
        rotateX: number;
        rotateY: number;
    };
    bounce: boolean;
    direction: "none" | "left" | "top" | "bottom" | "right" | "outside" | "inside" | MoveDirection | "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
    enable: boolean;
    out_mode: "split" | "none" | "bounce" | "destroy" | "out" | OutMode;
    random: boolean;
    speed: number;
    straight: boolean;
}

• attract: {
      enable: boolean;
      rotateX: number;
      rotateY: number;
  }

  • enable: boolean

  • rotateX: number

  • rotateY: number

• bounce: boolean

• direction: "none" | "left" | "top" | "bottom" | "right" | "outside" | "inside" | MoveDirection | "bottomLeft" | "bottomRight" | "topLeft" | "topRight"

• enable: boolean

• out_mode: "split" | "none" | "bounce" | "destroy" | "out" | OutMode

• random: boolean

• speed: number

• straight: boolean

number: {
    density: {
        enable: boolean;
        value_area: number;
    };
    value: number;
}

• density: {
      enable: boolean;
      value_area: number;
  }

  • enable: boolean

  • value_area: number

• value: number

opacity: {
    anim: {
        enable: boolean;
        opacity_min: number;
        speed: number;
        sync: boolean;
    };
    random: boolean;
    value: number;
}

• anim: {
      enable: boolean;
      opacity_min: number;
      speed: number;
      sync: boolean;
  }

  • enable: boolean

  • opacity_min: number

  • speed: number

  • sync: boolean

• random: boolean

• value: number

shape: {
    image: {
        height: number;
        replace_color?: boolean;
        src: string;
        width: number;
    };
    polygon: {
        nb_sides: number;
    };
    stroke: {
        color: string | IValueColor | IRgb | IHsl;
        width: number;
    };
    type: string;
}

• image: {
      height: number;
      replace_color?: boolean;
      src: string;
      width: number;
  }

  • height: number

  • Optional replace_color?: boolean

  • src: string

  • width: number

• polygon: {
      nb_sides: number;
  }

  • nb_sides: number

• stroke: {
      color: string | IValueColor | IRgb | IHsl;
      width: number;
  }

  • color: string | IValueColor | IRgb | IHsl

  • width: number

• type: string

size: {
    anim: {
        enable: boolean;
        size_min: number;
        speed: number;
        sync: boolean;
    };
    random: boolean;
    value: number;
}

• anim: {
      enable: boolean;
      size_min: number;
      speed: number;
      sync: boolean;
  }

  • enable: boolean

  • size_min: number

  • speed: number

  • sync: boolean

• random: boolean

• value: number