added usemousemoving hook, glorp header now disappears on mouse move

Author: si-mooon

src/hooks/useMouseMoving.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Returns true while the mouse is moving, false after it's been
+ * idle for `idleMs` milliseconds (default 1000ms).
+ */
+export function useMouseMoving(idleMs = 1000) {
+    const [isMoving, setIsMoving] = useState(false);
+
+    useEffect(() => {
+        let timeout: ReturnType<typeof setTimeout>;
+
+        const handleMove = () => {
+            setIsMoving(true);
+            clearTimeout(timeout);
+            timeout = setTimeout(() => setIsMoving(false), idleMs);
+        };
+
+        window.addEventListener("mousemove", handleMove);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            clearTimeout(timeout);
+        };
+    }, [idleMs]);
+
+    return isMoving;
+}

src/pages/home/Home.tsx

@@ -2,14 +2,15 @@ import styles from "./Home.module.css";
 import { useState, useEffect, useRef } from "react";
 import LevelComponent from "../../components/LevelComponent";
 import { main } from "./solarsystem.js";
-
+import { useMouseMoving } from "../../hooks/useMouseMoving.js";
 export default function Home() {
     const lvlNum = 4;
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     const zoomOutRef = useRef<(() => void) | null>(null);
 
     const [isVisible, setIsVisible] = useState(false);
     const [mountKey, setMountKey] = useState(0);
+    const isMouseMoving = useMouseMoving(800); // fade back in after 800ms of no movement
 
     const handleOpen = () => {
         setMountKey(k => k + 1);
@@ -29,6 +30,17 @@ export default function Home() {
 
     return (
         <div>
+            <header style={{
+                    transition: "opacity 0.6s ease",
+                    opacity: isMouseMoving ? 0 : 1,
+                    pointerEvents: isMouseMoving ? "none" : "auto",
+                }}
+            >
+                <div className={styles["header-brand"]}>
+                    
+                    <h1>glorpython</h1>
+                </div>
+            </header>
             <section className="relative w-full h-screen">
                 {isVisible && (