JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="gridCanvas" width="1000" height="1000"></canvas>

CSS

body {
   background-color: #000000;
   margin: 0px;
 }
 
 canvas,
 img {
   image-rendering: optimizeSpeed;
   image-rendering: -moz-crisp-edges;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor;
 }

JavaScript

"use strict"

 var ctx = document.getElementById('gridCanvas').getContext('2d');
 ctx.canvas.width = window.innerWidth;
 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 pixel = ctx.createImageData(1, 1);
 pixel.data[0] = 255;
 pixel.data[1] = 255;
 pixel.data[2] = 255;
 pixel.data[3] = 255;

function bonk(dot) {
   // Bonk
   if (dot[0] > ctx.canvas.width) {
     dot[0] = ctx.canvas.width;
     dot[2] = 0;
     dot[3] = 0;
   }
   if (dot[0] < 0) {
     dot[0] = 0;
     dot[2] = 0;
     dot[3] = 0;
   }
   if (dot[1] > ctx.canvas.height) {
     dot[1] = ctx.canvas.height;
     dot[2] = 0;
     dot[3] = 0;
   }
   if (dot[1] < 0) {
     dot[1] = 0;
     dot[2] = 0;
     dot[3] = 0;
   }
 };
 
 function doMovement (dot) {
   dot[0] += dot[2];
   dot[1] += dot[3];
   
   dot[2] /= friction;
   dot[3] /= friction;
   
   bonk(dot);
 }
 
 function init() {
   var vectors = [];
   for (var i = 0; i <= dotCount; i++) {
     vectors.push([
       Math.floor(Math.random() * ctx.canvas.width),
       Math.floor(Math.random() * ctx.canvas.height),
       Math.random() * kick - halfKick,
       Math.random() * kick - halfKick
     ]);
   }

   DrawGrid(vectors);
 }

 function update(dots) {
   for (var i = dotCount; i > 0; i--) {
     for (var j = i - 1; j > 0; j--) {
       var dx = dots[j][0] - dots[i][0];
       var dy = dots[j][1] - dots[i][1];
       var distance = Math.sqrt((dx * dx) + (dy * dy));
       if (distance > 1) {
         var mag = (gravity) / (distance * distance * distance);
         dots[i][2] += dx * mag;
         dots[i][3] += dy * mag;

         dots[j][2] -= dx * mag;
         dots[j][3] -= dy * mag;
       }
     }
   }

   var dot;
   for (var i = dotCount; i > 0; i--) {
     dot = dots[i];
     doMovement(dot);
     var x = dot[0] | 0;
     var y = dot[1] | 0;
    ...