refactor: fix react-hooks lint errors

- use-media-query: rewrite with useSyncExternalStore (drops effect-setState)
- typewriter-text: derive reduceMotion text in render, skip effect
- mascot: move Math.random sparkle rotate to creation time
- mascot/hero: drop unused 'priority' prop

Author: 5oran9

components/site/hero.tsx

@@ -71,7 +71,7 @@ export function Hero() {
         >
           <motion.div
             className="flex flex-col gap-6 text-center lg:text-left"
-            style={reduceMotion ? undefined : { y: textParallaxY }}
+            style={reduceMotion || !isDesktop ? undefined : { y: textParallaxY }}
           >
             <motion.div
               variants={itemFromLeft}
@@ -100,7 +100,7 @@ export function Hero() {
               variants={itemFromRight}
               className="flex justify-center lg:hidden"
             >
-              <Mascot size={220} priority />
+              <Mascot size={220} />
             </motion.div>
 
             <motion.p
@@ -128,8 +128,8 @@ export function Hero() {
             variants={itemFromRight}
             className="hidden justify-end lg:flex"
           >
-            <motion.div style={reduceMotion ? undefined : { y: mascotParallaxY }}>
-              <Mascot size={420} priority />
+            <motion.div style={reduceMotion || !isDesktop ? undefined : { y: mascotParallaxY }}>
+              <Mascot size={420} />
             </motion.div>
           </motion.div>
         </motion.div>

components/site/mascot.tsx

@@ -3,11 +3,11 @@
 import { useRef, useState } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { cn } from "@/lib/cn";
+import { useMediaQuery } from "@/lib/use-media-query";
 
 interface MascotProps {
   className?: string;
   size?: number;
-  priority?: boolean;
 }
 
 interface Sparkle {
@@ -16,14 +16,17 @@ interface Sparkle {
   startDistance: number;
   endDistance: number;
   scale: number;
+  rotate: number;
 }
 
 const SPARKLE_COUNT = 6;
 const SPARKLE_LIFE = 900;
 
-export function Mascot({ className, size = 360, priority: _priority = false }: MascotProps) {
+export function Mascot({ className, size = 360 }: MascotProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const reduceMotion = useReducedMotion();
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const idleLoops = isDesktop && !reduceMotion;
   const [sparkles, setSparkles] = useState<Sparkle[]>([]);
   const idCounter = useRef(0);
 
@@ -47,6 +50,7 @@ export function Mascot({ className, size = 360, priority: _priority = false }: M
         startDistance: startRadius,
         endDistance: startRadius + size * 0.18 + Math.random() * (size * 0.1),
         scale: 0.9 + Math.random() * 0.6,
+        rotate: (Math.random() - 0.5) * 60,
       };
     });
     setSparkles((prev) => [...prev, ...newOnes]);
@@ -59,29 +63,27 @@ export function Mascot({ className, size = 360, priority: _priority = false }: M
     <motion.div
       className={cn("group relative shrink-0", className)}
       style={{ width: size, height: size }}
-      animate={
-        reduceMotion ? { scale: 1 } : { scale: [1, 1.06, 1] }
-      }
+      animate={idleLoops ? { scale: [1, 1.06, 1] } : { scale: 1 }}
       transition={
-        reduceMotion
-          ? { duration: 0 }
-          : { duration: 3.8, repeat: Infinity, ease: "easeInOut" }
+        idleLoops
+          ? { duration: 3.8, repeat: Infinity, ease: "easeInOut" }
+          : { duration: 0 }
       }
     >
-      {/* Idle halo — always pulses softly */}
+      {/* Idle halo — pulses softly on desktop, static on mobile */}
       <motion.span
         aria-hidden
         className="pointer-events-none absolute inset-0 rounded-full bg-[var(--color-primary)] blur-3xl"
         initial={{ opacity: 0.06, scale: 1 }}
         animate={
-          reduceMotion
-            ? { opacity: 0.06, scale: 1 }
-            : { opacity: [0.04, 0.14, 0.04], scale: [1, 1.32, 1] }
+          idleLoops
+            ? { opacity: [0.04, 0.14, 0.04], scale: [1, 1.32, 1] }
+            : { opacity: 0.06, scale: 1 }
         }
         transition={
-          reduceMotion
-            ? { duration: 0 }
-            : { duration: 3.8, repeat: Infinity, ease: "easeInOut" }
+          idleLoops
+            ? { duration: 3.8, repeat: Infinity, ease: "easeInOut" }
+            : { duration: 0 }
         }
       />
       {/* Hover halo — gentle bloom on top */}
@@ -143,7 +145,7 @@ export function Mascot({ className, size = 360, priority: _priority = false }: M
                 y: endY,
                 scale: [0, sparkle.scale, 0],
                 opacity: [0, 1, 0],
-                rotate: (Math.random() - 0.5) * 60,
+                rotate: sparkle.rotate,
               }}
               transition={{ duration: SPARKLE_LIFE / 1000, ease: "easeOut" }}
             >

components/site/typewriter-text.tsx

@@ -32,11 +32,7 @@ export function TypewriterText({
   const [mode, setMode] = useState<Mode>("typing");
 
   useEffect(() => {
-    if (!inView) return;
-    if (reduceMotion) {
-      setDisplayed(texts[0] ?? "");
-      return;
-    }
+    if (!inView || reduceMotion) return;
     const currentText = texts[textIdx];
     if (!currentText) return;
 
@@ -81,9 +77,11 @@ export function TypewriterText({
     pauseAfterErase,
   ]);
 
+  const visibleText = reduceMotion ? (texts[0] ?? "") : displayed;
+
   return (
     <span ref={ref} className={className} aria-label={texts[0]}>
-      <span aria-hidden>{displayed}</span>
+      <span aria-hidden>{visibleText}</span>
       {cursor && (
         <span
           aria-hidden

lib/use-media-query.ts

@@ -1,17 +1,21 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 export function useMediaQuery(query: string) {
-  const [matches, setMatches] = useState(false);
+  const subscribe = useCallback(
+    (notify: () => void) => {
+      const mq = window.matchMedia(query);
+      mq.addEventListener("change", notify);
+      return () => mq.removeEventListener("change", notify);
+    },
+    [query],
+  );
 
-  useEffect(() => {
-    const mq = window.matchMedia(query);
-    setMatches(mq.matches);
-    const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [query]);
+  const getSnapshot = useCallback(
+    () => window.matchMedia(query).matches,
+    [query],
+  );
 
-  return matches;
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
 }