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 Point(x, y) {
   this.x = x || 0;
   this.y = y || 0;
 }

 function Dot(x, y, m) {
   this.x = x || Math.floor(Math.random() * ctx.canvas.width);
   this.y = y || Math.floor(Math.random() * ctx.canvas.height);
   this.vector = new Point((Math.random() * kick) - halfKick, (Math.random() * kick) - halfKick);
   this.mass = m || 1;
 }

 Dot.prototype.Bounce = function() {
   // Bounce
   var bounce = -.5
   if (this.x > ctx.canvas.width) {
     this.x = ctx.canvas.width;
     this.vector.x *= bounce;
   }
   if (this.x < 0) {
     this.x = 0;
     this.vector.x *= bounce;
   }
   if (this.y > ctx.canvas.height) {
     this.y = ctx.canvas.height;
     this.vector.y *= bounce;
   }
   if (this.y < 0) {
     this.y = 0;
     this.vector.y *= bounce;
   }
 };

 Dot.prototype.Wrap = function() {
   // wrap
   if (this.x > ctx.canvas.width) {
     this.x = 0;
   }
   if (this.x < 0) {
     this.x = ctx.canvas.width;
   }
   if (this.y > ctx.canvas.height) {
     this.y = 0;
   }
   if (this.y < 0) {
     this.y = ctx.canvas.height;
   }
 };

 Dot.prototype.Bonk = function() {
   // Bonk
   if (this.x > ctx.canvas.width) {
     this.x = ctx.canvas.width;
     this.vector.x = 0;
     this.vector.y = 0;
   }
   if (this.x < 0) {
     this.x = 0;
     this.vector.x = 0;
     this.vector.y = 0;
   }
   if (this.y > ctx.canvas.height) {
     this.y = ctx.canvas.height;
     this.vector.x = 0;
     this.vector.y = 0;
   }
   if (this.y < 0) {
     this.y = 0;
     this.vector.x = 0;
    ...