<!--Универсальный курсор 
https://designation.site/universal_cursor-->
<!--Настройки курсора-->
<style>
:root {
--BackgroundColorСircle: #fff; /*Цвет курсора*/
--BackgroundColorСircleHover:#ffffff40; /*Цвет курсора при наведении*/
--СircleSize: 0.3; /*Размер курсора*/
--СircleSizeActive: 0.25; /*Размер курсора при клике*/
--СircleScale: 2; /*Увеличение курсора при наведении, работает по принципу scale, чем выше цифра, тем больше круг*/
--СircleScaleLarge: 1.8; /*Размер курсора при клике по увеличеному курсору*/
--FontFamily: "Helvetica", sans-serif; /*Название вашего шрифта*/
--FontSize: 14px; /*Размер шрифта в круге*/
--FontColor: #fff; /*Цвет шрифта в круге*/
--BackgroundColorСircleHoverText: #ffffff40; /*Цвет круга при наведении с текстом*/
--СircleTextScale: 2; /*Увеличение круга с текстом, работает по принципу scale, чем выше цифра, тем больше круг*/
--СircleTextScaleActive: 1.8; /*Размер курсора при клике по курсору с текстом*/
--СircleOpaque: 2; /*Увеличение круга с инверсией*/
--СircleOpaqueActive: 1.8; /*Размер курсора при клике с инверсией*/
--СircleImg: 2; /*Размер курсора с изображением*/
--СircleImgActive: 1.8; /*Размер курсора с изображением при клике*/
--CursorBorder: 0px solid #fff; /*Обводка у курсора*/
--Blur:blur(6px) saturate(2); /*Фильтр с размытием, цвет курсора должен быть с прозрачностью - #ffffff40 (пример с белым)*/
}
</style>
<script>
// Увеличение курсора при наведении
$('.cursor-large').attr('data-cursor','-lg');
// Подсказки, при наведении на объект (вместо Открыть пишем свое значение)
$('.text-cursor').attr('data-cursor-text','Открыть');
// Примагничивание объекта к курсору, при наведении
$('.magnetic-object-cursor').attr('data-magnetic','data-magnetic');
// .magnetic-cursor - это класс объекта (шейпа) при наведении на который, курсор будет магнитится к объекту с классом .magnetic-object
$('.magnetic-cursor').attr('data-cursor-stick','.magnetic-object');
// Инверсия курсора, при наведении
$('.mix-blend-cursor').attr('data-cursor','-opaque');
</script>

<script src='https://www.matilda-design.ru/library/GSAP.js'></script>
<script src='https://www.matilda-design.ru/library/cursor-universal.js'></script>
<style>
@media screen and (max-width: 480px) {
.cb-cursor {
display: none;
}
}
body {
height: 100%;
margin: 0;
padding: 0;
background: #fff;
color: var(--BackgroundColorСircle);
font-family: var(--FontFamily);
font-size: 14px;
letter-spacing: normal;
line-height: normal;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cb-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 150;
contain: layout style size;
pointer-events: none;
will-change: transform;
transition: opacity 0.3s, color 0.4s;
}
.cb-cursor:before {
content: "";
position: absolute;
top: -24px;
left: -24px;
display: block;
width: 48px;
height: 48px;
transform: scale(0);
background: currentColor;
border-radius: 50%;
transition: transform 0.3s ease-in-out, opacity 0.1s;
backdrop-filter: var(--Blur);
border: var(--CursorBorder);
}
.cb-cursor-text {
position: absolute;
top: -18px;
left: -18px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0) rotate(10deg);
opacity: 0;
color: var(--FontColor);
font-size: var(--FontSize);
line-height: 20px;
text-align: center;
letter-spacing: -0.01em;
transition: opacity 0.4s, transform 0.3s;
}
@supports (mix-blend-mode: exclusion) {
.cb-cursor.-exclusion, .cb-cursor.-opaque {
mix-blend-mode: exclusion;
}
}
@supports (mix-blend-mode: exclusion) {
.cb-cursor.-exclusion:before, .cb-cursor.-opaque:before {
background: white;
}
}
.cb-cursor.-normal, .cb-cursor.-text {
mix-blend-mode: normal;
}
.cb-cursor.-normal:before, .cb-cursor.-text:before {
background: var(--BackgroundColorСircleHoverText);
}
.cb-cursor.-inverse {
color: white;
}
.cb-cursor.-visible:before {
transform: scale(var(--СircleSize));
}
.cb-cursor.-visible.-active:before {
transform: scale(var(--СircleSizeActive));
transition-duration: 0.2s;
}
.cb-cursor.-pointer:before {
transform: scale(0.23);
}
.cb-cursor.-text:before {
opacity: 1;
transform: scale(var(--СircleTextScale));
}
.cb-cursor.-text .cb-cursor-text {
opacity: 1;
transform: scale(1);
}
.cb-cursor.-text.-active:before {
transform: scale(var(--СircleTextScaleActive));
transition-duration: 0.2s;
}
.cb-cursor.-opaque:before {
transform: scale(var(--СircleOpaque));
}
.cb-cursor.-opaque.-active:before {
transform: scale(var(--СircleOpaqueActive));
}
.cb-cursor.-lg:before {
color: var(--BackgroundColorСircleHover);
transform: scale(var(--СircleScale));
}
.cb-cursor.-lg.-active:before {
transform: scale(var(--СircleScaleLarge));
transition-duration: 0.2s;
}
.cb-cursor.-img:before {
content: " ";
background-size: cover;
background-position: center;
background-image: var(--ImgHover);
transform: scale(var(--СircleScale));
}
.cb-cursor.-hidden:before {
transform: scale(0);
}
.-color-blue {
color: #1F28BF;
}
.-color-white {
color: #fff;
}
</style>

<script>
$('.cursor-img-1').attr('data-cursor','-img-1');
</script>
<style>
.cb-cursor.-img-1:before {
content: " ";
background-size: cover;
background-position: center;
background-image: url(https://static.tildacdn.com/tild3431-3166-4433-a437-633263313165/Frame_6756957.svg);
transform: scale(var(--СircleImg));
mix-blend-mode: normal!important;
}
.cb-cursor.-img-1.-active:before {
transform: scale(var(--СircleImgActive));
}
</style>