fix: DrillOrbit fades in/out at path edges, DrillBitSpinner uses radial mask instead of hard clip

Former-commit-id: 3aea27f3e17984634206ca817d074b18e712933e
2026-05-11 21:31:49 +02:00
parent 079398239f
commit 74caea6854
11 changed files with 153 additions and 51 deletions
--- a/components/ui/decorations/DrillBitSpinner.tsx
+++ b/components/ui/decorations/DrillBitSpinner.tsx
@@ -8,24 +8,15 @@ import { motion } from 'framer-motion';
 * Abstract animated drill head cross-section.
 * Resembles an HDD tri-blade drill bit seen from the front.
 *
- * - 3 rotating cutting blades at 120° intervals
- * - Outer halo ring
- * - Inner core circle
- * - Continuous rotation with optional pulse glow
- *
- * Zero layout impact — position it absolutely in its parent.
+ * The wrapping div uses a radial-gradient mask so it fades naturally
+ * into whatever background it's placed on — no hard edge clipping.
 */

 interface DrillBitSpinnerProps {
-  /** Diameter in pixels */
  size?: number;
-  /** Color of the drill elements */
  color?: string;
-  /** Rotation duration in seconds */
  duration?: number;
-  /** Overall opacity 0–1 */
  opacity?: number;
-  /** Whether to show a pulse glow ring */
  glow?: boolean;
  className?: string;
 }
@@ -44,8 +35,6 @@ export function DrillBitSpinner({
  const bladeW = r * 0.18;
  const coreR = r * 0.22;

-  // 3 blade tip positions at 120° intervals
-  // Each blade: a rounded rectangle swept from center outward
  const blades = [0, 120, 240].map((deg) => {
    const rad = (deg * Math.PI) / 180;
    return {
@@ -58,7 +47,15 @@ export function DrillBitSpinner({
  return (
    <div
      className={`relative pointer-events-none select-none ${className}`}
-      style={{ width: size, height: size, opacity }}
+      style={{
+        width: size,
+        height: size,
+        opacity,
+        // Radial gradient mask: the spinner fades out toward all edges.
+        // This prevents any hard clip when partially outside the container.
+        WebkitMaskImage: 'radial-gradient(circle at center, black 20%, transparent 70%)',
+        maskImage: 'radial-gradient(circle at center, black 20%, transparent 70%)',
+      }}
      aria-hidden="true"
    >
      {/* Glow bloom (pulsing) */}
@@ -92,7 +89,6 @@ export function DrillBitSpinner({
        {/* Three cutting blades */}
        {blades.map((blade, i) => (
          <g key={i} transform={`rotate(${blade.rotate} ${r} ${r})`}>
-            {/* Main blade body */}
            <rect
              x={r - bladeW / 2}
              y={r - coreR}
@@ -101,9 +97,7 @@ export function DrillBitSpinner({
              rx={bladeW / 2}
              fill={color}
              opacity={0.7}
-              transform={`rotate(0 ${r} ${r})`}
            />
-            {/* Blade tip accent */}
            <circle
              cx={r}
              cy={r - coreR - bladeLen + bladeW / 2}
@@ -122,7 +116,7 @@ export function DrillBitSpinner({
          opacity={0.5}
        />

-        {/* Center nozzle (mud port) */}
+        {/* Center nozzle */}
        <circle cx={r} cy={r} r={coreR * 0.55} fill={color} opacity={0.85} />
        <circle cx={r} cy={r} r={coreR * 0.22} fill="white" opacity={0.6} />
      </motion.svg>
--- a/components/ui/decorations/DrillOrbit.tsx
+++ b/components/ui/decorations/DrillOrbit.tsx
@@ -6,24 +6,23 @@ import { useRef } from 'react';
 /**
 * DrillOrbit
 *
- * A glowing point continuously looping along a parabolic arc —
- * evoking the trajectory of a horizontal directional drill bit.
+ * A glowing point looping along a parabolic arc —
+ * abstractly evoking a horizontal directional drill path.
 *
- * The arc is drawn once on scroll-entry. The dot then loops forever.
- * Place inside any `relative overflow-hidden` section. Zero layout impact.
+ * The SVG has a horizontal linear-gradient mask: the entire
+ * element fades in from the edge and out toward the opposite side.
+ * The travelling dot also animates its own opacity to fade in/out
+ * at the path endpoints — no abrupt appearance or disappearance.
 */

 type Side = 'left' | 'right';

 interface DrillOrbitProps {
-  /** Which side of the section to anchor to */
  side?: Side;
-  /** Invert colors for light backgrounds */
  invert?: boolean;
  className?: string;
 }

-// The parabolic bore path (left-to-right across a 800×200 canvas)
 const PATH = 'M -20 80 C 150 80 200 340 400 340 C 600 340 650 80 820 80';

 export function DrillOrbit({
@@ -37,6 +36,18 @@ export function DrillOrbit({
  const color = invert ? '#084c39' : '#0e7a5c';
  const glowColor = invert ? 'rgba(8,76,57,0.35)' : 'rgba(14,122,92,0.45)';

+  // Fade from transparent → opaque → transparent over the animation cycle
+  // so the dot smoothly appears from the edge and disappears at the far edge.
+  const dotOpacityKeyframes = [0, 0, 1, 1, 1, 0, 0];
+  const dotOpacityTimes    = [0, 0.08, 0.18, 0.5, 0.82, 0.92, 1];
+
+  const transition = {
+    duration: 5.5,
+    ease: 'easeInOut' as const,
+    repeat: Infinity,
+    repeatDelay: 1.5,
+  };
+
  return (
    <svg
      ref={ref}
@@ -50,11 +61,15 @@ export function DrillOrbit({
        width: 'clamp(360px, 55vw, 800px)',
        height: 'clamp(180px, 27vw, 420px)',
        transform: side === 'left' ? 'scaleX(-1)' : undefined,
+        // Horizontal mask: fades at the near edge (0→20%) and far edge (80%→100%)
+        WebkitMaskImage:
+          'linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)',
+        maskImage:
+          'linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)',
      }}
      aria-hidden="true"
    >
      <defs>
-        {/* Glow filter for the drill-head */}
        <filter id="drill-glow" x="-80%" y="-80%" width="260%" height="260%">
          <feGaussianBlur stdDeviation="10" result="blur" />
          <feMerge>
@@ -62,16 +77,9 @@ export function DrillOrbit({
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
-
-        {/* Fading trail gradient along path */}
-        <linearGradient id="trail-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%"   stopColor={color} stopOpacity="0" />
-          <stop offset="60%"  stopColor={color} stopOpacity="0.6" />
-          <stop offset="100%" stopColor={color} stopOpacity="0" />
-        </linearGradient>
      </defs>

-      {/* ── Bore arc (draws in once, stays) ── */}
+      {/* Bore arc */}
      <motion.path
        d={PATH}
        stroke={color}
@@ -83,7 +91,7 @@ export function DrillOrbit({
        transition={{ duration: 2.5, ease: [0.4, 0, 0.2, 1] }}
      />

-      {/* ── Dashed ground-level reference ── */}
+      {/* Dashed ground-level reference */}
      <motion.line
        x1="0" y1="80" x2="800" y2="80"
        stroke={color}
@@ -95,7 +103,7 @@ export function DrillOrbit({
        transition={{ duration: 1.6, ease: 'easeOut' }}
      />

-      {/* ── Continuously looping drill-head ── */}
+      {/* Continuously looping drill-head — fades in/out at path ends */}
      {isInView && (
        <>
          {/* Outer glow bloom */}
@@ -104,25 +112,33 @@ export function DrillOrbit({
            fill={glowColor}
            filter="url(#drill-glow)"
            style={{ offsetPath: `path('${PATH}')`, offsetDistance: '0%' } as React.CSSProperties}
-            animate={{ offsetDistance: ['0%', '100%'] }}
-            transition={{ duration: 5.5, ease: 'easeInOut', repeat: Infinity, repeatDelay: 1.5 }}
+            animate={{
+              offsetDistance: ['0%', '100%'],
+              opacity: dotOpacityKeyframes,
+            }}
+            transition={{ ...transition, times: dotOpacityTimes }}
          />
          {/* Core dot */}
          <motion.circle
            r={5}
            fill={color}
            style={{ offsetPath: `path('${PATH}')`, offsetDistance: '0%' } as React.CSSProperties}
-            animate={{ offsetDistance: ['0%', '100%'] }}
-            transition={{ duration: 5.5, ease: 'easeInOut', repeat: Infinity, repeatDelay: 1.5 }}
+            animate={{
+              offsetDistance: ['0%', '100%'],
+              opacity: dotOpacityKeyframes,
+            }}
+            transition={{ ...transition, times: dotOpacityTimes }}
          />
          {/* Inner white highlight */}
          <motion.circle
            r={2}
            fill="white"
-            opacity={0.8}
            style={{ offsetPath: `path('${PATH}')`, offsetDistance: '0%' } as React.CSSProperties}
-            animate={{ offsetDistance: ['0%', '100%'] }}
-            transition={{ duration: 5.5, ease: 'easeInOut', repeat: Infinity, repeatDelay: 1.5 }}
+            animate={{
+              offsetDistance: ['0%', '100%'],
+              opacity: dotOpacityKeyframes.map((v) => v * 0.8),
+            }}
+            transition={{ ...transition, times: dotOpacityTimes }}
          />
        </>
      )}
--- a/components/ui/decorations/DrillTeeth.tsx
+++ b/components/ui/decorations/DrillTeeth.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+/**
+ * DrillTeeth
+ *
+ * Abstract, minimalist section divider inspired by HDD bore paths.
+ * Not literal teeth — instead, a subtle organic wave that hints at
+ * earth strata displaced by subsurface drilling.
+ *
+ * Two gentle asymmetric curves create a refined, modern transition
+ * between sections. Think Stripe/Linear, not construction site.
+ *
+ * Usage: Place inside a section with `relative overflow-hidden`.
+ * The SVG renders outside the box via translate, creating overlap.
+ */
+
+interface DrillTeethProps {
+  /** Which edge of the parent section */
+  position?: 'top' | 'bottom';
+  /** Fill color — should match the CURRENT section's background */
+  fill?: string;
+  className?: string;
+}
+
+export function DrillTeeth({
+  position = 'bottom',
+  fill = 'currentColor',
+  className = '',
+}: DrillTeethProps) {
+  const isTop = position === 'top';
+
+  return (
+    <div
+      className={`absolute left-0 right-0 w-full pointer-events-none z-20 ${
+        isTop ? 'top-0 -translate-y-[99%]' : 'bottom-0 translate-y-[99%]'
+      } ${className}`}
+      aria-hidden="true"
+      style={{ lineHeight: 0 }}
+    >
+      <svg
+        viewBox="0 0 1440 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="none"
+        className="w-full h-[clamp(16px,3vw,48px)] block"
+        style={isTop ? { transform: 'scaleY(-1)' } : undefined}
+      >
+        {/* Primary curve — gentle asymmetric wave */}
+        <path
+          d="M0,48 L0,28 C120,36 240,6 480,12 C720,18 840,42 1080,24 C1200,16 1320,32 1440,28 L1440,48 Z"
+          fill={fill}
+        />
+        {/* Secondary subtle offset — adds depth like a geological layer */}
+        <path
+          d="M0,48 L0,36 C180,42 360,16 600,22 C840,28 960,44 1200,32 C1320,26 1400,38 1440,36 L1440,48 Z"
+          fill={fill}
+          opacity="0.6"
+        />
+      </svg>
+    </div>
+  );
+}