JavaScript Circle fallow Cursor

Create a Smooth Circle Cursor Effect with JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>Circle follow cursor</title>
</head>

<body>
    <div class="circle"></div>
</body>

</html>

css

body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #000000;
        }

        .circle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #ffa600;
            border-radius: 50%;
            pointer-events: none;
            transition: transform 0.3s linear;
            display: none;
        }

javascript

const circle = document.querySelector('.circle');

document.addEventListener('mousemove', (e) => {
    circle.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
    circle.style.display = 'unset';
});

window.addEventListener('mouseout', (e) => {
    if (!e.relatedTarget) {
        circle.style.display = 'none';
    }
});