71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface AbstractTrenchProps {
|
|
className?: string;
|
|
invert?: boolean;
|
|
}
|
|
|
|
/**
|
|
* AbstractTrench
|
|
*
|
|
* Visualizes open trench construction (Offene Bauweise / Graben).
|
|
* A sharp, geometric profile representing a cut into the earth.
|
|
* A beam of energy flows through the trench, hugging the sharp corners,
|
|
* fading in and out at the horizontal edges.
|
|
* Purely abstract, architectural styling.
|
|
*/
|
|
export function AbstractTrench({ className = '', invert = false }: AbstractTrenchProps) {
|
|
const color = invert ? 'rgba(10, 61, 40, 0.6)' : 'rgba(14, 122, 92, 0.6)';
|
|
const glowColor = invert ? 'rgba(10, 61, 40, 1)' : 'rgba(20, 184, 138, 1)';
|
|
|
|
// Geometric trench path: straight, 45-deg drop, straight bottom, 45-deg rise, straight
|
|
const pathD = "M -100 50 L 300 50 L 350 200 L 650 200 L 700 50 L 1100 50";
|
|
// Length of this polyline is approx 1260
|
|
const pathLength = 1260;
|
|
const beamLength = 250;
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 1000 300"
|
|
preserveAspectRatio="none"
|
|
className={`absolute pointer-events-none select-none w-full ${className}`}
|
|
aria-hidden="true"
|
|
>
|
|
{/* Subtle track background */}
|
|
<path
|
|
d={pathD}
|
|
stroke={color}
|
|
strokeWidth="1"
|
|
fill="none"
|
|
strokeLinejoin="round"
|
|
opacity={0.15}
|
|
/>
|
|
|
|
{/* Moving Energy Beam */}
|
|
<motion.path
|
|
d={pathD}
|
|
stroke={glowColor}
|
|
strokeWidth="2"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
// Dasharray: beam length, then gap for the rest of the path
|
|
strokeDasharray={`${beamLength} ${pathLength}`}
|
|
animate={{
|
|
strokeDashoffset: [pathLength, -beamLength],
|
|
opacity: [0, 1, 1, 0]
|
|
}}
|
|
transition={{
|
|
duration: 7.5,
|
|
ease: "linear",
|
|
repeat: Infinity,
|
|
times: [0, 0.15, 0.85, 1], // Syncs with the offset to fade exactly at edges
|
|
delay: 1.5 // Offset from AbstractBore if used together
|
|
}}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|