JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="gridCanvas"></canvas>
<div id="fps"></div>

CSS

html, body {
    overflow: hidden;
    background: #000;
    padding: 0px; margin: 0px;
    width: 100%; height: 100%;
}
#fps {
  position: absolute;
  top:0;
  left:0;
  color: green;
}

JavaScript

"use strict"

  var fps = {
    startTime : 0,
    frameNumber : 0,
    getFPS : function() {
      this.frameNumber++;
      var d = new Date().getTime(),
          currentTime = ( d - this.startTime ) / 1000,
          result = Math.floor( ( this.frameNumber / currentTime ) );
      if( currentTime > 1 ){
        this.startTime = new Date().getTime();
        f.innerHTML = result;
        this.frameNumber = 0;
      }
      return result;
    }
  };

  var f = document.querySelector("#fps");
  var ctx = document.getElementById('gridCanvas').getContext('2d');
  var width = ctx.canvas.width = window.innerWidth;
  var height = ctx.canvas.height = window.innerHeight;
  var centerX = ctx.canvas.width / 2;
  var centerY = ctx.canvas.height / 2;
  var pixels;
  var dotCount = 3000;
  var friction = 1;
  var kick = 0;
  var halfKick = kick / 2;
  var gravity = 1;

  var dots = [];

  function init() {

    for (var i = 0; i <= dotCount; i++) {
      dots.push({
        x: Math.random() * width,
        y: Math.random() * width,
        vx: 0,
        vy: 0
      });
    }
    DrawGrid();
  }

  function DrawGrid() {
    var count = dots.length;
     for (var i = 0; i < count - 1; i++){
       for (var j = i + 1; j < count; j++){
        var dx = dots[j].x - dots[i].x,
            dy = dots[j].y - dots[i].y;
        var distance2 = (dx * dx) + (dy * dy);
        if (distance2 > 1) {
          var distance = Math.sqrt(distance2);
          var mag = 1 / (distance2 * distance);
          dx *= mag;
          dy *= mag;
          dots[i].vx += dx;
          dots[i].vy += dy;

          dots[j].vx -= dx;
          dots[j].vy -= dy;
        }
      }
    }

    ctx.fillStyle = "rgba(0,0,0,.5)";

    ctx.fillRect(0,0,width, height);
     ctx.fillStyle = "rgba(255, 255, 255, 1)";
    for (var i = 0; i < count; i++) {
      var d = dots[i];
      d.x += d.vx;
      d.y += d.vy;
      // bonk
      if (d.x > width || d.x < 0) {
        d.x = (d.x + width) % width;
        d.vx =...