Typescript options for ParticlesJs from https://github.com/VincentGarreau/particles.js/

particles-js-options.ts

interface ColorRgb {
  r: number;
  g: number;
  b: number;
}

interface ColorHsl {
  h: number;
  s: number;
  l: number;
}

type ParticleShapeType = 'circle' | 'edge' | 'triangle' | 'polygon' | 'star' | 'image';

type Direction = 'none' | 'top' | 'top-right' | 'right'
  | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';

type OutMode = 'out' | 'bounce';

type HoverEventInteraction = 'grab' | 'bubble' | 'repulse';

type ClickEventInteraction = 'push' | 'remove' | 'bubble' | 'repulse';

export interface ParticlesJsOptions {
  particles?: {
    number?: {
      value?: number;
      density?: {
        enable?: boolean;
        value_area?: number;
      };
    };
    color?: {
      /**
       * HEX (string)
       * RGB (object)
       * HSL (object)
       * array selection (HEX)
       * random (string)
       */
      value: string | ColorRgb | ColorHsl | string[] | 'random';
    };
    shape?: {
      type?: ParticleShapeType | ParticleShapeType[];
      stroke?: {
        width?: number;
        /** HEX (string) */
        color?: string;
      };
      polygon?: {
        nb_slides: number;
      };
      image?: {
        /** path link: svg / png / gif / jpg */
        src?: string;
        /** (for aspect ratio) */
        width?: number;
        /** (for aspect ratio) */
        height?: number;
      };
    };
    opacity?: {
      value?: number;
      random?: boolean;
      anim?: {
        enable?: boolean;
        speed?: number;
        opacity_min?: number;
        sync?: boolean;
      };
    };
    size?: {
      value?: number;
      random?: boolean;
      anim?: {
        enable?: boolean;
        speed?: number;
        size_min?: number;
        sync?: boolean;
      };
    };
    line_linked?: {
      enable?: boolean;
      distance?: number;
      /** HEX (string) */
      color?: string;
      opacity?: number;
      width?: number;
    };
    move?: {
      enable?: boolean;
      speed?: number;
      direction?: Direction;
      random?: boolean;
      straight?: boolean;
      /** change particle position if it is out of canvas */
      out_mode?: OutMode;
      /** between particles */
      bounce?: boolean;
      attract?: {
        enable?: boolean;
        rotateX?: number;
        rotateY?: number;
      };
    };
  };
  interactivity?: {
    detect_on?: 'canvas' | 'window';
    events?: {
      onhover?: {
        enable: boolean;
        mode?: HoverEventInteraction | HoverEventInteraction[];
      };
      onclick: {
        enable: boolean;
        mode?: ClickEventInteraction | ClickEventInteraction[];
      };
      resize?: boolean;
    };
    resize?: boolean;
    modes?: {
      grab?: {
        distance?: number;
        line_linked?: {
          opacity: number
        };
      };
      bubble?: {
        distance?: number;
        size?: number;
        duration?: number;
        opacity?: number;
        speed?: number;
      };
      repulse?: {
        distance?: number;
        duration?: number;
      },
      push?: {
        particles_nb: number;
      },
      remove?: {
        particles_nb: number;
      }
    };
  };
  retina_detect?: boolean;
  [someProperty: string]: any;
}