48 lines
889 B
TypeScript
48 lines
889 B
TypeScript
'use client'
|
|
|
|
interface AnimatedPipeProps {
|
|
d: string
|
|
width?: number
|
|
color?: string
|
|
speed?: 'slow' | 'normal' | 'fast'
|
|
opacity?: number
|
|
}
|
|
|
|
export default function AnimatedPipe({
|
|
d,
|
|
width = 4,
|
|
color = '#2dd4bf',
|
|
speed = 'normal',
|
|
opacity = 0.6,
|
|
}: AnimatedPipeProps) {
|
|
const speedClass = {
|
|
slow: 'animate-pipe-flow-slow',
|
|
normal: 'animate-pipe-flow',
|
|
fast: 'animate-pipe-flow-fast',
|
|
}[speed]
|
|
|
|
return (
|
|
<g>
|
|
{/* Outer wall */}
|
|
<path
|
|
d={d}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={width + 4}
|
|
strokeOpacity={opacity * 0.3}
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Inner flow */}
|
|
<path
|
|
d={d}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={width}
|
|
strokeOpacity={opacity}
|
|
strokeLinecap="round"
|
|
className={speedClass}
|
|
/>
|
|
</g>
|
|
)
|
|
}
|