auto-claude: subtask-2-1 - Add visibility detection to GlobalBackground component

src/components/layout/GlobalBackground.tsx

@@ -1,8 +1,20 @@
+import { usePageVisibility } from '@/hooks/usePageVisibility';
+import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
+
 const GlobalBackground = () => {
+  const isPageVisible = usePageVisibility();
+  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({
+    threshold: 0.1,
+    rootMargin: '0px'
+  });
+
+  const shouldAnimate = isPageVisible && isIntersecting;
+
   return (
     <>
       {/* Background layer */}
       <div
+        ref={ref}
         className="fixed inset-0 bg-zinc-900"
         style={{ zIndex: -2 }}
       />
@@ -36,18 +48,22 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.2"
           >
-            <animate
+            {shouldAnimate && (
-              attributeName="y1"
+              <>
-              values="20%;80%;20%"
+                <animate
-              dur="10s"
+                  attributeName="y1"
-              repeatCount="indefinite"
+                  values="20%;80%;20%"
-            />
+                  dur="10s"
-            <animate
+                  repeatCount="indefinite"
-              attributeName="y2"
+                />
-              values="20%;80%;20%"
+                <animate
-              dur="10s"
+                  attributeName="y2"
-              repeatCount="indefinite"
+                  values="20%;80%;20%"
-            />
+                  dur="10s"
+                  repeatCount="indefinite"
+                />
+              </>
+            )}
           </line>
 
           <line
@@ -59,12 +75,14 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.15"
           >
-            <animate
+            {shouldAnimate && (
-              attributeName="x1"
+              <animate
-              values="0%;100%;0%"
+                attributeName="x1"
-              dur="15s"
+                values="0%;100%;0%"
-              repeatCount="indefinite"
+                dur="15s"
-            />
+                repeatCount="indefinite"
+              />
+            )}
           </line>
 
           <line
@@ -76,18 +94,22 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.1"
           >
-            <animate
+            {shouldAnimate && (
-              attributeName="x1"
+              <>
-              values="20%;80%;20%"
+                <animate
-              dur="12s"
+                  attributeName="x1"
-              repeatCount="indefinite"
+                  values="20%;80%;20%"
-            />
+                  dur="12s"
-            <animate
+                  repeatCount="indefinite"
-              attributeName="x2"
+                />
-              values="20%;80%;20%"
+                <animate
-              dur="12s"
+                  attributeName="x2"
-              repeatCount="indefinite"
+                  values="20%;80%;20%"
-            />
+                  dur="12s"
+                  repeatCount="indefinite"
+                />
+              </>
+            )}
           </line>
         </svg>
       </div>