68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { cn } from '@/lib/utils'; // Assuming `cn` is defined in `lib/utils`
|
|
|
|
const Confetti: React.FC = () => {
|
|
const [confetti, setConfetti] = useState<number[]>([]);
|
|
|
|
useEffect(() => {
|
|
const confettiArray = Array.from({ length: 300 }, (_, i) => i); // Generate 300 confetti pieces
|
|
setConfetti(confettiArray);
|
|
|
|
const timer = setTimeout(() => {
|
|
setConfetti([]);
|
|
}, 5000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const randomColor = () => {
|
|
const colors = [
|
|
'linear-gradient(45deg, #5D5D72, #8589DE)',
|
|
'linear-gradient(45deg, #E1E0FF, #575992)',
|
|
'#8589DE',
|
|
'#575992',
|
|
'#E1E0FF',
|
|
];
|
|
return colors[Math.floor(Math.random() * colors.length)];
|
|
};
|
|
|
|
if (confetti.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 overflow-hidden pointer-events-none z-50">
|
|
{confetti.map((_, i) => {
|
|
const randomSize = Math.random() * 10 + 8; // Size between 8px and 18px
|
|
const randomStartX = Math.random() * 100; // Start anywhere across the screen
|
|
const randomStartY = Math.random() < 0.5 ? -10 : 110; // Start above or below the screen
|
|
const randomDuration = Math.random() * 1 + 4; // Duration between 4s and 5s
|
|
const randomEndX = Math.random() * 200 - 100; // Drift horizontally (-100vw to +100vw)
|
|
const randomRotation = Math.random() * 360; // Start with a random rotation
|
|
const randomDelay = Math.random() * 0.5; // Delay between 0-0.5s
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={cn('absolute', 'confetti-piece')}
|
|
style={
|
|
{
|
|
top: `${randomStartY}%`,
|
|
left: `${randomStartX}%`,
|
|
width: `${randomSize}px`,
|
|
height: `${randomSize}px`,
|
|
background: randomColor(),
|
|
animationDuration: `${randomDuration}s`,
|
|
animationDelay: `${randomDelay}s`,
|
|
transform: `rotate(${randomRotation}deg)`,
|
|
'--end-x': `${randomEndX}vw`,
|
|
} as React.CSSProperties
|
|
}></div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Confetti;
|