tsParticles - v4.0.0-beta.12
    Preparing search index...

    Interface IParticlesJSOptions

    this interface is obsolete, please use the new tsParticles options format

    interface IParticlesJSOptions {
        interactivity: {
            detect_on: InteractivityDetect | "canvas" | "parent" | "window";
            events: {
                onclick: { enable: boolean; mode: string };
                onhover: { 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 };
            };
        };
        particles: {
            color: { value: string
            | IRgb
            | IHsl
            | IValueColor };
            line_linked: {
                color: string;
                distance: number;
                enable: boolean;
                opacity: number;
                width: number;
            };
            move: {
                attract: { enable: boolean; rotateX: number; rotateY: number };
                bounce: boolean;
                direction:
                    | MoveDirection
                    | "bottom"
                    | "bottomLeft"
                    | "bottomRight"
                    | "left"
                    | "none"
                    | "right"
                    | "top"
                    | "topLeft"
                    | "topRight"
                    | "outside"
                    | "inside";
                enable: boolean;
                out_mode: "none"
                | OutMode
                | "bounce"
                | "out"
                | "destroy"
                | "split";
                random: boolean;
                speed: number;
                straight: boolean;
            };
            number: {
                density: { enable: boolean; value_area: number };
                value: number;
            };
            opacity: {
                anim: {
                    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 | IRgb | IHsl | IValueColor; width: number };
                type: string;
            };
            size: {
                anim: {
                    enable: boolean;
                    size_min: number;
                    speed: number;
                    sync: boolean;
                };
                random: boolean;
                value: number;
            };
        };
        retina_detect: boolean;
    }
    Index

    Properties

    interactivity particles retina_detect

    Properties

    interactivity: {
        detect_on: InteractivityDetect | "canvas" | "parent" | "window";
        events: {
            onclick: { enable: boolean; mode: string };
            onhover: { 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 };
        };
    }

    Interactivity configuration

    Type Declaration

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

      Event detection mode

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

      Interaction events

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

        Click event configuration

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

        Hover event configuration

      • resize: boolean

        Resize event enabled

    • 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 };
      }

      Interaction modes

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

        Bubble mode configuration

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

        Grab mode configuration

      • push: { particles_nb: number }

        Push mode configuration

      • remove: { particles_nb: number }

        Remove mode configuration

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

        Repulse mode configuration

    particles: {
        color: { value: string | IRgb | IHsl | IValueColor };
        line_linked: {
            color: string;
            distance: number;
            enable: boolean;
            opacity: number;
            width: number;
        };
        move: {
            attract: { enable: boolean; rotateX: number; rotateY: number };
            bounce: boolean;
            direction:
                | MoveDirection
                | "bottom"
                | "bottomLeft"
                | "bottomRight"
                | "left"
                | "none"
                | "right"
                | "top"
                | "topLeft"
                | "topRight"
                | "outside"
                | "inside";
            enable: boolean;
            out_mode: "none"
            | OutMode
            | "bounce"
            | "out"
            | "destroy"
            | "split";
            random: boolean;
            speed: number;
            straight: boolean;
        };
        number: { density: { enable: boolean; value_area: number }; value: number };
        opacity: {
            anim: {
                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 | IRgb | IHsl | IValueColor; width: number };
            type: string;
        };
        size: {
            anim: {
                enable: boolean;
                size_min: number;
                speed: number;
                sync: boolean;
            };
            random: boolean;
            value: number;
        };
    }

    Particle configuration

    Type Declaration

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

      Particle color

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

      Line linked (links) configuration

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

      Movement configuration

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

        Attract configuration

      • bounce: boolean
      • direction:
            | MoveDirection
            | "bottom"
            | "bottomLeft"
            | "bottomRight"
            | "left"
            | "none"
            | "right"
            | "top"
            | "topLeft"
            | "topRight"
            | "outside"
            | "inside"
      • enable: boolean
      • out_mode: "none" | OutMode | "bounce" | "out" | "destroy" | "split"
      • random: boolean
      • speed: number
      • straight: boolean
    • number: { density: { enable: boolean; value_area: number }; value: number }

      Number of particles

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

        Density configuration

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

      Opacity configuration

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

        Opacity animation

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

      Shape configuration

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

        Image shape options

      • polygon: { nb_sides: number }

        Polygon shape options

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

        Stroke configuration

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

      Size configuration

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

        Size animation

      • random: boolean
      • value: number
    retina_detect: boolean

    Enables retina detection

    Settings

    Member Visibility

    On This Page

    Properties