bittu/cursor.html

## cursor.html
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Custom mouse move cursor">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Custom mouse move cursor</title>
  <style>
    .cursor {
      position: absolute;
      top: 0;
      left: 0;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 1px solid black;
      pointer-events: none;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <div class="cursor"></div>
  <a href="#">Link</a>
  <script>
    const cursor = document.querySelector('.cursor')
    const links = document.querySelectorAll('a')
    let mousePos = {x: 12.5, y: 12.5}
    let lastMousePos = {x: 12.5, y: 12.5}
    let scale = 1
    let lastScale = 1

    function lerp(v0, v1, t) {
      return (1 - t) * v0 + t * v1
    }

    function transformCursor() {
      lastMousePos.x = lerp(lastMousePos.x, mousePos.x - 12.5, .15)
      lastMousePos.y = lerp(lastMousePos.y, mousePos.y - 12.5, .15)
      lastScale = lerp(lastScale, scale, .5)
      cursor.style.transform = `translateX(${lastMousePos.x}px) translateY(${lastMousePos.y}px) scale(${lastScale})`
      requestAnimationFrame(transformCursor)
    }

    [...links].forEach((link) => {
      link.addEventListener('mouseenter', e => scale = 1.5)
      link.addEventListener('mouseleave', e => scale = 1)
    })

    document.addEventListener('mousemove', function(e) {
      const { x, y } = e
      mousePos.x = x
      mousePos.y = y
    })
    document.addEventListener('mousedown', function(e) {
      scale = .5
    })
    document.addEventListener('mouseup', function(e) {
      scale = 1
    })

    transformCursor()
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Custom mouse move cursor">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Custom mouse move cursor</title>
	<style>
	.cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid black;
	pointer-events: none;
	z-index: 9999;
	}
	</style>
	</head>
	<body>
	<div class="cursor"></div>
	<a href="#">Link</a>
	<script>
	const cursor = document.querySelector('.cursor')
	const links = document.querySelectorAll('a')
	let mousePos = {x: 12.5, y: 12.5}
	let lastMousePos = {x: 12.5, y: 12.5}
	let scale = 1
	let lastScale = 1

	function lerp(v0, v1, t) {
	return (1 - t) * v0 + t * v1
	}

	function transformCursor() {
	lastMousePos.x = lerp(lastMousePos.x, mousePos.x - 12.5, .15)
	lastMousePos.y = lerp(lastMousePos.y, mousePos.y - 12.5, .15)
	lastScale = lerp(lastScale, scale, .5)
	cursor.style.transform = `translateX(${lastMousePos.x}px) translateY(${lastMousePos.y}px) scale(${lastScale})`
	requestAnimationFrame(transformCursor)
	}

	[...links].forEach((link) => {
	link.addEventListener('mouseenter', e => scale = 1.5)
	link.addEventListener('mouseleave', e => scale = 1)
	})

	document.addEventListener('mousemove', function(e) {
	const { x, y } = e
	mousePos.x = x
	mousePos.y = y
	})
	document.addEventListener('mousedown', function(e) {
	scale = .5
	})
	document.addEventListener('mouseup', function(e) {
	scale = 1
	})

	transformCursor()
	</script>
	</body>
	</html>