CODE EXAMPLE FOR CSS

mouse cursor smooth

.cursor {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            border: 1px solid black;
            transition: all 200ms ease-out;
            position: fixed;
            pointer-events: none;
            left: 0;
            top: 0;
            transform: translate(calc(-50% + 15px), -50%);
        }

        .cursor2 {
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: black;
            opacity: .3;
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition: width .3s, height .3s, opacity .3s;
        }

        .cursor.hover {
            background-color: red;
            opacity: 0.5;
        }

        .cursorinnerhover {
            width: 50px;
            height: 50px;
            opacity: .5;
        }


<script>
        var cursor = document.querySelector('.cursor');
        var cursorinner = document.querySelector('.cursor2');
        var a = document.querySelectorAll('a');

        document.addEventListener('mousemove', function(e) {
            var x = e.clientX;
            var y = e.clientY;
            cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
        });

        document.addEventListener('mousemove', function(e) {
            var x = e.clientX;
            var y = e.clientY;
            cursorinner.style.left = x + 'px';
            cursorinner.style.top = y + 'px';
        });

        document.addEventListener('mousedown', function() {
            cursor.classList.add('click');
            cursorinner.classList.add('cursorinnerhover')
        });

        document.addEventListener('mouseup', function() {
            cursor.classList.remove('click')
            cursorinner.classList.remove('cursorinnerhover')
        });

        a.forEach(item => {
            item.addEventListener('mouseover', () => {
                cursor.classList.add('hover');
            });
            item.addEventListener('mouseleave', () => {
                cursor.classList.remove('hover');
            });
        })
    </script>