BLOG -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Cursor Animation</title>

body{
background:#0d1117;
height:100vh;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
}

h1{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
font-size:60px;
letter-spacing:2px;
}

.cursor{
position:fixed;
width:18px;
height:18px;
border-radius:50%;
background:#00d4ff;
pointer-events:none;
transform:translate(-50%,-50%);
z-index:9999;
box-shadow:
0 0 20px #00d4ff,
0 0 40px #00d4ff,
0 0 80px #00d4ff;
}

.cursor2{
position:fixed;
width:50px;
height:50px;
border:2px solid rgba(0,212,255,.4);
border-radius:50%;
pointer-events:none;
transform:translate(-50%,-50%);
transition:
width .25s,
height .25s,
border .25s,
background .25s;
z-index:9998;
backdrop-filter:blur(5px);
}

.hover{
width:80px;
height:80px;
background:rgba(0,212,255,.1);
border:2px solid #00d4ff;
}
</style>
</head>

<body>

<h1>Move Your Mouse</h1>

const cursor=document.querySelector(".cursor");
const cursor2=document.querySelector(".cursor2");

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

let posX=mouseX;
let posY=mouseY;

document.addEventListener("mousemove",(e)=>{
mouseX=e.clientX;
mouseY=e.clientY;

cursor.style.left=mouseX+"px";
cursor.style.top=mouseY+"px";
});

function animate(){

posX+=(mouseX-posX)*0.15;
posY+=(mouseY-posY)*0.15;

cursor2.style.left=posX+"px";
cursor2.style.top=posY+"px";

requestAnimationFrame(animate);
}

animate();

document.querySelectorAll("a,button").forEach(el=>{

el.addEventListener("mouseenter",()=>{
cursor2.classList.add("hover");
});

el.addEventListener("mouseleave",()=>{
cursor2.classList.remove("hover");
});

});

</script>

</body>
</html>