Нервное движение при наведении пользовательского курсора, созданное с использованием движения кадра ⇐ CSS

[Anonymous]

поэтому я пытаюсь воссоздать те классные пользовательские курсоры, которые вы видите при наведении, с помощью движения кадра. Итак, по сути, у меня есть элемент div, и всякий раз, когда вы наводите на него курсор, курсор должен исчезнуть, а вместо этого должен появиться круг среднего размера, который будет следовать за мышью. У меня это кое-что заработало, но движение круга очень нервное и кажется, что он пытается вернуться в угол.
Вот компонент:

Код: Выделить всё

"use client";

import { useState } from "react";
import { motion } from "framer-motion";

type Position = {
x: number;
y: number;
};

function BigBlockImage() {
const [isHovering, setIsHovering] = useState(false);
const [position, setPosition] = useState
({ x: 0, y: 0 });

return (
className="w-full aspect-video bg-placeholder relative cursor-none"
onMouseEnter={(e) => {
setIsHovering(true);
}}
onMouseLeave={(e) => {
setIsHovering(false);
}}
onMouseMove={(e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left - 57;
const y = e.clientY - rect.top - 57;
console.log(x, y);
setPosition({
x,
y,
});
}}
>
{isHovering && (

VIEW

)}

);
}

export default BigBlockImage;

Я не уверен, проблема ли в том, что состояние устанавливается так много раз за такое короткое время, или я делаю это неправильно. Любая помощь приветствуется. Спасибо


Подробнее здесь: https://stackoverflow.com/questions/792 ... mer-motion