mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix: resolve React Hook order violation in TrenchLines

Browse Source 
Former-commit-id: cc65edbf7879d3ce22f809275fa044289f3c99a2
This commit is contained in:
Marc Mintel
2026-05-10 15:43:28 +02:00
parent 1405252701
commit ee92692aac
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/ui/decorations/TrenchLines.tsx
View File

@@ -14,7 +14,8 @@ export function TrenchLines() {
}); });
// Map progress to vertical position // 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); 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]"> <div className="absolute top-0 bottom-0 left-6 lg:left-12 w-[1px] bg-white/[0.03]">
<motion.div <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)]" 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 */} {/* Subtle digging pulse marker */}
<motion.div <motion.div
className="absolute left-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]" 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> </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]"> <div className="absolute top-0 bottom-0 right-6 lg:right-12 w-[1px] bg-white/[0.03]">
<motion.div <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)]" 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 */} {/* Subtle digging pulse marker */}
<motion.div <motion.div
className="absolute right-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]" 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>
</div> </div>