101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface TrenchLayingAnimationProps {
|
|
className?: string;
|
|
invert?: boolean;
|
|
}
|
|
|
|
/**
|
|
* TrenchLayingAnimation
|
|
*
|
|
* Visualizes open trench construction (Offene Bauweise / Graben).
|
|
* 1. A trench is cut into the earth line.
|
|
* 2. A thick orange conduit pipe (Leerrohr) is laid into the trench.
|
|
* 3. The trench is backfilled with earth.
|
|
*
|
|
* This directly ties to E-TIB's core services, showing the process
|
|
* of laying cables rather than just abstract geometry.
|
|
*/
|
|
export function TrenchLayingAnimation({ className = '', invert = false }: TrenchLayingAnimationProps) {
|
|
const color = invert ? '#0a3d28' : '#0e7a5c';
|
|
const earthColor = invert ? 'rgba(10, 61, 40, 0.4)' : 'rgba(14, 122, 92, 0.4)';
|
|
const pipeColor = '#ff6b00';
|
|
|
|
// The trench profile: flat, 45-deg drop, flat bottom, 45-deg rise, flat
|
|
const trenchPath = "M 50 100 L 300 100 L 350 200 L 850 200 L 900 100 L 1150 100";
|
|
// The dug out area (used for the backfill animation)
|
|
const trenchFill = "M 300 100 L 350 200 L 850 200 L 900 100 Z";
|
|
// Length of the polyline is approx 1300
|
|
const pathLen = 1300;
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 1200 300"
|
|
preserveAspectRatio="none"
|
|
className={`absolute pointer-events-none select-none w-full ${className}`}
|
|
aria-hidden="true"
|
|
>
|
|
{/* Ground surface line (always visible outside the trench) */}
|
|
<line x1="0" y1="100" x2="1200" y2="100" stroke={color} strokeWidth="2" opacity={0.3} />
|
|
|
|
{/* Step 1: Trench cutting Left -> Right */}
|
|
<motion.path
|
|
d={trenchPath}
|
|
stroke={color}
|
|
strokeWidth="3"
|
|
fill="none"
|
|
strokeLinejoin="round"
|
|
strokeDasharray={`${pathLen} ${pathLen}`}
|
|
animate={{
|
|
strokeDashoffset: [pathLen, 0, 0, 0, pathLen]
|
|
}}
|
|
transition={{
|
|
duration: 10,
|
|
repeat: Infinity,
|
|
times: [0, 0.25, 0.8, 0.9, 1], // Cuts quickly (0-2.5s), stays open, closes at 9s
|
|
ease: "linear"
|
|
}}
|
|
/>
|
|
|
|
{/* Step 2: Pipe Laying (Drops into trench closely behind the cut) */}
|
|
<motion.path
|
|
d={trenchPath}
|
|
stroke={pipeColor}
|
|
strokeWidth="6"
|
|
fill="none"
|
|
strokeLinejoin="round"
|
|
strokeLinecap="round"
|
|
strokeDasharray={`${pathLen} ${pathLen}`}
|
|
animate={{
|
|
strokeDashoffset: [pathLen, pathLen, 0, 0, pathLen],
|
|
opacity: [0, 1, 1, 0, 0]
|
|
}}
|
|
transition={{
|
|
duration: 10,
|
|
repeat: Infinity,
|
|
times: [0, 0.1, 0.4, 0.8, 1], // Starts unspooling at 1s, finishes laying at 4s
|
|
ease: "linear"
|
|
}}
|
|
/>
|
|
|
|
{/* Step 3: Sand/Earth backfill (Fades in over the pipe) */}
|
|
<motion.path
|
|
d={trenchFill}
|
|
fill={earthColor}
|
|
initial={{ opacity: 0 }}
|
|
animate={{
|
|
opacity: [0, 0, 1, 1, 0]
|
|
}}
|
|
transition={{
|
|
duration: 10,
|
|
repeat: Infinity,
|
|
times: [0, 0.4, 0.5, 0.8, 1], // Fades in between 4s and 5s, covers the pipe
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|