<div class="mag"></div>

:root {
  --mag-width: 140px;
  --mag-height: 140px;
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background-color: #3f3f3f;
}

.mag {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 3px solid #666;
  border-radius: 50%;
  pointer-events: none;
  width: var(--mag-width);
  height: var(--mag-height);
  transition: all 0.1s;
}

.mag:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: calc(var(--mag-width) - 5px);
  height: calc(var(--mag-height) - 5px);
  box-shadow: 0 0 12px #f5f5f5 inset;
}

.mag:after {
  content: "";
  position: absolute;
  height: 90px;
  width: 12px;
  background: #000;
  bottom: -90px;
  left: calc(50% - 7px);
  border-top: 10px solid #999;
  border-bottom: 3px solid #999;
}

function removeTailUnit(valueWithUnit, unitName) {
  const regexp = new RegExp(unitName + '(.*?)', 'g');
  return Number(valueWithUnit.replace(regexp, ''));
}

function getCssPropertyValue(targetDom, targetCssPropertyName) {
  return window
    .getComputedStyle(targetDom)
    .getPropertyValue(targetCssPropertyName);
}

function niceRolling() {
  function marquee() {
    requestAnimationFrame(marquee);
    const magDom = document.querySelector(`.mag`);
    const magDomWidth = removeTailUnit(
      getCssPropertyValue(magDom, '--mag-width'),
      'px'
    );
    const magDomHeight = removeTailUnit(
      getCssPropertyValue(magDom, '--mag-height'),
      'px'
    );
    magDom.style.transform = `translate3d(${
      magX - magDomHeight / 2
    }px, ${magY - magDomWidth / 2}px, 0px) rotate(30deg)`;
  }
  marquee();
}

function setMousePosition(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
  magX = lerp(magX, mouseX, 0.2);
  magY = lerp(magY, mouseY, 0.2);
}
function lerp(start, end, delta) {
  return (1 - delta) * start + delta * end;
}

document.addEventListener('mousemove', setMousePosition, false);

let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;
let magX = mouseX;
let magY = mouseY;

niceRolling();