63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|