damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
damjan_savic
2026-01-25 06:29:03 +01:00
parent 2b096416a0
commit 43593c7654
1 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/GlobalBackground.tsx
+52 -30
View File
@@ -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>