• duration: 0.4 controls how far the element lags behind our cursor. A duration of 0 would make it closely tied to our cursor.
• adjust the flex alignment on the .hover-9_move to change how the element is aligned towards our cursor.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
	document.querySelectorAll(".hover-9_move").forEach((component) => {
		if (component.hasAttribute("data-hover-9")) return;
		component.setAttribute("data-hover-9", "");

		document.addEventListener("mousemove", (e) => {
			const translateX = (e.clientX / window.innerWidth - 0.5) * 100;
			const translateY = (e.clientY / window.innerHeight - 0.5) * 100;
			gsap.to(component, { x: `${translateX}vw`, y: `${translateY}vh`, duration: 0.4, ease: "power2.out", overwrite: "auto" });
		});
	});
});
</script>