feat: content-aware HDDBore and TrenchLaying animations with drillbit transition

Former-commit-id: 1a541fc31c5b24aa083c3441a9ab642c7d49da59
2026-05-11 21:49:57 +02:00
parent e33dcdddac
commit 2e1e34a617
12 changed files with 236 additions and 214 deletions
--- a/components/ui/decorations/TrenchLayingAnimation.tsx
+++ b/components/ui/decorations/TrenchLayingAnimation.tsx
@@ -0,0 +1,100 @@
+'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>
+  );
+}