JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<span class="dotBg" id="dotAni"><canvas></canvas></span>

CSS

html, body {
  height: 100%;
  margin: 0;
  background: #002661;
}

.dotBg {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 100%;
}

.dotBg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript

var dotMotion = function(dotEle){
  function _calc1(e, t) { return Math.sqrt(Math.pow(t[0]-e[0], 2) + Math.pow(t[1]-e[1], 2)); }
  function _calc2(e, t, o, i) {
    var s = e / i - 1;
    return o * (s * s * (2.2 * s + 1.2) + 1) + t;
  }
  function randomRange(min,max){ return Math.floor(Math.random()*(max-min+1)+min); }
  // ******************* End ******************* //

  var textPos = [
    [1,2,1,1,0,0,0,1,2,1,1],
    [1,2,2,2,0,0,0,1,2,2,1],
    [1,2,2,2,0,0,0,1,2,1,1],
    [3,3,2,2,0,0,0,2,1,2,3],
    [3,3,1,2,2,2,2,1,1,2,3],
    [1,1,1,1,2,2,2,3,3,2,1],
    [1,1,1,1,2,2,2,1,1,2,1],
    [1,2,2,2,0,0,0,3,2,2,1],
    [3,2,2,2,0,0,0,2,2,2,3],
    [1,2,2,2,0,0,0,2,2,2,3],
    [1,1,2,2,0,0,0,2,2,2,1],
    [1,1,2,2,0,0,0,1,2,2,1]
  ];
  var textRightPos = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];


  var dotEvent = {
    componentDidMount: function() {
      _this.ctx = _this.canvas.getContext("2d"), _this.handleResize(), window.addEventListener("resize", _this.handleResize);
      $(_this.parentNode).off(".animationMouse").on({"mousemove.animationMouse":dotEvent.handleHover,"mouseenter.animationMouse":dotEvent.handleEnter,"mouseleave.animationMouse":dotEvent.handleLeave});
    },
    componentWillUnmount: function() {
      cancelAnimationFrame(_this.loop), window.removeEventListener("resize", _this.handleResize);
      $(_this.parentNode).off(".animationMouse");
    },
    handleEnter: function() {
      _this.active || (_this.active = !0, cancelAnimationFrame(_this.loop), _this.animateLoop());
    },
    handleLeave: function() {
      _this.active = !1, cancelAnimationFrame(_this.loop);
      _this.mouseCoordsOld = [-1, -1];
    },
    handleHover: function(e) {
      _this.mouseCoordsOld = [_this.mouseCoords[0], _this.mouseCoords[1]];
      _this.mouseCoords = [e.clientX * window.devicePixelRatio, e.clientY * window.devicePixelRatio];
    },
    handleResize: function() {
      _this.width = _this.offsetWidth * window.devicePixelRatio, _this.height =...