<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Custom Cursor</title>
// Use this if you use seprate css
<linkrel="stylesheet"href="style.css"></head><body><divclass="main"><divclass="cursor"></div><h1class="heading">Custom Cursor</h1></div>
// Use this if you use seprate JS file
<scriptsrc="script.js"></script></body></html>
let main = document.querySelector(".main");
let cursor = document.querySelector(".cursor");
main.addEventListener("mousemove", (axis) => {
// You can use x instead of clientX
cursor.style.left = `${axis.clientX}px`;
// You can use y instead of clientY
cursor.style.top = `${axis.clientY}px`;
})