Interface IParticlesJSOptions

interface IParticlesJSOptions {
    interactivity: {
        detect_on:
            | "window"
            | "canvas"
            | "parent"
            | InteractivityDetect;
        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
                | IValueColor
                | IRgb
                | IHsl;
        };
        line_linked: {
            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;
        };
        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
                    | IValueColor
                    | IRgb
                    | IHsl;
                width: number;
            };
            type: string;
        };
        size: {
            anim: {
                enable: boolean;
                size_min: number;
                speed: number;
                sync: boolean;
            };
            random: boolean;
            value: number;
        };
    };
    retina_detect: boolean;
}

Properties

interactivity particles retina_detect

Properties

interactivity

interactivity: {
    detect_on:
        | "window"
        | "canvas"
        | "parent"
        | InteractivityDetect;
    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

particles: {
    color: {
        value:
            | string
            | IValueColor
            | IRgb
            | IHsl;
    };
    line_linked: {
        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;
    };
    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
                | IValueColor
                | IRgb
                | IHsl;
            width: number;
        };
        type: string;
    };
    size: {
        anim: {
            enable: boolean;
            size_min: number;
            speed: number;
            sync: boolean;
        };
        random: boolean;
        value: number;
    };
}

retina_detect

retina_detect: boolean

Settings

Member Visibility

On This Page

Properties