From 43593c76546d8bf7592a35cbfdd3fb6f0f25d804 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 06:29:03 +0100
Subject: [PATCH] auto-claude: subtask-2-1 - Add visibility detection to
 GlobalBackground component

---
 src/components/layout/GlobalBackground.tsx | 82 ++++++++++++++--------
 1 file changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/components/layout/GlobalBackground.tsx b/src/components/layout/GlobalBackground.tsx
index ca29edc..a33ccd2 100644
--- a/src/components/layout/GlobalBackground.tsx
+++ b/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
-              attributeName="y1"
-              values="20%;80%;20%"
-              dur="10s"
-              repeatCount="indefinite"
-            />
-            <animate
-              attributeName="y2"
-              values="20%;80%;20%"
-              dur="10s"
-              repeatCount="indefinite"
-            />
+            {shouldAnimate && (
+              <>
+                <animate
+                  attributeName="y1"
+                  values="20%;80%;20%"
+                  dur="10s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="y2"
+                  values="20%;80%;20%"
+                  dur="10s"
+                  repeatCount="indefinite"
+                />
+              </>
+            )}
           </line>
 
           <line
@@ -59,12 +75,14 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.15"
           >
-            <animate
-              attributeName="x1"
-              values="0%;100%;0%"
-              dur="15s"
-              repeatCount="indefinite"
-            />
+            {shouldAnimate && (
+              <animate
+                attributeName="x1"
+                values="0%;100%;0%"
+                dur="15s"
+                repeatCount="indefinite"
+              />
+            )}
           </line>
 
           <line
@@ -76,18 +94,22 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.1"
           >
-            <animate
-              attributeName="x1"
-              values="20%;80%;20%"
-              dur="12s"
-              repeatCount="indefinite"
-            />
-            <animate
-              attributeName="x2"
-              values="20%;80%;20%"
-              dur="12s"
-              repeatCount="indefinite"
-            />
+            {shouldAnimate && (
+              <>
+                <animate
+                  attributeName="x1"
+                  values="20%;80%;20%"
+                  dur="12s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="x2"
+                  values="20%;80%;20%"
+                  dur="12s"
+                  repeatCount="indefinite"
+                />
+              </>
+            )}
           </line>
         </svg>
       </div>