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:
@@ -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 damit’s auch auf dark overlay knallt
|
// hellere Farben damit’s 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);
|
||||||
|
|||||||
Reference in New Issue
Block a user