34 lines
854 B
TypeScript
34 lines
854 B
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
export function SparkleEffect() {
|
|
const [sparkles, setSparkles] = useState<Array<{ id: number; x: number; y: number; delay: number }>>([])
|
|
|
|
useEffect(() => {
|
|
const newSparkles = Array.from({ length: 20 }, (_, i) => ({
|
|
id: i,
|
|
x: Math.random() * 100,
|
|
y: Math.random() * 100,
|
|
delay: Math.random() * 2,
|
|
}))
|
|
setSparkles(newSparkles)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="fixed inset-0 pointer-events-none overflow-hidden">
|
|
{sparkles.map((sparkle) => (
|
|
<div
|
|
key={sparkle.id}
|
|
className="absolute w-2 h-2 bg-primary rounded-full sparkle"
|
|
style={{
|
|
left: `${sparkle.x}%`,
|
|
top: `${sparkle.y}%`,
|
|
animationDelay: `${sparkle.delay}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|