58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { motion, useScroll, useSpring, useTransform } from 'framer-motion';
|
|
|
|
export function TrenchLines() {
|
|
const { scrollYProgress } = useScroll();
|
|
|
|
// Apply a spring to make the scroll movement feel heavier, industrial
|
|
const smoothProgress = useSpring(scrollYProgress, {
|
|
stiffness: 100,
|
|
damping: 30,
|
|
restDelta: 0.001
|
|
});
|
|
|
|
// Map progress to vertical position
|
|
const yPosition = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
|
|
const yPositionMarker = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
|
|
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden hidden sm:block">
|
|
{/* Left Trench Line */}
|
|
<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: 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: yPositionMarker, marginTop: '7.5vh' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Trench Line */}
|
|
<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: 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: yPositionMarker, marginTop: '7.5vh' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|