const {
  useRef,
  useLayoutEffect,
} = React
// import React, { useRef, useLayoutEffect } from 'react';

function R(max) {
  return Math.random() * max
};

function Background(props) {
  const {
    total = 40
  } = props
  const ref = useRef()

  useLayoutEffect(() => {
    const contanier = ref.current
    const w = window.innerWidth
    const h = window.innerHeight
    const dots = []

    function addAnimation(elm) {
      return TweenLite.to(elm, R(20) + 10, {
        bezier: {
          values: [{
            x: R(w),
            y: R(h)
          }, {
            x: R(w),
            y: R(h)
          }]
        },
        opacity: R(1),
        scale: R(1) + 0.5,
        delay: R(2),
        onComplete: addAnimation,
        onCompleteParams: [elm]
      })
    }

    for (let i = 0; i < total; i++) {
      const div = document.createElement('div')
      TweenLite.set(div, {
        attr: {
          class: 'dot'
        },
        x: R(w),
        y: R(h),
        opacity: 0
      })
      container.appendChild(div);
      const dot = addAnimation(div)
      dot.play()
      dots.push(dot)
    }
    
    return () => {
      // Clear animations and whatever here
      dots.forEach(dot=>dot.kill())
      container.innerHTML = ''
    }
  }, [total])
  return <div className="fireflies" ref={ref} />
}

function App() {
  return <Background total={25} / >
}

ReactDOM.render( <App / > , document.querySelector("#container"))

body {
  background-color: #222222;
  overflow: hidden;
}

.dot {
  width: 4px;
  height: 4px;
  position: absolute;
  background-color: #ff00cc;
  box-shadow: 0px 0px 10px 2px #ff00cc;
  border-radius: 20px;
  z-index: 2;
}

.fireflies {
  width: 100%;
  height: 100%;
}

<div id="container" />

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<!-- TweenMax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>