<link rel="stylesheet" href="https://matilda-design.ru/library/mouse-follower.css">
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/mouse-follower.min.js"></script>


<!--Настройки курсора-->
<style>
    :root {
        --CubertoBackgroundColorСircle: black;
        /*Цвет курсора*/
        --CubertoСircleSize: scale(0.0);
        /*Размер курсора*/
        --CubertoFontFamily: "Manrope", sans-serif;
        /*Название вашего шрифта*/
        --CubertoFontSize: 14px;
        /*Размер шрифта в круге*/
        --CubertoFontColor: #fff;
        /*Цвет шрифта в круге*/
        --CubertoFontWeight: 500;
        /*Цвет шрифта в круге*/
        --CubertoBackgroundColorСircleHoverText: black;
        /*Цвет круга при наведении с текстом*/
        --CubertoСircleTextScale: scale(3);
        /*Увеличение круга с текстом, работает по принципу scale, чем выше цифра, тем больше круг*/
        --CubertoСircleTextScaleActive: scale(2.6);
        /*Размер курсора при клике по курсору с текстом*/
        --CubertoMedia: scale(0.333);
        /*Размер курсора с изображением, видео*/
        --CubertoBorderColorСircle: black;
    }
</style>
<style>
    @media screen and (max-width: 960px) {
        .mf-cursor {
            display: none;
        }
    }

    .mf-cursor-text {
        font-weight: var(--CubertoFontWeight);
        font-size: var(--CubertoFontSize);
        font-family: var(--CubertoFontFamily);
        color: var(--CubertoFontColor);
    }

    .mf-cursor:before {
        transform: var(--CubertoСircleSize);
    }

    .mf-cursor.-text:before {
        opacity: 1;
        transform: var(--CubertoСircleTextScale);
        background: var(--CubertoBackgroundColorСircleHoverText);
    }

    .mf-cursor.-text.-active:before {
        transform: var(--CubertoСircleTextScaleActive);
    }

    .mf-cursor.-media .mf-cursor-media-box {
        transform: var(--CubertoMedia);
    }

    .mf-cursor:before {
        background: var(--CubertoBackgroundColorСircle);
    }
</style>
<script>

    $('.cursor-block')
        .addClass('text-cursor-all')
        .attr('data-text', 'Тест');

    const cursor = new MouseFollower({
        speed: 0.8,
        skewing: 0.2,
        skewingText: 3
    });

    const text_cursor = document.querySelectorAll('.text-cursor-all');
    text_cursor.forEach(function(element) {
        const newText = element.getAttribute('data-text');
        element.addEventListener('mouseenter', () => {
            cursor.setText(newText);
        }
        );
        element.addEventListener('mouseleave', () => {
            cursor.removeText();
        }
        );
    });
</script>