ParticlesML.vue

<template>
  <Particles
    id="tsparticles"
    :options="$options.config"
    class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
  />
</template>

<script>
import Vue from 'vue'
import Particles from 'particles.vue'

Vue.use(Particles)
const links = {
  color: {
    value: '#ccc',
  },
  distance: 250,
  enable: true,
  frequency: 0.8,
  opacity: 0.8,
  width: 3,
}

export default {
  config: {
    pauseOnBlur: true,
    pauseOnOutsideViewport: true,
    detectRetina: true,
    fpsLimit: 10,
    background: {
      color: {
        value: 'transparent',
      },
    },
    interactivity: {
      detectsOn: 'canvas',
      events: {
        onDiv: {
          enabled: true,
          selectors: '#tsparticles-limit',
          mode: 'repulse',
          type: 'circle',
        },
        onClick: {
          enable: true,
          mode: 'push',
        },
        onHover: {
          enable: true,
          mode: 'grab',
          parallax: {
            enable: true,
            force: 400,
          },
        },
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 1,
          size: 40,
        },
        grab: {
          distance: 400,
        },
        push: {
          quantity: 2,
        },
        repulse: { distance: 200, duration: 0.4, speed: 0.1 },
      },
    },
    particles: {
      color: {
        value: ['#5bc0eb', '#fde74c', '#9bc53d', '#e55934'],
      },
      move: {
        enable: true,
        direction: 'top-right',
        random: true,
        speed: 0.5,
        outModes: 'out',
      },
      number: {
        density: {
          enable: false,
        },
        value: 100,
      },
      size: {
        random: {
          enable: true,
          minimumValue: 20,
        },
        value: 40,
        minimumValue: 20,
        animation: {
          enable: false,
          speed: 4,
          minimumValue: 10,
        },
      },
      shape: {
        type: Array(16).fill('circle').fill('image', 1, 16),
        options: {
          circle: {
            particles: {
              links,
              size: {
                value: 20,
                minimumValue: 4,
              },
            },
          },
          image: [
            ...Array(40).fill({
              src: '/particles/g.svg',
              particles: {
                links,
              },
            }),
            ...Array(3).fill({
              src: '/particles/duniter.svg',
              particles: {
                links: {
                  distance: 350,
                  enable: true,
                  frequency: 1,
                  opacity: 1,
                  width: 6,
                },
              },
            }),
            ...Array(1).fill({
              src: '/particles/cesium.svg',
              particles: {
                links: {
                  distance: 350,
                  enable: true,
                  frequency: 1,
                  opacity: 1,
                  width: 6,
                },
              },
            }),
            ...Array(1).fill({
              src: '/particles/geconomicus1.png',
              particles: {
                links: {
                  distance: 350,
                  enable: true,
                  frequency: 1,
                  opacity: 1,
                  width: 6,
                },
              },
            }),
            ...Array(1).fill({
              src: '/particles/geconomicus2.png',
              particles: {
                links: {
                  distance: 350,
                  enable: true,
                  frequency: 1,
                  opacity: 1,
                  width: 6,
                },
              },
            }),
            {
              src: '/particles/bomb.svg',
              width: 32,
              height: 32,
              particles: {
                links: {
                  enabled: false,
                },
              },
            },
            {
              src: '/particles/nyan-cat.png',
              width: 160,
              height: 120,
              particles: {
                links: {
                  color: {
                    value: '#FF9900',
                  },
                  distance: 500,
                  enable: true,
                  frequency: 1,
                  opacity: 0.8,
                  width: 1,
                },
                size: {
                  value: 120,
                  minimumValue: 100,
                },
              },
            },

            ...[].concat(
              ...Array(4).fill(
                Array.from({ length: 8 }, (v, k) => ({
                  src: `/particles/avatars/avatar${k}.svg`,
                  particles: {
                    links,
                  },
                }))
              )
            ),
          ],
        },
      },
    },
  },
  data() {
    return {}
  },
  beforeMount() {
    // this.$options.config.particles.links.distance = window.innerWidth / 6
  },
}
</script>

<style lang="postcss" scoped>
#tsparticles {
  width: 100vw;
}
</style>