I have created a cursor using html, css and javascript which is built on this website now the problem is the cursor is moving but not scaling like on this website scale down with cursor movement I want the cursor to move on this website along with scaling down. How can I make it?
This is the link to this website
https://redlight.dev/careers/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Custom Cursor</title>
<style>
body {
cursor: none; /* Hide the default cursor */
margin: 0;
overflow: hidden;
}
.custom-cursor {
position: fixed;
width: 20px;
height: 20px;
background-color: #ff0000; /* Choose your desired color */
border-radius: 50%;
pointer-events: none;
transition: transform 0.2s ease-out;
transform-origin: center;
}
</style>
</head>
<body>
<div class="custom-cursor"></div>
<!-- Your content goes here -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const cursor = document.querySelector(".custom-cursor");
document.addEventListener("mousemove", function (e) {
const x = e.clientX;
const y = e.clientY;
cursor.style.transform = `translate(${x}px, ${y}px)`;
});
});
</script>
</body>
</html>