Кастомный курсор

Точка следует мгновенно, кольцо догоняет с лерпом и вырастает на ссылках с подписью.

Водите мышью внутри сцены.

Водите мышью · наводите на ссылки

Код

<i class="dot"></i>
<i class="ring"><b class="lab"></b></i>

<style>
body { cursor: none; }
.dot, .ring { position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 99; translate: -50% -50%; }
.dot { width: 8px; height: 8px; background: #E84B16; }
.ring { width: 36px; height: 36px; border: 1.5px solid rgba(0,0,0,.4);
  transition: width .35s, height .35s, background .35s; }
.ring.big { width: 84px; height: 84px; background: #fff; }
</style>

<script>
var dot = document.querySelector(".dot"), ring = document.querySelector(".ring");
var tx = 0, ty = 0, rx = 0, ry = 0;
addEventListener("pointermove", function (e) {
  tx = e.clientX; ty = e.clientY;
  dot.style.left = tx + "px"; dot.style.top = ty + "px"; // точка мгновенно
});
(function loop() {
  rx += (tx - rx) * .14; ry += (ty - ry) * .14;          // кольцо с лерпом
  ring.style.left = rx + "px"; ring.style.top = ry + "px";
  requestAnimationFrame(loop);
})();
document.querySelectorAll("a").forEach(function (a) {
  a.addEventListener("pointerenter", function () { ring.classList.add("big"); });
  a.addEventListener("pointerleave", function () { ring.classList.remove("big"); });
});
</script>

Промпт для ИИ

Сделай кастомный курсор: body cursor:none; точка 8px следует за курсором мгновенно, кольцо 36px догоняет через лерп 0.14 в rAF — фирменное «запаздывание». На ховере ссылок кольцо вырастает до 84px, заливается белым и показывает подпись из data-атрибута (Открыть/Смотреть). Оба элемента fixed, pointer-events none, translate -50% -50%. На тач-устройствах (hover: none) не включать и вернуть обычный курсор.