Мягкий блюр-курсор

<!--Мягкий блюр-курсор
https://mt-webdesign.ru/follow-blur-->
<div class="cursor-blur">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<style>
.blur-content {
z-index: 1 !important; /* Меняем z-index контента, отталкиваясь от значения курсора. У контента индекс всегда должен быть ниже */
}
.cursor-blur {
position: fixed;
top: 0;
left: 0;
width: 600px;
height: 600px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 2; /* Меняем z-index курсора: чем выше значение, тем больше элементов на странице он перекрывает */
}
.cursor-blur span {
position: absolute;
inset: 0;
border-radius: 50%;
-webkit-mask: radial-gradient(
circle at 50% 50%,
#fff 20%,
hsla(0, 0%, 100%, .4) 50%,
hsla(0, 0%, 100%, 0) 70%
);
}
.cursor-blur span:nth-child(1) {
backdrop-filter: blur(1px);
position: absolute;
height: 100%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cursor-blur span:nth-child(2) {
transform: translate(-50%, -50%);
backdrop-filter: blur(2px);
position: absolute;
height: 95%;
width: 95%;
top: 50%;
left: 50%;
}
.cursor-blur span:nth-child(3) {
transform: translate(-50%, -50%);
backdrop-filter: blur(3px);
position: absolute;
height: 90%;
width: 90%;
top: 50%;
left: 50%;
}
.cursor-blur span:nth-child(4) {
transform: translate(-50%, -50%);
backdrop-filter: blur(4px);
position: absolute;
height: 85%;
width: 85%;
top: 50%;
left: 50%;
}
.cursor-blur span:nth-child(5) {
transform: translate(-50%, -50%);
backdrop-filter: blur(5px);
position: absolute;
height: 80%;
width: 80%;
top: 50%;
left: 50%;
}
.cursor-blur span:nth-child(6) {
transform: translate(-50%, -50%);
backdrop-filter: blur(6px);
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
}
.cursor-blur span:nth-child(7) {
transform: translate(-50%, -50%);
backdrop-filter: blur(7px);
position: absolute;
height: 40%;
width: 40%;
top: 50%;
left: 50%;
}
</style>
<script>
$(document).ready(function () {
let enabled = false;
let mouseX = 0, mouseY = 0;
let posX = 0, posY = 0;
let rafId = null;
function startCursorBlur() {
if (enabled) return;
enabled = true;
$(document).on("mousemove.cursorBlur", function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animate() {
if (!enabled) return;
posX += (mouseX - posX) * 0.07;
posY += (mouseY - posY) * 0.07;
$('.cursor-blur').css({
left: posX + 'px',
top: posY + 'px'
});
rafId = requestAnimationFrame(animate);
}
animate();
}
function stopCursorBlur() {
enabled = false;
$(document).off("mousemove.cursorBlur");
cancelAnimationFrame(rafId);
$('.cursor-blur').hide();
}
function checkResolution() {
if (window.innerWidth > 1024) {
$('.cursor-blur').show();
startCursorBlur();
} else {
stopCursorBlur();
}
}
checkResolution();
$(window).on('resize', checkResolution);
});
</script>