JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div>
  <span id="track"></span>
</div>

CSS

body{
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  height: 100vh;
}

div{
  width: 50vw;
  height: 50vh;
  position: relative;
  top: 50vh;
  left: 50vw;
}

#track{
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  border-radius: 50%;
  margin: -5px 0 0 -5px;
}

JavaScript

/**
 * Mouse input easing
 */

var w_x = window.innerWidth,
		w_y = window.innerHeight,
    x = w_x / 2,
		y = w_y / 2,
    m_x = x,
    m_y = y,
    track = document.getElementById('track');

function frame(){
	x += (m_x - x) * 0.05;
	y += (m_y - y) * 0.05;
	//document.body.innerHTML = Math.round(x) + '<br />' + Math.round(y);
  track.style.top = y + 'px';
  track.style.left = x + 'px';
}

function animate(){
	requestAnimationFrame(animate);
	frame();
}

function onDocumentMouseMove(e){
	m_x = e.clientX - (w_x / 2);
	m_y = e.clientY - (w_y / 2);
}

function onWindowResize(e){
	w_x = window.innerWidth;
	w_y = window.innerHeight;
}

document.addEventListener('mousemove', onDocumentMouseMove);
window.addEventListener('resize', onWindowResize);

animate();