72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface AbstractBoreProps {
|
|
className?: string;
|
|
invert?: boolean;
|
|
}
|
|
|
|
/**
|
|
* AbstractBore
|
|
*
|
|
* Visualizes Horizontal Directional Drilling (HDD).
|
|
* A smooth, parabolic underground arc. A beam of energy (the drill/cable)
|
|
* travels along this path, fading in gently at the start and fading out at the end.
|
|
* Purely abstract, no literal drill bits or circles.
|
|
*/
|
|
export function AbstractBore({ className = '', invert = false }: AbstractBoreProps) {
|
|
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)';
|
|
|
|
// Parabolic path: Starts left, dips deep in the middle, comes up right
|
|
const pathD = "M -100 50 C 200 50 300 250 500 250 C 700 250 800 50 1100 50";
|
|
// The length of this cubic bezier is approx 1260
|
|
const pathLength = 1260;
|
|
// The length of the moving beam
|
|
const beamLength = 200;
|
|
|
|
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"
|
|
opacity={0.15}
|
|
/>
|
|
|
|
{/* Moving Energy Beam */}
|
|
<motion.path
|
|
d={pathD}
|
|
stroke={glowColor}
|
|
strokeWidth="2"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
// Dasharray: beam length, then gap for the rest of the path
|
|
strokeDasharray={`${beamLength} ${pathLength}`}
|
|
animate={{
|
|
// Move from right off-screen to left off-screen (or vice versa)
|
|
// Starting at pathLength pushes the dash off the start of the curve.
|
|
// Ending at -beamLength pushes it completely off the end.
|
|
strokeDashoffset: [pathLength, -beamLength],
|
|
// Fade in during the first 20%, stay solid, fade out during last 20%
|
|
opacity: [0, 1, 1, 0]
|
|
}}
|
|
transition={{
|
|
duration: 6,
|
|
ease: "linear",
|
|
repeat: Infinity,
|
|
times: [0, 0.15, 0.85, 1] // Syncs with the offset to fade exactly at edges
|
|
}}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|