openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import React from "react";
4
5export default function useMouseMove() {
6 React.useEffect(() => {
7 function mouseMoveEvent(e: MouseEvent) {
8 const scale = window.visualViewport?.scale;
9 // disable mouse movement on viewport zoom - causes page to slow down
10 if (scale === 1) {
11 const body = document.body;
12
13 const targetX = e.clientX;
14 const targetY = e.clientY;
15
16 // TODO: make it move around cursor so you feal like its floating around it
17 // the animation requires tranformX and transformY on the HTML Element
18 body.style.setProperty("--x", `${targetX}px`);
19 body.style.setProperty("--y", `${targetY}px`);
20 }
21 }
22
23 document.addEventListener("mousemove", mouseMoveEvent);
24 return () => {
25 document.removeEventListener("mousemove", mouseMoveEvent);
26 };
27 }, []);
28}