Custom cursor
A dot follows the pointer exactly and a ring follows it softly.
Move inside the boxEdit
.cursorbox {
position: relative;
height: 100%;
cursor: none;
}
.cursorbox span {
--k-follow: 1;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
border-radius: 50%;
pointer-events: none;
}
.cursorbox__dot {
--k-motion: instant;
width: 10px;
height: 10px;
background: #2f6bff;
}
.cursorbox__ring {
--k-motion: soft;
width: 46px;
height: 46px;
border: 2px solid #2f6bff;
}