Reduce winner celebration confetti intensity and duration for subtler animation effect

Simplified confetti animation by removing continuous rain effect and reducing burst parameters. Changed color palette to warmer gold/green tones. Decreased particle count from 170 to 55 per burst, reduced spread from 95° to 72°, lowered velocity from 42 to 28, and adjusted positioning. Added gravity, ticks, and scalar parameters for more controlled particle behavior. Shortened total celebration duration from 5500ms to 4200ms.
This commit is contained in:
2026-08-02 11:47:16 +02:00
parent d672648a05
commit 209f9c10dd
+16 -25
View File
@@ -18,48 +18,39 @@ export default function WinnerCelebration({ open, winnerName, onClose }) {
window.matchMedia("(prefers-reduced-motion: reduce)").matches; window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduceMotion) { if (!reduceMotion) {
const end = Date.now() + 4500;
// WICHTIG: über dem Overlay rendern // WICHTIG: über dem Overlay rendern
const TOP_Z = 2147483647; const TOP_Z = 2147483647;
// hellere Farben damits auch auf dark overlay knallt // hellere Farben damits auch auf dark overlay knallt
const bright = ["#ffffff", "#ffd166", "#06d6a0", "#4cc9f0", "#f72585"]; const bright = ["#ffffff", "#e9d8a6", "#c9aa62", "#7cffa8"];
// 2 große Bursts // 2 große Bursts
confetti({ confetti({
particleCount: 170, particleCount: 55,
spread: 95, spread: 72,
startVelocity: 42, startVelocity: 28,
origin: { x: 0.12, y: 0.62 }, gravity: 0.85,
ticks: 150,
scalar: 0.82,
origin: { x: 0.22, y: 0.62 },
zIndex: TOP_Z, zIndex: TOP_Z,
colors: bright, colors: bright,
}); });
confetti({ confetti({
particleCount: 170, particleCount: 55,
spread: 95, spread: 72,
startVelocity: 42, startVelocity: 28,
origin: { x: 0.88, y: 0.62 }, gravity: 0.85,
ticks: 150,
scalar: 0.82,
origin: { x: 0.78, y: 0.62 },
zIndex: TOP_Z, zIndex: TOP_Z,
colors: bright, colors: bright,
}); });
// “Rain” über die Zeit
(function frame() {
confetti({
particleCount: 8,
spread: 75,
startVelocity: 34,
origin: { x: Math.random(), y: Math.random() * 0.18 },
scalar: 1.05,
zIndex: TOP_Z,
colors: bright,
});
if (Date.now() < end) requestAnimationFrame(frame);
})();
} }
const t = setTimeout(() => onClose?.(), 5500); const t = setTimeout(() => onClose?.(), 4200);
return () => { return () => {
clearTimeout(t); clearTimeout(t);