JSFiddle - React, Tailwind, and code Playground

HTML

<div id='track'>
	<div class = 'container'>
		<div id='cursor' class='cursor'>
			&nbsp;
		</div>
		<div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 175px; right: 400px; z-index: -1;'>
			&nbsp;
		</div>
		<div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 100px; right: 200px; z-index: -1;'>
			&nbsp;
		</div>
	</div>
</div>

CSS

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	cursor: none;
}

#cursor {
	width: 50px;
	height: 50px;
	position: fixed;
	border-radius: 25px;
	/*background-color: #CE7A7A;*/
	/*background-color: #7AA8CE;*/
}

#cursor_info, #db_info {
	color: #000;
	position: absolute;
	top: 0;
}

#db_info {
	right: 0;
}

#flex_container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#track {
	
	width: 100%;
	height: 100%;
	
}

.container {
	width: 100%;
	height: 100%;
	position: relative;
	background: linear-gradient(-45deg, #333  , #181818 50% , #333 );
	z-index: -1;
}

JavaScript

(function cursorMapping(){

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;

$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});

function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coor = "X: " + x + ", Y: " + y;
}

var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;

var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 var lastmousetravel = 0;

var speed;
var marker1 = 1;
var marker2 = 1;

var timer = setInterval(function(){
    marker1;
    marker2;
}, 20);

$(function() {

    var $speedometer = $('#speed'),
         _speed = 0; 

    $('#track').cursometer({
        onUpdateSpeed: function thisSpeed(speed) {
            _speed = speed;
            $speedometer.text(Math.ceil(speed * 100)/100);
        },
        updateSpeedRate: 20
    });

});

var thisInterval = setInterval(function FXInterval(){
    speed = $('#speed').text();
        $('#cursor').css({'background-color': '#CE7A7A'});
}, 20);
 
 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
     var speed = lastmousex + lastmousey;

    setTimeout(function(){
        lastmousetravel = mousetravel;
    }, 20);
 });

(function collide(){
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $thing.offset().left;
    var y2 = $thing.offset().top;
    var h2 = $thing.outerHeight(true);
    var w2 = $thing.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    // change 12 to alter...