Курсор от Cuberto

<style>
:root {
--CubertoBackgroundColorСircle: blue; /*Цвет курсора*/
--CubertoСircleSize: scale(0.2); /*Размер курсора*/
--CubertoFontFamily: "Helvetica", sans-serif; /*Название вашего шрифта*/
--CubertoFontSize: 14px; /*Размер шрифта в круге*/
--CubertoFontColor: #fff; /*Цвет шрифта в круге*/
--CubertoFontWeight: 500; /*Цвет шрифта в круге*/
--CubertoBackgroundColorСircleHoverText: blue; /*Цвет круга при наведении с текстом*/
--CubertoСircleTextScale: scale(2.7); /*Увеличение круга с текстом, работает по принципу scale, чем выше цифра, тем больше круг*/
--CubertoСircleTextScaleActive: scale(2.6); /*Размер курсора при клике по курсору с текстом*/
--CubertoMedia: scale(0.6); /*Размер курсора с изображением, видео*/
}
</style>


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

<style>
@media screen and (max-width: 480px) {
.mf-cursor {
display: none;
}
}

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

/*.mf-cursor.-pointer:before {*/
/* transform: scale(0) !important;*/
/*}*/
.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 src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/mouse-follower.min.js"></script>

<script>

// Добавляем изображения для блоков
$('.img-cuberto-cursor-1, .img-cuberto-cursor-2').addClass('img-cursor-all');
$('.img-cuberto-cursor-1').attr("data-cursor-img", "https://static.tildacdn.com/tild6539-3337-4330-a237-643731336532/spacejoy-77U1wzOD1yw.jpg");
$('.img-cuberto-cursor-2').attr("data-cursor-img", "https://static.tildacdn.com/tild6539-3337-4330-a237-643731336532/spacejoy-77U1wzOD1yw.jpg");


// Добавляем видео для блоков
$('.video-cuberto-cursor-1, .video-cuberto-cursor-2').addClass('video-cursor-all');
$('.video-cuberto-cursor-1').attr("data-cursor-video", "https://matilda-design.ru/matilda-video/car.mp4");
$('.video-cuberto-cursor-2').attr("data-cursor-video", "https://matilda-design.ru/matilda-video/car.mp4");

// Добавляем видео для блоков
$('.text-cuberto-cursor-1, .text-cuberto-cursor-2').addClass('text-cursor-all');
$('.text-cuberto-cursor-1').attr('data-text','Open');
$('.text-cuberto-cursor-2').attr('data-text','Open new');



const cursor = new MouseFollower({
speed: 0.8,
skewing: 1,
skewingText: 3
});
const video_cursor = document.querySelectorAll('.video-cursor-all');
video_cursor.forEach(function (element) {

element.addEventListener('mouseenter', () => {
cursor.setVideo;
});

element.addEventListener('mouseleave', () => {
cursor.removeVideo();
});
});

const img_cursor = document.querySelectorAll('.img-cursor-all');
img_cursor.forEach(function (element) {

element.addEventListener('mouseenter', () => {
cursor.setImg;
});

element.addEventListener('mouseleave', () => {
cursor.removeImg();
});
});

const text_cursor = document.querySelectorAll('.text-cursor-all');
text_cursor.forEach(function (element) {
const originalText = element.textContent;
const newText = element.getAttribute('data-text');

element.addEventListener('mouseenter', () => {
cursor.setText(newText);
});

element.addEventListener('mouseleave', () => {
cursor.removeText();
});
});


</script>