feat: replace technical drawings with premium animated design elements (DrillOrbit + StratumLines)

Former-commit-id: f56a9d40b6b4068691b1d8851da455da6514fa3c
2026-05-11 10:49:56 +02:00
parent 8a9b30f926
commit 8fc4cadd19
8 changed files with 310 additions and 1 deletions
--- a/components/ui/decorations/StratumLines.tsx
+++ b/components/ui/decorations/StratumLines.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+/**
+ * StratumLines
+ *
+ * Abstract horizontal "earth stratum" lines that slide in from opposite sides
+ * and form a downward-tapered open shape — evoking excavated earth layers.
+ *
+ * - On scroll entry: lines slide in with staggered delay, longest at top
+ * - After entry: each line gently breathes (oscillates horizontally) forever
+ *
+ * Place inside any `relative overflow-hidden` section. Zero layout impact.
+ */
+
+interface StratumLinesProps {
+  /** Which corner to anchor to */
+  placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+  /** Invert colors for light backgrounds */
+  invert?: boolean;
+  className?: string;
+}
+
+type StratumLine = {
+  width: number;   // % of container width
+  fromRight: boolean; // which side it slides in from
+  delay: number;
+  breatheAmp: number; // px oscillation
+  breatheDur: number;
+};
+
+// The stratum lines — longest at top, tapering like an open excavation
+const LINES: StratumLine[] = [
+  { width: 100, fromRight: false, delay: 0.0, breatheAmp: 4,  breatheDur: 5.2 },
+  { width: 88,  fromRight: true,  delay: 0.1, breatheAmp: 5,  breatheDur: 4.7 },
+  { width: 74,  fromRight: false, delay: 0.2, breatheAmp: 6,  breatheDur: 5.8 },
+  { width: 60,  fromRight: true,  delay: 0.3, breatheAmp: 5,  breatheDur: 4.3 },
+  { width: 46,  fromRight: false, delay: 0.4, breatheAmp: 4,  breatheDur: 6.1 },
+  { width: 32,  fromRight: true,  delay: 0.5, breatheAmp: 3,  breatheDur: 5.5 },
+  { width: 18,  fromRight: false, delay: 0.6, breatheAmp: 2,  breatheDur: 4.9 },
+];
+
+const PLACEMENT_CLASSES: Record<NonNullable<StratumLinesProps['placement']>, string> = {
+  'bottom-left':  'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+  'top-left':     'top-0 left-0',
+  'top-right':    'top-0 right-0',
+};
+
+export function StratumLines({
+  placement = 'bottom-left',
+  invert = false,
+  className = '',
+}: StratumLinesProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, margin: '0px 0px -8% 0px' });
+
+  const color = invert ? '#084c39' : '#0e7a5c';
+
+  return (
+    <div
+      ref={ref}
+      className={`absolute pointer-events-none select-none ${PLACEMENT_CLASSES[placement]} ${className}`}
+      style={{
+        width:  'clamp(180px, 24vw, 380px)',
+        height: 'clamp(160px, 20vw, 320px)',
+      }}
+      aria-hidden="true"
+    >
+      <div className="relative w-full h-full flex flex-col justify-end gap-[10%] pb-[8%]">
+        {LINES.map((line, i) => {
+          const isFromRight = placement.includes('right') ? !line.fromRight : line.fromRight;
+          return (
+            <motion.div
+              key={i}
+              style={{
+                width: `${line.width}%`,
+                height: '1.5px',
+                background: color,
+                opacity: 0.12 + (i / LINES.length) * 0.28,
+                alignSelf: isFromRight ? 'flex-end' : 'flex-start',
+                borderRadius: '2px',
+              }}
+              // Slide in from edge on first view
+              initial={{
+                x: isFromRight ? 60 : -60,
+                opacity: 0,
+              }}
+              animate={
+                isInView
+                  ? {
+                      // Settle at natural position, then breathe
+                      x: [
+                        0,
+                        isFromRight ? -line.breatheAmp : line.breatheAmp,
+                        0,
+                        isFromRight ? -line.breatheAmp * 0.6 : line.breatheAmp * 0.6,
+                        0,
+                      ],
+                      opacity: 0.12 + (i / LINES.length) * 0.28,
+                    }
+                  : { x: isFromRight ? 60 : -60, opacity: 0 }
+              }
+              transition={
+                isInView
+                  ? {
+                      x: {
+                        times: [0, 0.25, 0.5, 0.75, 1],
+                        duration: line.breatheDur,
+                        delay: line.delay,
+                        repeat: Infinity,
+                        ease: 'easeInOut',
+                      },
+                      opacity: {
+                        duration: 0.7,
+                        delay: line.delay,
+                        ease: 'easeOut',
+                      },
+                    }
+                  : { duration: 0.3 }
+              }
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}