36 lines
686 B
TypeScript
36 lines
686 B
TypeScript
'use client'
|
|
|
|
interface FlowParticlesProps {
|
|
pathId: string
|
|
count?: number
|
|
color?: string
|
|
size?: number
|
|
duration?: number
|
|
}
|
|
|
|
export default function FlowParticles({
|
|
pathId,
|
|
count = 3,
|
|
color = '#2dd4bf',
|
|
size = 3,
|
|
duration = 3,
|
|
}: FlowParticlesProps) {
|
|
return (
|
|
<>
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<circle
|
|
key={i}
|
|
r={size}
|
|
fill={color}
|
|
className="animate-particle"
|
|
style={{
|
|
offsetPath: `url(#${pathId})`,
|
|
'--duration': `${duration}s`,
|
|
'--delay': `${(i / count) * duration}s`,
|
|
} as React.CSSProperties}
|
|
/>
|
|
))}
|
|
</>
|
|
)
|
|
}
|