Personnaliser curseur

Balise à placer dans le header.php

<div class="cursor"></div>

 /* cursor */
 function cursor(){
    var cursor = document.querySelector('.cursor');
    var a = document.querySelectorAll('a, button, .close, .toggle_langues, .btn_toggle, input, select, textarea, .gfield_consent_label, .mec-load-month, #choix_jeux #caroussel .owl-controls .owl-nav div, .owl-theme .owl-dots .owl-dot span');

// déplacement curseur
    document.addEventListener('mousemove', function(e){
        var x = e.clientX;
        var y = e.clientY;
        cursor.style.left = x + 'px';
        cursor.style.top = y + 'px';
    });

// détection clic
    document.addEventListener('mousedown', function(){
        cursor.classList.add('click');
    });

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

// toggle class hover
    a.forEach(item => {
        item.addEventListener('mouseover', () => {
            cursor.classList.add('hover');
        });
        item.addEventListener('mouseleave', () => {
            cursor.classList.remove('hover');
        });
    })
}
cursor();
setTimeout(cursor,1000);
/* cursor */

    .cursor {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        position: fixed;
        z-index: 9999999999;
        pointer-events: none;
        transform: translate(-50%, -50%);
        &:after{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: red;
            transform: translate(-50%, -50%);
        }
        &:before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid red;
            opacity: 0;
            transform: translate(-50%, -50%);
        }
        &:before, &:after{
            transition: width .1s cubic-bezier(.455,.03,.515,.955), height .1s cubic-bezier(.455,.03,.515,.955), opacity .1s ease;
        }
        &.hover{
            &:after{
                opacity: 0;
                width: 4px;
                height: 4px;
            }
            &:before{
                opacity: 1;
                width: 48px;
                height: 48px;
            }
        }
    }

Exemples :
https://www.oconception.fr/
https://www.libellud.com/