JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="cursor"></div>
<div id="cursor-2"></div>

<div id="demo">
    <h1>grgwerger</h1>
</div>

CSS

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: brown;
}
* {
    box-sizing: border-box;
}
#cursor {
    width: 65px;
    height: 65px;
    position: absolute;
    pointer-events: none;
}
#cursor:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #ECF0F1;
    transition: cubic-bezier(0.25, 0.1, 0, 1.49) .5s;
    pointer-events: none;
}
.active #cursor:after {
    transform: scale(2);
    border: 1px solid #ECF0F1;
}
#cursor-2 {
    width: 7px;
    height: 7px;
    background: #67D900;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
}
#demo {
    display :flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}
h1 {
    font-size: 100px;
}

JavaScript

var elem = document.querySelector('#cursor'),
  elem2 = document.querySelector('#cursor-2'),

  target = {
    x: 0,
    y: 0
  },

  position = {
    x: 0,
    y: 0
  },

  ease = 0.15,
  easee = 0.5,
  pX, pY;

document.querySelector('#demo h1').addEventListener('mouseover', function(e) {
	document.body.classList.add('active')
})
document.querySelector('#demo h1').addEventListener('mouseout', function(e) {
	document.body.classList.remove('active')
})

document.addEventListener('mousemove', function(e) {
  	target.x = e.pageX,
    target.y = e.pageY;
})

function update() {
  elem.style.transform = 'translate(' + (position.x - 32.5) + 'px,' + (position.y - 32.5) + 'px)';
  elem2.style.transform = 'translate(' + (pX - 3.5) + 'px,' + (pY - 3.5) + 'px)';
  position.x = position.x + (target.x - position.x) * ease;
  position.y = position.y + (target.y - position.y) * ease;
  pX = position.x + (target.x - position.x) * easee;
  pY = position.y + (target.y - position.y) * easee;

  requestAnimationFrame(update)

}
update();