Follow The Cursor | on mousemove addEventListener Javascript

Easy Cursor Follow | on mousemove

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Follow the Cursor</title>

  <style>

    body {

      margin: 0;

      padding: 0;

      display: flex;

      align-items: center;

      justify-content: center;

      height: 100vh;

      width: 100%;

      background-color: black;

      position: relative;

      overflow: hidden;

    }

    h1 {

      color: #ffffff;

      font-size: 3em;

      text-transform: capitalize;

      font-family: sans-serif;

    }

    #cursor {

      height: 35px;

      width: 35px;

      border-radius: 50%;

      background-color: transparent;

      border: 3px solid #ffffff;

      position: absolute;

      box-sizing: border-box;

      transition: 0.1s linear;

      pointer-events: none;

      transform: translate(-50%, -50%);

    }

    h1:hover~#cursor {

      transform: scale(4);

      border: 2px solid #ffffff;

    }

  </style>

</head>

<body>

  

  <h1>Follow The Cursor | onmousemove addEventListener Javascript</h1>

  <span id="cursor"></span>

  <script>

    const cursor = document.getElementById("cursor");

    //step 1

    window.addEventListener("mousemove", function (Event) {

      var x = Event.clientX;

      var y = Event.clientY;

      cursor.style.left = x + "px";

      cursor.style.top = y + "px";

    });

    ////step 2

    // window.addEventListener('mousemove', (event) => {

    //   cursor.style.left = event.clientX;

    //   cursor.style.top = event.clientY;

    // });

  </script>

</body>

</html>