From ee92692aac6b69344ff8657b86604aa90185ac3c Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 10 May 2026 15:43:28 +0200
Subject: [PATCH] fix: resolve React Hook order violation in TrenchLines

Former-commit-id: cc65edbf7879d3ce22f809275fa044289f3c99a2
---
 components/ui/decorations/TrenchLines.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/ui/decorations/TrenchLines.tsx b/components/ui/decorations/TrenchLines.tsx
index 1f9046699..cc3af92d6 100644
--- a/components/ui/decorations/TrenchLines.tsx
+++ b/components/ui/decorations/TrenchLines.tsx
@@ -14,7 +14,8 @@ export function TrenchLines() {
   });
 
   // Map progress to vertical position
-  const yPosition = useTransform(smoothProgress, [0, 1], ['0%', '100%']);
+  const yPosition = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
+  const yPositionMarker = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
 
   const [mounted, setMounted] = useState(false);
 
@@ -30,12 +31,12 @@ export function TrenchLines() {
       <div className="absolute top-0 bottom-0 left-6 lg:left-12 w-[1px] bg-white/[0.03]">
         <motion.div 
           className="absolute top-0 left-[-1px] w-[3px] h-[15vh] bg-gradient-to-b from-transparent via-primary to-transparent shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
-          style={{ y: useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']) }}
+          style={{ y: yPosition }}
         />
         {/* Subtle digging pulse marker */}
         <motion.div
           className="absolute left-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]"
-          style={{ y: useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']), marginTop: '7.5vh' }}
+          style={{ y: yPositionMarker, marginTop: '7.5vh' }}
         />
       </div>
 
@@ -43,12 +44,12 @@ export function TrenchLines() {
       <div className="absolute top-0 bottom-0 right-6 lg:right-12 w-[1px] bg-white/[0.03]">
         <motion.div 
           className="absolute top-0 right-[-1px] w-[3px] h-[15vh] bg-gradient-to-b from-transparent via-primary to-transparent shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
-          style={{ y: useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']) }}
+          style={{ y: yPosition }}
         />
         {/* Subtle digging pulse marker */}
         <motion.div
           className="absolute right-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]"
-          style={{ y: useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']), marginTop: '7.5vh' }}
+          style={{ y: yPositionMarker, marginTop: '7.5vh' }}
         />
       </div>
     </div>